感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

YoutubeのJavaScriptのAPIを使って、Youtube動画を検索して再生するサンプル

<スポンサーリンク>

YouTube APIとかツールを使うと、ウェブページ、アプリケーション、デバイスなどにYoutubeを組み込むことができる。
Data APIでは通常ユーザがYoutubeのウェブサイト上で行う操作のほとんどを実行できる。
つまり、Youtubeを無限に1曲リピートしたりするのは、このYoutubeのDATA APIをうまいこと使ってやっているのだ。

今回は、後で紹介するfacebookアプリ開発の本を参考にしながら、YoutubeAPIを使う部分を抜き出して作成してみた。
まず、動画を表示するHTMLはこちらだ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Youtubeを再生するサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="./youtubeplayer.js"></script>
</head>
<body>
<header>
<h1>Youtubeで検索</h1>
</header>
<div id="contents">
	<div id="ytapiplayer">
	この動画を再生するには、Flash Player 9 以降をインストールし、JavaScript を有効にする必要があります。
	</div>
	<div id="search">
		<input type="text" id="keyword">
		<button id="go">検索</button>
	</div>
	<div id="result"></div>
</div>
</body>
</html>

で、

<script src="./youtubeplayer.js"></script>

で読み込んでいるJavaScriptが、Youtubeの動画を検索する処理を行う。

$(function () {
	$("#go").click(function() {
		prm.q = encodeURIComponent($("#keyword").val());
		YoutubeSearch(prm);
	});
});

function init(resp) {
	var vurl = getParameter("vurl");
	if (vurl) {
		ytswf.loadVideoByUrl(vurl);
	}
}

var prm = {
	q: '',
	alt: 'json-in-script',
	'script-index': 1,
	'max-results' : 10,
	v: 2
};

var ytswf, swfUrl;
var baseUrl = 'http://www.youtube.com/';
var argsString = 'enablejsapi=1&playerapiid=ytplayer';
swfUrl = baseUrl + 'v/' + 'u1zgFlCw8Aw' + '?version=3&' + argsString;
var params = { allowScriptAccess: "always", bgcolor: "#cccccc"};
var atts = { id: "myytplayer"};
var flashvars = {};
swfobject.embedSWF(swfUrl, "ytapiplayer", "640", "360", "9", null, flashvars, params, atts);

function onYouTubePlayerReady(playerId) {
	console.log("プレイヤーAPIの準備ができたらコールバックされる関数");
	ytswf = document.getElementById("myytplayer");
	var vrul = getParameter("vurl");
	if (vurl) {
		ytswf.loadVideoByUrl(vurl);
	}
}

function YoutubeSearch () {

	$("#result").empty();

	$.ajax(
	{
		url: 'https://gdata.youtube.com/feeds/api/videos',
		data: prm,
		dataType: "jsonp",
		cache: true,
		success: function(data,status,xhr) {
			$("#result").empty();
			totalResults = data.feed.openSearch$totalResults.$t;
			$.each(data.feed.entry, function(i, item) {
				var group = item.media$group;
				$('<img/>')
				.attr({src: group.media$thumbnail[0].url, title: item.title.$t})
				.click(function() {
					ytswf.loadVideoByUrl(group.media$content[0].url);
				}).appendTo("#result");
			});
		}
	});
}

function getParameter(key) {
	var str = location.search.split("?");
	if (str.length < 2) {
		return "";
	}

	var params = str[1].split("&");

	for (var i = 0; i < params.length; i++) {
		var keyVal = params[i].split("=");
		if (keyVal[0] == key && keyVal.length == 2) {
			return decodeURIComponent(keyVal[1]);
		}
	}
	return "";
}

このJavaScriptとHTMLを組み合わせてサーバ上で実行した結果は以下のようになる。
f:id:sho322:20131111005259p:plain

Youtube APIはなかなか面白く、使いこなせば便利なサービスをたくさん生み出せそうだ。
たとえば、「歌ってみた」系の動画を検索結果から省いて、本人の曲だけ表示できるようにしたり、
もう既にサービスはあるけれど、好きな曲を何曲か登録して、何度もリピート再生できるようにしたりするアプリを作ったりも、けっこう簡単に実現できそうだ。

参考にした本

基礎から学ぶ facebookアプリ開発

基礎から学ぶ facebookアプリ開発

Facebookアプリにとどまらず、Webサービスの開発にすごく参考になる本。
買って本当によかった・・・。