Naoki Otsu

Youtubeの再生リストの動画を一覧表示する - Youtube Data API v3

2016-11-13

自分のプライベートなプロダクトで、
Youtubeの再生リストの動画を一覧表示する機能が入れる必要がありまして、
Youtube Data API v3 のガイドを見ながらやっていましたが、
スムーズに行かなかったので結論の実装方法をメモしておくことにしました。

実装方法

下記の4ステップを踏むと良かったです。

1. APIキーを取得する

こちらの手順を踏んで、APIキーを取得します。

2. 表示したい動画のリクエストURLをリファレンスから調べます

自分の場合は、再生リストの一覧が欲しかったので、こちらのリクエストURLが必要でした。

GET https://www.googleapis.com/youtube/v3/playlistItems

GET形式で、このURLにリクエストをすれば良いようです。

3. 再生リストのIDを調べる

再生リストを表示したい場合は、再生リストIDというのが必要なようでした。
チャンネルIDとかも必要なのかなと思っていましたが、それは必要なかったです。

再生リストIDは、例えば
https://www.youtube.com/playlist?list=PLlVlyGVtvuVnAx-u38QOieyVIrMEmzuDx
の再生リストのIDは、

PLlVlyGVtvuVnAx-u38QOieyVIrMEmzuDx

のように、URLの最後の部分になるようです。

4. Ajaxでリクエストを投げてレスポンスを表示する

Youtube Data API v3のガイドだと、リクエストURLに ?part= とかを付けて、受け取ってねとありましたが、
jQueryとかだと、下記のようにリクエストを投げても、無事に欲しいレスポンスが返ってくるので、自分はこっちで実装しました。

$.ajax({
  type: 'get',
  url: 'https://www.googleapis.com/youtube/v3/playlistItems', // リクエストURL
  dataType: 'json',
  data: {
    part: 'snippet', // partは必須で指定が必要とのこと。レスポンスで返してもらいたいデータをカンマ区切りで指定する。snippetがあればとりあえず動画を再生するレスポンスが受け取れる。
    playlistId: 'PLlVlyGVtvuVnAx-u38QOieyVIrMEmzuDx', // 再生リストID
    maxResults: 20, // デフォルトは5件までしか受け取らないので、取得件数を変更
    key: '{APIキー}'
  }
}).done(function(response) {
  // 成功
}).fail(function() {
  // エラー
});

これで入力項目が問題なければ、成功するので、
あとは、返ってきた response から動画を表示させれば良いです。

response.items.forEach(function(item) {
    var id = item.snippet.resourceId.videoId;
    $('#list').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+ id +'" frameborder="0" allowfullscreen></iframe>');
});