目次
Youtube API v3を使用してjsonデータを取得する
今回はYoutube検索APIで一般的なsearchを使用します。パラメータを指定してGETでjsonが返ってくるシンプルなAPIです。
以下はサンプルです。
function ytData() {
return$.ajax({
type: 'GET',
url: '<https://www.googleapis.com/youtube/v3/search>',
data: {
//取得したい情報をセット
part: 'snippet',
//チャンネルIDをセット※複数の場合はカンマ区切り
channelId: 'チャンネルID',
//ライブ配信が終了した動画だけにする場合
eventType: 'completed',
//取得件数
maxResults: '3',
//使用するAPIキー
key: 'xxxxxAPIKEYxxxxx',
//配列の順番
order: 'date',
//検索クエリの対象
type: 'video',
},
//取得するデータの形式
dataType: 'json',
});
};
APIパラメータ
リファレンス
https://developers.google.com/youtube/v3/docs/search/list?hl=jaよく使うパラメータ
[channelId]
自分のチャンネルであれば管理画面から確認できますが、自分以外のチャンネルは以下の便利リンクから取得できます。感謝！
https://ilr.jp/tech/485/
[eventType]
ライブ配信動画に限定する場合に使用します。
動画全体を検索する場合は削除してください。
[maxResults]
検索数。最大50件で、指定なしの場合（デフォルト）は5件。
[API key]
Google Cloud Platformのコンソールから取得してください。
https://console.cloud.google.com/
取得方法の詳しい説明はQiitaの**@shinkai_さんの記事**を参考にしてください。感謝！
https://qiita.com/shinkai_/items/10a400c25de270cb02e4
jsonの取得ができたら要素に配置
ytData().done(function (data) {
$('.yt__title').each(function (i, elem) {
let ytTitle = data.items[i].snippet.title;
$(elem).text(ytTitle);
})
$('.yt__movie').each(function (i, element) {
let ytID = '<https://www.youtube.com/watch?v=>' + data.items[i].id.videoId;
$(elem).attr('href', ytID);
})
$('.yt__img img').each(function (i, elem) {
let ytThumb = data.items[i].snippet.thumbnails.high.url;
$(elem).attr('src', ytThumb);
})
});
他にも取得できる内容は再生数やいいね数など、さまざまな値を取得することができます。
セレクタにはjQueryを使用しているので、コピペして使う際はjQueryもインポートしてください。
それでは今年も一年よろしくお願いします！
