NEW ARTICLE
gulp+webpack+jQuery+pug+sassで開発環境構築
  • YouTube Data APIでリアルタイムに動画一覧を表示

YouTube Data APIでリアルタイムに動画一覧を表示

YouTube Data APIでリアルタイムに動画一覧を表示

久々のブログ更新となりました。。。
コンスタントに書きたいけど、どうしても後回しになってしまいますね。

今回は、YouTube Data APIについてちょっと触ったので、備忘録を兼ねてまとめていこうと思います。
2019/10/05現在で最新の「YouTube Data API v3」を使います。

公式のリファレンスはこちら

目次

まずはAPIを取得して下準備

まずはGoogle Developer ConsoleでAPIを登録しキーを取得していきます。

こちらの記事を参考にさせていただきました。

  1. プロジェクト作成
  2. 左側メニューより「ライブラリ」
  3. 検索窓から「YouTube Data API v3」を検索し、クリック
  4. 「有効にする」をクリック
  5. 「認証情報を作成」⇒「APIキー」をクリック
  6. APIキーが出てきます。

出てきたAPIキーはコピーしておきましょう。
これで下準備はOKです。

ユーザーからアップロードした動画一覧を取得

アップロードした動画一覧を取得したい場合、ちょっと面倒ですが、2段階必要となります。

ユーザーIDの取得

まずは、YouTubeのユーザーページをブラウザで見つけてユーザー名を探します。

今回は、Google Japanを例として扱います。

以下ページがGoogle Japanのユーザーページです。

https://www.youtube.com/user/googlejapan

ここのgooglejapanがユーザー名となります。

APIにアクセスしてアップロードした動画一覧のプレイリストIDを取得

アップロードした動画一覧のプレイリストIDが必要ですので、まずはそれを取得します。
以下がアクセスするURLとなります。

https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername={ユーザーID}&key={APIキー}

ここのユーザーIDとAPIキーを書き換えてアクセスします。
とりあえず説明用にAPIキーは「xxx」とします。

https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=googlejapan&key=xxx

すると以下のデータがレスポンスされます。

{
  kind: "youtube#channelListResponse",
    etag: "p4VTdlkQv3HQeTEaXgvLePAydmU/VG4-qj0TEaOqhyN9rzos1ARwLfc",
      pageInfo: {
    totalResults: 1,
      resultsPerPage: 5
  },
  items: [
    {
      kind: "youtube#channel",
      etag: "p4VTdlkQv3HQeTEaXgvLePAydmU/qMTU7TUqEmJAH6NVHxTVB_DqPKA",
    id: "UCTnRxVUPssiL7H29ON07t_Q",
    contentDetails: {
      relatedPlaylists: {
        uploads: "UUTnRxVUPssiL7H29ON07t_Q",
        watchHistory: "HL",
        watchLater: "WL"
      }
    }
    }
  ]
}

ここのitems⇒contentDetails⇒relatedPlaylists⇒uploadsの値がアップロードした動画一覧のプレイリストIDとなります。

今回の場合は、UUTnRxVUPssiL7H29ON07t_Qが該当します。
この値を使います。

動画一覧の情報を取得

いよいよ動画一覧の情報を取得します！

以下のURLが動画一覧を取得するためのURLとなります。

https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId={プレイリストID}&maxResults={件数（～50）}&key={APIキー}
  • プレイリストIDには、先ほど取得したUUTnRxVUPssiL7H29ON07t_Q
  • 件数はとりあえず3件としておきます。
  • APIキーには取得したAPIキー（仮でxxxとします。）
https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=UUTnRxVUPssiL7H29ON07t_Q&maxResults=3&key=xxx

アクセスすると以下のデータがレスポンスされます。

