Webデザイン学科
授業資料

概要解説

YouTube API を利用して、動画閲覧アプリを作成するための API の操作方法を解説します。

事前技術

• YouTube API
• JavaScript オブジェクトの操作
• 非同期通信
• tridentwebdesign/youtube ｜ GitHub

YouTube Data API

YouTube Data API とは、動画やチャンネル、再生リストに関わる情報を取得して、自分の Web サイトやアプリケーションで使用することができます。 IFrame Player API と同じようにサンプルを参考に、使ってみましょう。
YouTube Data API の利用には、API Key が必要になりますので、登録します。

• YouTube Data API の概要 | Google Developers

API の登録と KEY の取得

検索結果の取得

この YouTube Data API を利用して検索してみましょう。https://www.googleapis.com/youtube/v3/searchの後に、?を加えて、パラメータを追加していきます。
今回は、

• type（種類）
• part（レスポンス形式）
• q（検索ワード）
• maxResults（表示数）
• key（API キー）

を追加します。
種類は「video」、レスポンス形式は「snippet」、検索ワードは「HIKAKIN」、表示数は「10」にしておきます。

https://www.googleapis.com/youtube/v3/search?type=video&part=snippet&q=HIKAKIN&maxResults=10&key=取得したAPI_KEY

上記の URL を直接ブラウザのアドレスバーにコピペし、「取得した API KEY」を自分のものに書き換えてください。
JSON でヒカキンの YouTube 動画情報が json 形式で表示されれば成功です。
JSON の中に、“videoId”というプロパティ名がありますので、それをコピペしてhttps://www.youtube.com/watch?v=コピペしたvideoIdで動画が表示されるか、確認しましょう。

json とは

JSON(ジェイソン)とは、JavaScript Object Natation の略で、直訳すると JavaScript オブジェクト表記法となります。
書き方は、Object と似ています。

//objectの書き方{ プロパティキー : プロパティ値 }
{ name : "鈴木一郎" }
{ name : '鈴木一郎' }
{ '鈴木一郎' : 51 }

//jsonの書き方{ "キー" : "値" }
{ "名前" : "鈴木一郎" }

JSON は、“キー”がダブルクォーテーションで囲われている必要があります。
さらに”値”が文字列の場合は文字列にもダブルクォーテーションが必要です。シングルクォテーションではエラーになります。

値には数値型や boolean 型も利用できます。
その場合、ダブルクォーテーションを付けない。

//jsonの書き方{ "キー" : "値" }
{ "鈴木一郎" : 51 , "Japanese": true }

複数のデータを入れる場合は、「 , 」を入れて区切る。配列を使うことで階層構造(入れ子)にすることができる。

//jsonの書き方{ "キー" : "値" }
{ "メンバー":[
{ "姓" : "鈴木" , "名" : "一郎" },
{ "姓" : "田中" , "名" : "花子" },
{ "姓" : "山田" , "名" : "太郎" }
]}
//↑最後に ; がないことにも注目 ※jsonは;を入れない。

取得の方法は、オブジェクトの場合と同じです。

let json = { "名前": "大谷翔平", "ポジション": "ピッチャー", "年齢": 22 };
let jsonMenb = {
	"メンバー": [
		{ "姓": "鈴木", "名": "一郎" },
		{ "姓": "田中", "名": "花子" },
		{ "姓": "山田", "名": "太郎" }
	]
};

console.log(json["年齢"], jsonMenb["メンバー"][1]["姓"], jsonMenb["メンバー"].length);
//22 "田中" 3

Ajax で検索結果を取得

検索フォームの作成

YouTube Player API で作成した html ファイルに

• 検索フォーム
• 結果

を表示する <section> を作成します。
とりあえずは、<nav>の上で良いでしょう。

<form>
	<input type="search" id="ytSearch" value="TRiDENT" />
	<button id="searchBtn">検索</button>
</form>

<section class="searchlist"></section>
<!-- <nav>の上に -->
<nav>...</nav>

value に TRiDENT が設定されているのは、後ほど利用します。
続いて、ajax で YouTube の結果を取得します。

検索フォームの文字列を取得

検索フォームから検索ワード（文字列）を取得させます。

