10:54・2021/12/07
カテゴリー
JavaScript worksYoutubeDataAPIでアプリを作る
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
完成したもの
MyYouTube – osora.work
※今回はスマホアプリを作る課題だったため、PC用の表示は実装していません。
※SafariとiOSでは動きません。(結局スマホで使えなかった)
androidのchromeでは動くそうです。
OAuth認証はしているものの、登録チャンネルの取得のみ行います。
アカウントを切り替える際はCookieを削除し、ページ下部の「データを更新する」ボタンを押して下さい。
index.php
仕様
- 登録チャンネルを最大15件取得
- チャンネルの新着動画3件を表示
- new_videoCountが1以上のチャンネルは赤い枠を表示
- アイコンを押すとスクロール
- 表示非表示切り替え
single.php
仕様
- 動画概要とコラボチャンネルを取得(コラボチャンネルは動画概要のURLで判別しているため、正しくないことがあります)
- コラボチャンネルのチャンネル概要と新着3件を表示
作ったものの結局youtube.comの方が早いので、気が向いたら改良します(まずはスマホ導入から)。