{
  kind: "youtube#playlistItemListResponse",
    etag: "p4VTdlkQv3HQeTEaXgvLePAydmU/Mf57YJDcvQGKekSUxBYXyp3C_o4",
      nextPageToken: "CAMQAA",
        pageInfo: {
    totalResults: 901,
      resultsPerPage: 3
  },
  items: [
    {
      kind: "youtube#playlistItem",
      etag: "p4VTdlkQv3HQeTEaXgvLePAydmU/ 31CJ0CAgWgIPI - 5uA5bdfqy7Ock",
    id: "VVVUblJ4VlVQc3NpTDdIMjlPTjA3dF9RLk9MdjlXQkVBM0VV",
    snippet: {
      publishedAt: "2019-09-30T04:03:27.000Z",
      channelId: "UCTnRxVUPssiL7H29ON07t_Q",
      title: "沖縄観光業にデジタルトレーニングを",
      description: "訪れる観光客数の伸びが著しい沖縄県。観光業のデジタル化を促進する狙いとは。",
      thumbnails: {
        default: {
          url: "https://i.ytimg.com/vi/OLv9WBEA3EU/default.jpg",
          width: 120,
          height: 90
        },
        medium: {
          url: "https://i.ytimg.com/vi/OLv9WBEA3EU/mqdefault.jpg",
          width: 320,
          height: 180
        },
        high: {
          url: "https://i.ytimg.com/vi/OLv9WBEA3EU/hqdefault.jpg",
          width: 480,
          height: 360
        },
        standard: {
          url: "https://i.ytimg.com/vi/OLv9WBEA3EU/sddefault.jpg",
          width: 640,
          height: 480
        }
      },
      channelTitle: "Google Japan",
      playlistId: "UUTnRxVUPssiL7H29ON07t_Q",
      position: 0,
      resourceId: {
        kind: "youtube#video",
        videoId: "OLv9WBEA3EU"
      }
    }
    },
{
  kind: "youtube#playlistItem",
    etag: "p4VTdlkQv3HQeTEaXgvLePAydmU / ecyoeo9iwSqtVHEPRRboqWHDXIs",
      id: "VVVUblJ4VlVQc3NpTDdIMjlPTjA3dF9RLkJRVWxVamdEYjdF",
        snippet: {
    publishedAt: "2019-10-01T02:56:35.000Z",
      channelId: "UCTnRxVUPssiL7H29ON07t_Q",
        title: "Google アシスタント｜「おやすみ〜」 篇",
          description: "いろんな機能を、ひと言で。 Google アシスタント。 いつも寝る前の支度がたくさんあって大変。 そんな時も、お任せください。 「ルーティン」に登録すれば、 例えば「OK Google, おやすみ」のひと言で、様々な操作が完了します。 自宅でも、外出先でも、どんな場面でも。 Google アシスタントの「ルーティン」なら、 いろんな機能を、ひと言で。 「ルーティン」の設定方法： https://support.google.com/assistant/answer/7672035?co=GENIE.Platform%3DAndroid&hl=ja 注意事項： ・「OK Google」と話しかけるだけで、ハンズフリーに Google アシスタント を起動するには、事前にこちらの設定をお済ませください：https://support.google.com/assistant/answer/7394306?hl=ja&co=GENIE.Platform=Android ・ドライブ中に Google アシスタント を声で操作する際は、十分運転に注意してください。 Google アシスタントの使い方： Android のスマートフォン* でホームボタンを長押しすれば、Google アシスタント が起動します。 実は、あなたの Android にも、Google アシスタントは入っています。ホームボタンを長押し、または「 OK Google 」と話しかけるだけで、起動。 Google アシスタントの詳細はこちら：https://assistant.google.com/intl/ja_jp/ *Google アシスタントを使用するには、以下を搭載したスマートフォンまたはタブレットが必要です。 ・Android 5.0 以降 ・Google アプリ 6.13 以降 ・Google Play 開発者サービス ・1.4 GB のメモリと 720p の画面解像度 ・端末の言語が上記の言語に設定されていること iPhone をお持ちの方は、Google アシスタント アプリをダウンロードしてください。 [ Google アシスタント アプリをダウンロード ] https://itunes.apple.com/jp/app/google-%E3%82%A2%E3%82%B7%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%88/id1220976145?mt=8 *iOS 10.0以降。iPhone、iPadに対応。",
            thumbnails: {
default: {
        url: "https://i.ytimg.com/vi/BQUlUjgDb7E/default.jpg",
          width: 120,
            height: 90
      },
      medium: {
        url: "https://i.ytimg.com/vi/BQUlUjgDb7E/mqdefault.jpg",
          width: 320,
            height: 180
      },
      high: {
        url: "https://i.ytimg.com/vi/BQUlUjgDb7E/hqdefault.jpg",
          width: 480,
            height: 360
      },
      standard: {
        url: "https://i.ytimg.com/vi/BQUlUjgDb7E/sddefault.jpg",
          width: 640,
            height: 480
      },
      maxres: {
        url: "https://i.ytimg.com/vi/BQUlUjgDb7E/maxresdefault.jpg",
          width: 1280,
            height: 720
      }
    },
    channelTitle: "Google Japan",
      playlistId: "UUTnRxVUPssiL7H29ON07t_Q",
        position: 1,
          resourceId: {
      kind: "youtube#video",
        videoId: "BQUlUjgDb7E"
    }
  }
},
{
  kind: "youtube#playlistItem",
    etag: "p4VTdlkQv3HQeTEaXgvLePAydmU / 0GqoF1tRL1i4pgmTgsUsZCH1Ix4",
      id: "VVVUblJ4VlVQc3NpTDdIMjlPTjA3dF9RLjBDcmxSc2xBMDBn",
        snippet: {
    publishedAt: "2019-10-01T02:56:04.000Z",
      channelId: "UCTnRxVUPssiL7H29ON07t_Q",
        title: "Google アシスタント｜「今日の天気教えて」 篇",
          description: "知りたいことを、ひと言で。 Google アシスタント。 どうも雲行きが怪しいな・・・。 そんな時も、お任せください。 あなたの問いかけに応じて、 最新の天気予報をお知らせします。 自宅でも、外出先でも、どんな場面でも。 Google アシスタントがあれば、 知りたいことを、ひと言で。 注意事項： ・「OK Google」と話しかけるだけで、ハンズフリーに Google アシスタント を起動するには、事前にこちらの設定をお済ませください：https://support.google.com/assistant/answer/7394306?hl=ja&co=GENIE.Platform=Android ・ドライブ中に Google アシスタント を声で操作する際は、十分運転に注意してください。 Google アシスタントの使い方： Android のスマートフォン* でホームボタンを長押しすれば、Google アシスタント が起動します。 実は、あなたの Android にも、Google アシスタントは入っています。ホームボタンを長押し、または「 OK Google 」と話しかけるだけで、起動。 Google アシスタントの詳細はこちら：https://assistant.google.com/intl/ja_jp/ *Google アシスタントを使用するには、以下を搭載したスマートフォンまたはタブレットが必要です。 ・Android 5.0 以降 ・Google アプリ 6.13 以降 ・Google Play 開発者サービス ・1.4 GB のメモリと 720p の画面解像度 ・端末の言語が上記の言語に設定されていること iPhone をお持ちの方は、Google アシスタント アプリをダウンロードしてください。 [ Google アシスタント アプリをダウンロード ] https://itunes.apple.com/jp/app/google-%E3%82%A2%E3%82%B7%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%88/id1220976145?mt=8 *iOS 10.0以降。iPhone、iPadに対応。",
            thumbnails: {
default: {
        url: "https://i.ytimg.com/vi/0CrlRslA00g/default.jpg",
          width: 120,
            height: 90
      },
      medium: {
        url: "https://i.ytimg.com/vi/0CrlRslA00g/mqdefault.jpg",
          width: 320,
            height: 180
      },
      high: {
        url: "https://i.ytimg.com/vi/0CrlRslA00g/hqdefault.jpg",
          width: 480,
            height: 360
      },
      standard: {
        url: "https://i.ytimg.com/vi/0CrlRslA00g/sddefault.jpg",
          width: 640,
            height: 480
      },
      maxres: {
        url: "https://i.ytimg.com/vi/0CrlRslA00g/maxresdefault.jpg",
          width: 1280,
            height: 720
      }
    },
    channelTitle: "Google Japan",
      playlistId: "UUTnRxVUPssiL7H29ON07t_Q",
        position: 2,
          resourceId: {
      kind: "youtube#video",
        videoId: "0CrlRslA00g"
    }
  }
}
  ]
}

