© 2025 JWS

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

  • JavaScript

目次

  1. まずは API を取得して下準備
  2. ユーザーからアップロードした動画一覧を取得
    1. ユーザー ID の取得
    2. APIにアクセスしてアップロードした動画一覧のプレイリストIDを取得
    3. 動画一覧の情報を取得
  3. Ajax でアクセスして HTML に反映させる
    1. まとめ

久々のブログ更新となりました。。。

コンスタントに書きたいけど、どうしても後回しになってしまいますね。

今回は、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起動

みたいなこともできると思います。

Share

Blogs