JSONPを用いてYouTube APIを使用する

php jsonp javascript

説明

ここではあるキーワードで検索したときの、YouTubeの検索結果を表示するプログラムを作ってみます。

JSONPを使ったYouTube APIの使い方については上を、JSONPについては下のサイトを参考にしました。
Developer's Guide: JSON-C / JavaScript
JSONPを使ってJavaScriptだけでマッシュアップ

今回のJSONPを使うためのプログラムの流れは以下の通りです。

showResult関数を実行

↓

渡すURLを生成

↓

そのURLを引数にしてcallJSONP関数を実行(ここまでをshowResult関数で行なっている)

↓

callJSONP関数が実行され、
scriptタグが生成される
srcには先程のURLが指定されている
（通常jsではクロスドメインアクセスができないのだが、scriptタグを用いると，ドメインの異なるサーバに置いているスクリプトファイルを読み込むことができる。このscriptタグを用いてデータを取得する方法をJSONPという）

↓

その生成したscriptタグが読み込まれるとコールバック関数であるshowMyVideos2関数が実行され、動画プレイヤーがphpファイルのobjectタグに、サムネが指定したdivタグに埋め込まれる。
（jsの部分はDeveloper's Guide: JSON / JavaScriptの下にあるYouTube JSON codelabを参考にしました）

結果はこんな感じです。中日ドラゴンズをクエリとしたときの検索結果を表示しています。サムネイルをクリックするとobjectタグに埋め込まれている動画がクリックされた動画に切り替わります。


結果


ソースコード

test.php

<html>
<head>
	<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
	<script language="JavaScript" src="./js/showResult.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/main.css" />
</head>
<body>
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="get">
<input type="text" value="" name ="formquery" size=40>
<input type="submit" name="submit">
</form>
	
<?php
	
	//GETされたとき
	if($_SERVER["REQUEST_METHOD"]=="GET"){
		//登録ボタンが押されたとき
		if(isset($_GET["submit"])){
			$getflag="1";
			$phpquery=$_GET["formquery"];
		}	
	}
	if($getflag=="1"){
		echo $a;
	}

?>

<script type="text/javascript">
	//送信された内容を表示
	var getflag = "<?php echo $getflag;?>";
	if(getflag=="1"){
		var jsquery="<?php echo $phpquery;?>";
		jsquery=
		showResult(jsquery);
	}
</script>

<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
	<object id="player"></object>
</div>

<div id="videos2"></div>
</body>
</html>

showResult.js

function showResult(query){
	var enco_query = encodeURI(query);  
	var url = "http://gdata.youtube.com/feeds/api/videos?q=" + enco_query + "&alt=json-in-script&callback=showMyVideos2&max-results=30&format=5";  
  	callJSONP( url );
}

//JSONPを実行する関数  
function callJSONP(url) {  
  var target = document.createElement('script');  
  target.charset = 'utf-8';  
  target.src = url;  
  document.body.appendChild(target);
}  

function loadVideo(playerUrl, autoplay) {
  swfobject.embedSWF(
      playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
      (autoplay?1:0), 'player', '480', '400', '9.0.0', false, 
      false, {allowfullscreen: 'true'});
}

function showMyVideos2(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul class="videos">'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t.substr(0, 20);
    var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
    var playerUrl = entries[i].media$group.media$content[0].url;
    html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
              '<span class="titlec">', title, '...</span><br /><img src="', 
              thumbnailUrl, '" width="130" height="97"/>', '</span></li>');
  }
  html.push('</ul><br style="clear: left;"/>');
  document.getElementById('videos2').innerHTML = html.join('');
  if (entries.length > 0) {
    loadVideo(entries[0].media$group.media$content[0].url, false);
  }
}

main.css


#playerContainer{
	position:absolute;
	top:40px;
}


.titlec {
  font-size: small;
}

ul.videos li {
  float: leftt;
  width: 10em;
  margin-bottom: 1em;
}

ul.videos
{
  position: absolute;  
    top: 430;
  margin-bottom: 1em;
  padding-left : 0em;
  margin-left: 0em;
  list-style: none;
}