12
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

YouTube DATA APIを利用し、再生リスト内の動画のタグ情報を取得する。

Last updated at Posted at 2018-01-19

YouTube DATA APIを利用すると、YouTube上の様々な情報を操作できます。
https://developers.google.com/youtube/v3/docs/

少しニッチな使い方ですが、再生リスト内の動画のタグ情報を取得しようとしたときのメモです。

動画からタグ情報を取得する。

まずは、通常の動画のタグ情報の取得方法。

YouTube DATA APIのVideosを利用することで、動画に登録されているタグ情報を取得することができます。
https://developers.google.com/youtube/v3/docs/videos/list

JavaScript
$.ajax({
  url: 'https://www.googleapis.com/youtube/v3/videos', // YouTube DATA API: videos
  dataType: 'json',
  data: {
    part: 'snippet',
    id: '8OROgK7r7MU', // タグを取得したいYouTubeのvideoId
    maxResults: 50,
    key: 'xxx' // APIキー
  }
})
.done(function(vidoeRes) {
  console.log(vidoeRes.items[0].snippet.tags); // タグを取得
});

videoIdは、動画URLのv=8OROgK7r7MU部分です。
https://www.youtube.com/watch?v=8OROgK7r7MU

また、APIキーは、事前に取得しておきましょう。
https://developers.google.com/youtube/registering_an_application

再生リストの各動画のタグ情報を習得する。

続いて、本題。

YouTube DATA APIのplaylistItemsを利用すると、再生リストに登録されている各動画の情報を取得することができます。
https://developers.google.com/youtube/v3/docs/playlistItems/list

しかし、playlistItemsで取得した動画の情報には、タグの情報がありません。
そこで、playlistItemsで取得したvideoIdをもとに、videosでもう一度動画情報を取得し、再生リストの各動画のタグ情報を取得します。

JavaScript
let videoIdArray = [];
let _tagsArray = [];
let tagsArray = [];

// PlaylistItems APIで各動画の情報を取得
$.ajax({ 
  url: 'https://www.googleapis.com/youtube/v3/playlistItems', // YouTube DATA API: PlaylistItems
  dataType: 'json',
  data: {
    part: 'snippet',
    playlistId: 'PLC9941FF2E16B9532', // Youtube 再生リストID
    maxResults: 50,
    key: 'xxx'
  }
})
.done(function (playlistItemRes) {
  const videos = playlistItemRes.items;
  
  for (let i = 0; i < videos.length; i++) {
    let _videoId = videos[i].snippet.resourceId.videoId;
    videoIdArray.push(_videoId); // videoIdのみ抽出し、配列位に格納
  }

  for (let i = 0; i < videoIdArray.length; i++) {
    let videoId = videoIdArray[i];

    // videos API で各動画の情報を再度取得
    _tagsArrey.push($.ajax({
      url: 'https://www.googleapis.com/youtube/v3/videos', // YouTube DATA API: videos
      dataType: 'json',
      data: {
        part: 'snippet',
        id: videoId,
        maxResults: 50,
        key: 'xxx'
      }
    }));
  }
  $.when.apply($, _tagsArray).done(function (){ // 再生リストの順番を保証
    for (let i = 0; i < arguments.length; i++) {
      tagsArray.push(arguments[i][0].items["0"].snippet.tags);
    }
    
    console.log(tagsArray); // タグの情報が配列に格納されています。
  });
});

再生リストの順番の保証は、こちらを参考にさせていただきました。
結果の順番を保証して、且つ『並列』でAjax通信を行う方法

12
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?