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

2018年10月17日API, Web

Twitch

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

Twitch

twitch.tvのお話

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

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

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

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

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

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

Twitch API

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

クライアントIDの生成

  1. Twitch Developers でTwitchアカウントにログインします。
  2. ダッシュボード > アプリ から [アプリケーションを登録] をクリックします。
  3. フォームに必要事項を入力し、[作成] をクリックします。
  4. 作成したデベロッパーアプリケーションの[管理] をクリックします。
  5. クライアント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

[medium] 480×272
[small] 260×147
[tiny] 86×45
ちっちぇえな

でけーサムネイル(画像)ねーの?

あります。
jsonで返ってくるサムネイルは3種類の小さなものですが、アドレスの最後の-480×272を削れば大きな画像が手に入ります。

https://clips-media-assets2.twitch.tv/23830423104-offset-22892-preview-480×272.jpg
→ https://clips-media-assets2.twitch.tv/23830423104-offset-22892-preview.jpg
(1920×1080)

別の方法もあんだろ

embed.lyもAPIを提供しているのでがんばって使いこなせおら

API, Web

Posted by aggreg