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

今回は、後で紹介するfacebookアプリ開発の本を参考にしながら、YoutubeのAPIを使う部分を抜き出して作成してみた。
まず、動画を表示する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アプリ開発

  • 作者: 蒲生睦男
  • 出版社/メーカー: シーアンドアール研究所
  • 発売日: 2011/11/16
  • メディア: 単行本(ソフトカバー)
  • 購入: 1人 クリック: 12回
  • この商品を含むブログ (1件) を見る
Facebookアプリにとどまらず、Webサービスの開発にすごく参考になる本。
買って本当によかった・・・。