let ytSearchBtn = document.querySelector('#searchBtn');
ytSearchBtn.addEventListener('click', function (e) {
	let ytSearchVal = document.querySelector('#ytSearch').value;
	console.log(ytSearchVal);

	e.preventDefault(); //検索ボタンの送信をストップしておく。
});

//jQuery利用時の検索ボタンイベント
$('#searchBtn').on('click', function (e) {
	//変数ytSearchValに文字列を代入
	let ytSearchVal = $('#ytSearch').val();
	console.log(ytSearchVal);

	e.preventDefault(); //検索ボタンの送信をストップしておく。return false;でもいいです。
});

現在、検索フォームの value には、値が"TRiDENT"が設定されていますので、console には TRiDENT が表示されます。
では、html の value="TRident"を削除して、好きな文字を入れて「検索ボタン」を押してみましょう。
記入した文字列が表示されていれば OK です。

クリックイベントと Ajax 取得を組み合わせる

fetch()で取得します。

function ytSearch(val) {
	let key = 'APIキー'; //自分のキーに書き換えます。
	let num = 10;
	let part = 'snippet';
	let type = 'video';
	let query = val;
	fetch(`https://www.googleapis.com/youtube/v3/search?type=${type}&part=${part}&maxResults=${num}&key=${key}&q=${query}&playsinline=1`)
		.then((data) => data.json())
		.then((obj) => {
			console.log(obj);
		});
}

//jQueryのajax()で取得する場合
function ytSearch(val) {
	$.ajax({
		url: 'https://www.googleapis.com/youtube/v3/search', // YouTube DATA API: search
		dataType: 'json',
		data: {
			part: 'snippet',
			type: 'video',
			q: val, //検索ワード
			maxResults: 10,
			key: 'APIキー' // 自分のAPIキーに変更
		}
	}).done(function (data) {
		console.log(data);
	});
}

key の値を自分の API Key に書き換えてください。
data の部分が先ほどの JSON を表示させた”パラメータ”になります。
console で確認してみて、JSON が取得できていれば OK です。

.then((obj) => {})内にループで取得した videoId とタイトルをループで取得してコンソールに表示できるように書き換えます。

...
.then((obj) => {
    for (let i in obj["items"]) {
        //各videoIdとタイトルを取得
        console.log(obj["items"][i]["id"]["videoId"]);
        console.log(obj["items"][i]["snippet"]["title"]);
    }
})

//jQuery利用時
...
.done(function(data) {
$.each(data["items"], function(obj, value) {
    //各videoIdとタイトルを取得
    console.log(value["id"]["videoId"]);
    console.log(value["snippet"]["title"]);
});

console に videoId とタイトルが表示されます。

videoId とタイトルをセレクトメニューに代入

さらに変更していきます。
現在、select メニューに入っている<option>を削除し、検索結果の videoId と title が入るようにします。

...
.then((obj) => {
//現在入っている<option>を全て削除
movieid.innerHTML = null;
for (let i in obj["items"]) {
    //各videoIdとタイトルを取得して変数に代入
    let ytId = obj["items"][i]["id"]["videoId"];
    let ytTitle = obj["items"][i]["snippet"]["title"];
    //optionを作成して、videoIdとtitleを所定の場所に設置し、要素を追加していく。
    let optionTag = document.createElement('option');
    optionTag.textContent = ytTitle;
    optionTag.setAttribute('value', ytId);
    movieid.appendChild(optionTag);
}
});


//jQuery利用時
...
.done(function(data) {
    $('#MovieId').html('');
    $.each(data["items"], function(obj, value) {
        //各videoIdとタイトルを取得
        let ytId = value["id"]["videoId"];
        let ytTitle = value["snippet"]["title"];
        console.log(ytId, ytTitle)
        $('#MovieId').append('<option value="' + ytId + '">' + ytTitle + '</option>');
    })
});

とりあえず、ここまでで終了です。

自分で拡張してみましょう

YouTube Data API では、さまざまなデータを取得できます。

• YouTube Data API の概要 | Google Developers
  https://developers.google.com/youtube/v3/getting-started?hl=ja
• YouTube Data API v3 を試してみました
  https://phpjavascriptroom.com/?t=strm&p=youtubedataapiv3list