ajaxにてYouTube Data APIのSearch（検索）を使用し、特定の検索ワードで動画タイトル、サムネイル、URLを取得する。
準備
- https://console.cloud.google.com/apis/dashboardにアクセスし、プロジェクトを作成
- メニューから 「APIとサービス」 → 「認証情報」 をクリック
- ページ上部の 「認証情報を作成」 → 「APIキー」 をクリック
- キーが作成されるのでコピーしどこかに控えておく
- APIキーの設定を行う
参考：https://hi3103.net/notes/web/1271
jQuery + Ajax で YouTube Data APIを使用
Search（検索結果のコレクションを返す）
ajaxでリクエストを送信しデータを受け取る。
クエリパラメーターは公式ドキュメント参照。
参考：Search（公式）
const $button = $("#youtube > ul.btn_blk > li > button");
const $mov_blk = $("#youtube > ul.mov_blk");
const KEY = "XXXXXXXXXXXXXXXXX";
$button.on("click", function () {
let url = "https://www.googleapis.com/youtube/v3/search";
url += "?key=" + KEY;
url += "&part=snippet";
url += "&type=video";
url += "&q=%20筋トレ%20ジム" + $(this).data("parts");
url += "&maxResults=6";
$.ajax({
url: url,
type: "GET",
dataType: "jsonp",
})
.done(function (data) {
$mov_blk.empty();
for (let i = 0; i < data.items.length; i++) {
let html = `
<li>
<a href="https://www.youtube.com/watch?v=${data.items[i].id.videoId}" target="_blank">
<dl>
<dt>
<img src="${data.items[i].snippet.thumbnails.high.url}">
</dt>
<dd>${data.items[i].snippet.title}</dd>
</dl>
</a>
</li>
`;
$mov_blk.append(html);
}
})
.fail(function () {
$mov_blk.html('<li class="no_video">検索結果はありません</li>')
});
});
動画URLは下記URLの末尾に取得した videoIdを追加したもの。
https://www.youtube.com/watch?v=【取得したvideoId】
実装中に発生したエラー
Youtube APIの利用料金について
注意点
-
1日10000クォータまでデータ取得可能
クォータ：データ通信する際に必要なパケット料のようなもの
参考：クォータを確認する、クォータの使用料（公式） - 上限を超えてしまうとAPIを叩けなくなる
- 上限を超えた場合は追加申請が必要
参考：YouTube API サービス - 監査と割り当て増加フォーム