YoutubeAPIでチャンネルの最新動画をWEBサイトに表示させる方法

「任意のYoutubeチャンネルの最新動画を取得し、WEBサイトに表示させる」方法をご紹介します。

この方法を使えば、Youtubeに新しい動画が投稿されると自動的にWEBサイトにも最新動画が表示されます。
表示する動画の数は自由に設定できます。最新の1つだけでもいいし、最新の5つという設定も可能です。

使用するサービスと技術は以下のものとなっています。
(コピペでも使えるように解説していきます。)

大まかな手順をは以下の通りです。

1.Youtube Data APIキーを取得
2.APIキーでjsonデータを取得
3.jsonからajax通信で動画IDを取得して表示

Youtube Data APIキーを取得

まず必要になるのがYoutube Data APIキーです。
APIキーを取得するにはGoogleアカウントが必要です。

APIキーの発行はアプリケーション(今回はYoutube)のデータを利用する許可を得るようなものです。

Googleにログインした状態で次の手順で取得してください。

Step1.Google Cloud PlatformのAPIとサービスにアクセスします。

Step2.認証情報 > 認証情報を作成 > APIキーを作成を選択します。
この時点でAPIキーが生成されます。

Step3.APIキーの詳細画面でAPIキーの制限から「YouTube Data API v3」を選択します。
この時、選択肢にYouTube Data API v3が無い場合、APIライブラリからYouTube Data API v3を有効化すると選択肢に表示されます。

APIライブラリでYouTube Data API v3を有効化する場合は以下の画面です。

Step4.最終的に次の状態になればAPIキーの生成が完了です。

APIキーでjsonデータを取得

取得したAPIキーを使って任意のチャンネルのデータをjson形式で取得します。これにはAPIキーの他にチャンネルIDが必要になります。

YoutubeのチャンネルIDは、そのチャンネルのトップページのURLに書いてあります。

そして、APIキーとチャンネルIDを以下のURLに入力してブラウザからアクセスしてみてください。
(チャンネルIDは{Channel ID}へ、APIキーは{API Key}へ入れます。URLに{}は不要です)

https://www.googleapis.com/youtube/v3/search?part=snippet&channelId={Channel ID}&maxResults=5&order=date&type=video&key={API Key}

次のような画面が表示されればjsonデータを取得できています。

※URLの「&maxResults=5」が最新から5つ取得するということなので、数を変えたい場合はこの数字を変更します。

取得したjsonからajax通信で動画IDを取得してhtml表示させる

ajaxを使って先ほどのjsonデータをWEBサイトに取得します。
(ajaxを使うにはjQueryが必要なので読み込ませてください。)

次のコードをご覧ください。

<div id="youtubeList"></div>

<script>
$.ajax({
  type: 'GET',
  url: 'https://www.googleapis.com/youtube/v3/search?part=snippet&channelId={Channel ID}&maxResults=5&order=date&type=video&key={API Key}',
  datatype: 'json',
  success: function(json){
    num = json.items.length;
    for(var i = 0; i < num ; i++){
        var ID = json.items[i].id.videoId;
        $("#youtubeList").append('<iframe width="560" height="315" src="https://www.youtube.com/embed/' + ID + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
    }
  },
  error: function(){
    alert('error');
  }
});
</script>

このコードでは、先ほどのjsonから動画のIDを取得してiframeのURLに代入することで動画を表示させています。

<div id=”youtubeList”></div>の中にiframe埋め込みが5回繰り返される設定ですね。

コピペでも使えるので、CSSでスタイルの調整をしてください。

このコードでは次のように表示されます。

応用の仕方、jsonから取得できるデータの種類

今回のコードではjsonデータから動画のIDを取得しましたが、他にも色々なデータが取得できます。

チャンネルIDとAPIキーを入れたURLにブラウザでアクセスしたときのデータをよく見ると色々な項目があります。

これらも同じように取得してWEBサイトに表示することができます。

ぜひ活用してみてください。