YouTube Data API v3 を使って任意のプレイリストの動画情報をJSON形式で取得する jQuery + Ajax

WEB

概要

  • うちのサイトトップで出力しているYouTube動画埋め込みの出力に使っている仕組みの備忘録。
  • プレイリストの情報(入っている動画情報も含む)をJSON形式で取得するところまでをまとめた。
    • 応用としてチャンネル情報&検索結果も取得して遊んでみた。
  • 実際にiframe等HTMLで出力するにはJSONをパースして組み立てる必要あり。

初回準備

Google Developers Consoleの利用を開始

  1. Googleアカウントにログイン
  2. Google Developers Console を開く
  3. 利用条件等に同意

プロジェクトを作成

  • ダッシュボード画面に選択できるプロジェクトがないので[作成]をクリック

  • 任意のプロジェクトIDをつけるために[編集]をクリック

  • プロジェクト名・プロジェクトIDを入力して[作成]をクリック

  • 作成が完了すると通知に表示される

APIとサービスを有効化

  • ダッシュボードから[APIとサービスを有効化]をクリック

  • 検索窓から YouTube API を検索

  • 候補に表示された「YouTube Data API v3」をクリック

  • [有効にする]をクリック

  • 完了すると画面が切り替わる

APIキーを作成

  • サイドバーの「認証情報」を開き、[認証情報を作成]プルダウンをクリック

  • 選択肢から「APIキー」を選択

  • APIキーが作成されるので、詳細な設定をするために[キーを制限]をクリック

  • 名前を入力し、アプリケーションの制限、APIの制限を設定する

  • アプリケーションの制限:「HTTPリファラー(ウェブサイト)」を選択し、[項目を追加]から自サイトのドメインを入力

  • APIの制限:「キーを制限」を選択し、[Select APIs]プルダウンから「YouTube Data API v3」にチェックを入れ、[保存]をクリック

jQuery + Ajax で YouTube Data API を使用する

ベースになる書き方

1:出力先の要素 #hoge を用意
<pre id="hoge"></pre><!-- /#hoge -->
2:jQueryを読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
3:スクリプトを記述
<script>
$(function(){
	$.ajax({
		type: 'get',//リクエスト方法
		url: 'https://www.googleapis.com/youtube/v3/XXXXXXXX',//リクエストURL
		dataType: 'json',//取得するデータの形式
		data: {
			//リクエスト内容に応じたパラメータ
			hoge: 'piyo',
			//使用するAPIキー
			key: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
		}
	}).done(function() {
		// 成功時の動作を記述
		var jsonData = JSON.stringify(response, null , "\t");
		$('#hoge').text(jsonData);
	}).fail(function() {
		// 失敗時の動作を記述
		$('#hoge').text('失敗しました');
	});
});
</script>

プレイリストの動画情報を取得する

公式リファレンス

PlaylistItems: list | YouTube Data API (v3) | Google Developers

サンプル

https://hi3103.net/study/1906-ytapi/playlistitems.html

使用するHTTPリクエスト
GET https://www.googleapis.com/youtube/v3/playlistItems
ソース(一部)
$.ajax({
	type: 'get',//リクエスト方法
	url: 'https://www.googleapis.com/youtube/v3/playlistItems',//リクエストURL
	dataType: 'json',//取得するデータの形式
	data: {
		//取得したい情報をセット(必須)※複数の場合はカンマ区切り
		part: 'id,snippet,contentDetails,status',
		//プレイリストIDをセット
		playlistId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
		//最大取得件数をセット(デフォルト値は5)
		maxResults: 3,
		//使用するAPIキー
		key: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
	}
})以下略
プレイリストIDの調べ方

プレイリストページを開き、URLに含まれているlistパラメータの文字列を控える。

https://www.youtube.com/watch?v=【動画ID】&list=【プレイリストID】

YouTubeプレイリストIDの確認方法

応用編

チャンネル情報を取得する

公式リファレンス

Channels: list | YouTube Data API (v3) | Google Developers

サンプル

https://hi3103.net/study/1906-ytapi/channels.html

使用するHTTPリクエスト
GET https://www.googleapis.com/youtube/v3/channels
ソース(一部)
$.ajax({
	type: 'get',//リクエスト方法
	url: 'https://www.googleapis.com/youtube/v3/channels',//リクエストURL
	dataType: 'json',//取得するデータの形式
	data: {//リクエスト内容に応じたパラメータ
		//取得したい情報をセット(必須)※複数の場合はカンマ区切り
		part: 'id,snippet,brandingSettings,contentDetails,invideoPromotion,statistics,topicDetails',
		//チャンネルIDをセット※複数の場合はカンマ区切り
		id: 'XXXXXXXXXXXXXXXXXXXXXXXX,XXXXXXXXXXXXXXXXXXXXXXXX',
		//使用するAPIキー
		key: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
	}
})以下略

検索結果を取得する

公式リファレンス

Search: list | YouTube Data API (v3) | Google Developers

サンプル

https://hi3103.net/study/1906-ytapi/search.html

使用するHTTPリクエスト
GET https://www.googleapis.com/youtube/v3/search
ソース(一部)
  • 色々パラメータを指定して絞り込みができるが、ベースになりそうなものだけピックアップ。
  • 例として、Ed Sheeranのチャンネル内で「live」を検索してヒットした動画を3件返す、という設定。
$.ajax({
	type: 'get',//リクエスト方法
	url: 'https://www.googleapis.com/youtube/v3/search',//リクエストURL
	dataType: 'json',//取得するデータの形式
	data: {
		//取得したい情報をセット(必須)※複数の場合はカンマ区切り
		part: 'id,snippet',
		//特定のチャンネルの中でのみ検索する場合は、チャンネルIDをセット
		channelId: 'UC0C-w0YjGpqDXGB8IHb662A',
		//最大取得件数をセット(デフォルト値は5)
		maxResults: 3,
		//リソースの並べ方
		// [date] 作成日/新しい順
		// [rating] 評価の高い順
		// [relevance] 関連性が高い順(デフォルト)
		// [title] タイトルABC順
		// [videoCount] アップロード動画の番号順(降順)
		// [viewCount] 再生回数の多い順
		order: 'date',
		// 検索クエリをセット
		q: 'live',
		//特定のタイプのリソースのみに制限(channel,playlist,videoから選ぶ/デフォルトは全部)
		type: 'video',
		//使用するAPIキー
		key: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
	}
})以下略

参考リファレンス