Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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を使って動画情報を取得してみた。

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

norizou4
WebデザイナーがC#とswiftからプログラミングを学んでいきます。
http://noriyasu-katano.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away