Youtube APIを使って、気になるチャンネルから最新動画を取得するJSを作ってみた。

youtubeでお気に入りのチャンネルから最新情報を引っ張ってくるJSを作成してみました。
youtubeからデータを引っ張ってくるのは比較的楽ですが、一番厄介なんのはそのチャンネルの情報までのURLを作ることが厄介かもしれません。

先ずは全体図

jQueryのajaxでいつものように引っ張って来て、あとは、動画のIDとタイトルを抜き出し、埋め込み用のHTMLに入れるだけです。

youtube.js

//************ Get Youtube latest movie **********/
    function ajaxDataYoutube(){
      return $.ajax({
                type: 'GET',
                url: 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=[表示件数]&playlistId=[チャンネルID]&key=[アクセスKey]',
                dataType: 'json',
                error: function() {
                    //error func
                    $('#yt-list').append('<li>Youtubeのデータが取得できませんでした。<\/li>');
                }
        })
    }
      ajaxDataYoutube().done(function(jsondataYt){
        var ytID = jsondataYt.items[0].snippet.resourceId.videoId
        var ytTitle = jsondataYt.items[0].snippet.title
        var YtHtml = '<iframe width="369" height="207" src="https://www.youtube.com/embed/'+ ytID +'?controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen><\/iframe><h4>'+ ytTitle +'<\/h4>'
        $('#yt-list').append(YtHtml);
      });

アクセスのためのURL

冒頭で話した厄介な点がこちらのURLを作成する部分です。
何が厄介かというと、チャンネルIDを取得するのと、自分のアクセスキーを作るところだと思います。

youtube.js

'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=[表示件数]&playlistId=[チャンネルID]&key=[アクセスKey]

URLを解説していきます。

チャンネルを引っ張ってくる

先ずは、無難にチャンネルを引っ張ってくる先の指定です。

youtube.js

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

これで、PlayListItemsで指定することができます。

詳しくはこちら

YouTube:YouTube Data API (v3):
PlaylistItems

Part=snippet と maxResults

Partは引っ張ってくるチャンネルのプロパティを設定している部分だと認識してもらえれば良いと思います。詳しくはこちらになります。
maxResultsは取得する数を示します。

playlistId

こちらで引っ張ってくるチャンネルを指定します。
チャンネルIDは以下のように引っ張ってきたいチャンネルのURLから確認することができます。

https://www.youtube.com/channel/[チャンネルID]

アクセスキー

APIへのアクセスキーは自分でgoogleアカウントに登録し、さらにgoogleのAPIを設定する画面からyoutubeのAPIを取得することができます。

YouTube APIとは：Data API v3を使って動画情報を取得してみた。

これで、欲しいチャンネルから最新の動画を取得して表示させることができます。