LoginSignup
1

posted at

updated at

YouTube Data APIの使い方

ajaxにてYouTube Data APIのSearch(検索)を使用し、特定の検索ワードで動画タイトル、サムネイル、URLを取得する。

準備

  1. https://console.cloud.google.com/apis/dashboardにアクセスし、プロジェクトを作成
  2. メニューから 「APIとサービス」「認証情報」 をクリック
  3. ページ上部の 「認証情報を作成」「APIキー」 をクリック
  4. キーが作成されるのでコピーしどこかに控えておく
  5. 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の利用料金について

注意点

参考記事

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1