Twitchのクリップのサムネイルを取得する方法

2018年8月9日2018年10月17日API, Web

黒死のドブネズミじゃなくて

twitch.tvのお話

1. Twitchのクリップのサムネイル
- 1.1. 御託はいいからさっさとサムネイルよこせよ
2. Twitchのクリップのサムネイルを取得する流れ
3. Twitch API
4. 実際にサムネイルを取得する
- 4.1. PHPで取得する場合のサンプル
- 4.2. 取得できたクリップのサムネイル
5. でけーサムネイル（画像）ねーの？
6. 別の方法もあんだろ

Twitchのクリップのサムネイル

YouTube動画のサムネイルはアドレスから動画IDを取り出せばYouTube Data APIを叩かなくても取得できますが、TwitchのClipのサムネイルはTwitch APIを呼び出す必要があります。
何それめんどくさい

御託はいいからさっさとサムネイルよこせよ

embed.ly
ここにクリップのアドレス入れろおら

Twitchのクリップのサムネイルを取得する流れ

クリップのアドレスを用意
Twitch APIにクリップデータを取得するリクエストを投げる
返ってきたデータの中にサムネイルの情報が入っている

Twitch API

Twitch APIを呼び出すにはクライアントIDが必要です。

クライアントIDの生成

Twitch Developers でTwitchアカウントにログインします。
ダッシュボード > アプリから [アプリケーションを登録] をクリックします。
フォームに必要事項を入力し、[作成] をクリックします。
作成したデベロッパーアプリケーションの[管理] をクリックします。
クライアントIDが記載されているのでメモします。

あれ？もっと色々登録しなきゃダメだった気がするけどこれだけで生成できた

参考：
New Twitch API | Twitch Developers

Twitch APIを使う

2018年8月9日現在の最新バージョンはv5です。クライアントIDと目的に応じたリクエストURLを投げたらリクエストに対応したデータがjsonで返ってきます。
すごい

参考：
Twitch API v5 | Twitch Developers

Twitch APIでクリップデータを取得する

Twitch APIでクリップデータを取得すれば、そのデータの中に3種類の大きさのサムネイルのアドレスも含まれています。

クリップにはslugというユニークな文字列が割り当てられていて、クリップデータを取得するリクエストURLにはこのslugを付与します。slugは動画IDと思えば良いです。

クリップデータを取得する時のリクエストURLは次の通りです。
https://api.twitch.tv/kraken/clips/<slug>

例）
クリップ：https://clips.twitch.tv/HotHedonisticPistachioPoooound の場合
slug：HotHedonisticPistachioPoooound
リクエストURL：https://api.twitch.tv/kraken/clips/HotHedonisticPistachioPoooound

参考：
Clips Reference | Twitch Developers

実際にサムネイルを取得する

PHPで取得する場合のサンプル

エラー処理等は省略しています。

<?php
$clipUrl = "https://clips.twitch.tv/HotHedonisticPistachioPoooound";
$clipSlug = str_replace('https://clips.twitch.tv/', '', $clipUrl);
$clipApi = "https://api.twitch.tv/kraken/clips/".$clipSlug;
$clientId = "生成したクライアントID";

$ch = curl_init();

curl_setopt_array($ch, array(
CURLOPT_HTTPHEADER => array(
'Client-ID: ' . $clientId,
$clientId, 'Accept: application/vnd.twitchtv.v5+json'
),
CURLOPT_RETURNTRANSFER => true,
CURLOPT_URL => $clipApi,
CURLOPT_REFERRER => $clipApi
));
$response = curl_exec($ch);
curl_close($ch);

$json = json_decode($response, true);

$thumbnailMedium = $json['thumbnails']['medium']; //480x272.jpg
$thumbnailSmall = $json['thumbnails']['small']; //260x147.jpg
$thumbnailTiny = $json['thumbnails']['tiny']; //86x45.jpg
?>

たまにエラーが返ってくるので実際に運用する場合はきちんとエラー処理しましょう。

参考：
Twitch API v5 > Guide > Errors | Twitch Developers

取得できたクリップのサムネイル

クリップ：https://clips.twitch.tv/HotHedonisticPistachioPoooound
から取得できたサムネイルは以下の3つ

https://clips-media-assets2.twitch.tv/23830423104-offset-22892-preview-480×272.jpg
https://clips-media-assets2.twitch.tv/23830423104-offset-22892-preview-260×147.jpg
https://clips-media-assets2.twitch.tv/23830423104-offset-22892-preview-86×45.jpg