ここのItemsの中身がアップロードした動画一覧の情報となります！

AjaxでアクセスしてHTMLに反映させる

Webページ上に取得した情報を反映させるには、Ajaxなどでアクセスしてeachを使ってループさせて表示します。

ul.yt__listsというリストの中にli.yt__listを入れ込んで書き込む例を以下に書いておきます。

  var ytApiKey = "APIキー";
  var ytPlayListId = "プレイリストID";
  var num = "動画の取得数";
  $.ajax({
    url: "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=" + ytPlayListId + "&maxResults=" + num + "&key=" + ytApiKey,
    type: "GET",
    dataType: "json",
    timespan: 1000
  }).done(function (data1, textStatus, jqXHR) {
    var items = data1.items;
    $.each(items, function (i, item) {
      var snippet = item.snippet;
      var title = snippet.title;
      var videoId = snippet.resourceId.videoId;
      var thumbUrl = snippet.thumbnails.medium.url;
      var link = "https://www.youtube.com/watch?v=" + videoId;
      $('ul.yt__lists').append(
        '<li class="yt__list">' +
        '<a href=' + link + ' target="_blank">' +
        '<img src="' + thumbUrl + '" alt="' + title + '">' +
        '<span>' + title + '</span>' +
        '</a>' +
        '</li>'
      )
    })
  }).fail(function (jqXHR, textStatus, errorThrown) {
    // エラー処理
  }).always(function () {
    // 常に行う処理
  });

以上です！これでもうYouTube Data APIも怖くない！笑

まとめ

いかがでしたでしょうか。
YouTubeで動画一覧を取得するケースも稀かと思いますが、あるかと思います。
そういった場合、参考にしてみてください。

リストを取得⇒モーダルを用意⇒リストクリックでモーダル内YouTubeをiframe起動
みたいなこともできると思います。

ポートフォリオ・お問合せはこちら

ポートフォリオサイト
お問合せはこちら