YoutubeDataAPIでアプリを作る

カテゴリー

JavaScript

works

YoutubeDataAPIでアプリを作る

00:17・2021/08/12　公開

00:17・2021/08/12　更新

Webアプリ制作の授業でYoutubeDataAPIを用いてアプリを制作しました。

アプリ概要

登録チャンネルの新しい動画を3件表示する
前回youtube.comでフィードを確認してから、新しい動画が追加された場合に登録チャンネルのアイコンを赤く縁取る
取得した動画の概要欄からコラボチャンネルの概要を取得し、表示する。

ユーザーの登録チャンネルを取得するために、OAuth2認証を利用しています。

製作過程

制作日数

三週間くらい

過程

OAuth認証をする。
Youtubeにリクエストを送る

OAuth認証

JavaScript コードサンプル -Google.com
※jQueryのロードが必要です。

色々調べ回った挙げ句コピペで使えました。

Youtubeにリクエスト

API Reference – Google.com

ひたすらこのページ内を行き来していました。

コード（抜粋）

function handleAPILoaded() {
//この中にリクエストを書く
    user_data();
  }

//登録チャンネルのデータを15ことってくるコード
function user_data() {
  let require = gapi.client.youtube.subscriptions.list({
    mine: true,
    fields: 'items(subscriberSnippet(channelId,title,thumbnails(default(url))),snippet(resourceId(channelId),title,thumbnails(default(url)),description),contentDetails(newItemCount))',
    part: ['snippet', 'contentDetails', 'subscriberSnippet'],
    maxResults: 15,
    order: 'unread',
  });

  require.execute(function (response) {
    let ch_list = response.result.items;
    _userProfile =
    {
      id: ch_list[0].subscriberSnippet.channelId,
      name: ch_list[0].subscriberSnippet.title,
      icon: ch_list[0].subscriberSnippet.thumbnails.default.url,
      subscriptions: ch_list[0].snippet.resourceId.channelId,
    };
    localStorage.setItem('userProfile', encode(_userProfile));
    channelIds(ch_list);//登録チャンネルのデータを次の関数に流す
  });
}

※取得したデータを関数の外に出すことができなくて時間を食いました。
結局、関数内で関数に引数を渡す形で解決しています。

※検索を使うとすぐに割当上限に達してしまうので、他のエンドポイントが使えないか見たほうがいいです。
YouTube Data API (v3) – Quota Calculator – Google.com