はじめに
YouTube Data API を使って、YouTubeチャンネルにアップロードされた動画を埋め込みHTML形式で取得してみました。
JavaScriptのYoutube用ライブラリもいくつかあるみたいですが、
今回はURLを直打ちする形で実装しました。
GET URLやJSONの仕様は下記を参照しました。
https://developers.google.com/youtube/v3/docs
環境は下記になります。
macOS Catalina 10.15.6
Node.js v14.8.0
(Node.js Library)request 6.14.7
コードと実行結果
コードは下記になります。
youtube.js
constrequest=require('request');constURL_YOUTUBE_API='https://www.googleapis.com/youtube/v3/';constYOUTUBE_APP_KEY=process.env.YOTUBE_APP_KEY;constMY_YOUTUBE_CHANNEL_ID=process.env.YOUTUBE_CHANNEL_ID;constURL_YOUTUBE_CHANNELS=URL_YOUTUBE_API+'channels?key='+YOUTUBE_APP_KEY+'&part=snippet,statistics,contentDetails&id='+MY_YOUTUBE_CHANNEL_ID;constURL_YOUTUBE_PLAYLISTITEMS=URL_YOUTUBE_API+'playlistItems?key='+YOUTUBE_APP_KEY+'&part=snippet,contentDetails&playlistId=';constURL_YOUTUBE_VIDEOS=URL_YOUTUBE_API+'videos?key='+YOUTUBE_APP_KEY+'&part=player&id=';varget_yotube_options_base={url:'',method:'GET',json:true};varhtml_data=[];varget_youtube_options_1=get_yotube_options_base;get_youtube_options_1.url=URL_YOUTUBE_CHANNELS;request(get_youtube_options_1,function(error,response,ch_info){varplaylistId=ch_info.items[0].contentDetails.relatedPlaylists.uploads;varget_youtube_options_2=get_yotube_options_base;get_youtube_options_2.url=URL_YOUTUBE_PLAYLISTITEMS+playlistId;request(get_youtube_options_2,function(error,response,playlist_info){varvideoId_list=[];playlist_info.items.forEach(item=>{videoId_list.push(item.snippet.resourceId.videoId);});varget_youtube_options_3=get_yotube_options_base;get_youtube_options_3.url=URL_YOUTUBE_VIDEOS+videoId_list.join(',');request(get_youtube_options_3,function(error,response,video_info){video_info.items.forEach(item=>{html_data.push(item.player.embedHtml);});console.log(html_data);});});});実行結果は下記になります。
「XXXXXXXXXXXXX」の部分は自分の情報に書き換えてください。
% export YOTUBE_APP_KEY=XXXXXXXXXXXXX
% export YOUTUBE_CHANNEL_ID=XXXXXXXXXXXXX
% node youtube.js
[
'<iframe width="480" height="270" src="//www.youtube.com/embed/uRML4cHJKsE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
'<iframe width="480" height="270" src="//www.youtube.com/embed/BuHrzydYE2s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
]
コードの説明
YouTubeに対して3回HTTPリクエストをする形になってます。
(1回目) チャンネルIDから再生リストIDを取得 => URL:「URL_YOUTUBE_CHANNELS」
(2回目) 再生リストIDから動画IDを取得 => URL:「URL_YOUTUBE_PLAYLISTITEMS」
(3回目) 動画IDから埋め込みHTMLを取得 => URL:「URL_YOUTUBE_VIDEOS」
事前準備が必要です。
・App Keyについては、
「Google APIs Console」というサイトで発行しておきます。
・YouTube Channel IDはIDを取得したいチャンネルのページに行って、ソースを表示=>「CHANNEL_ID」で文字列検索すると出て来ます。
下記の画像で言うと「UCD0it6kq_2HBn3uMACiX_3A」の部分です。
以上です。