CakePHP + ZendFramework (Gdata)でYouTubeアプリ作成

このエントリーをはてなブックマークに追加
はてなブックマーク - CakePHP + ZendFramework (Gdata)でYouTubeアプリ作成
Share on Facebook
LINEで送る
Share on LinkedIn
Pocket

ZendFramework (Gdata)を使ってYouTubeのデータを操作

ZendFrameworkのGdataを使用して、YouTubeのデータ処理を行ってみました。

概要

YouTubeのAPIには
動画のデータ操作を行うData API
プレイヤーの操作を行うPlayer APIがあります。
この2つのAPIを利用して以下を行います。

  • YouTubeのApiを使って、ほしいデータを検索(Data API)
  • HP上に動画プレイヤーを設置する(Player API)
  • 検索した動画を設置した動画プレイヤーで再生する

他にも動画のアップロード等ができますが、そちらは、参考資料を参考にしてください。
クライアントライブラリはPHPとjavascriptだけではなく、Javaなどのほかの言語でも提供されています。

完成イメージ

環境

参考資料

Zend Gdataの設定

  • 上記のリンクからGdataの圧縮ファイルをDL&展開しておく
  • 展開したなかのlibraryディレクトリの中のZendディレクトリをvendorsまたはapp/vendorsに設置する。i.e.vendors/Zend or app/vendors/Zend
  • ここからZendFrameworkLoader Componentを作成する。i.e. app/contorollers/components/zend.phpを作成

app/contorollers/components/zend.php

<?php
class ZendComponent extends Object {

	/**
	 * Controller Startup Initialisation 
	 * Add APP/vendor to include path 
	 *  
	 * @throws Exception 
	 */
	public function startup() {
		$include = get_include_path();
		// Zendディレクトリをapp/vendorsに設置した場合
//		$include.= PATH_SEPARATOR . APP . 'vendors' . DS;
		// Zendディレクトリをvendorsに設置した場合
		$include.= PATH_SEPARATOR . VENDORS;
		$successful = set_include_path($include);

...........

}
?>

Controllerの作成

app/controllers/youtube_controller.php

<?php
class YoutubeController extends AppController{
	public $name = 'Youtube';
	public $uses = '';
	public $layout = 'default';
	public $components = array('Zend');
	
	public function index(){
		// YouTubeクラスのロード
		$this->Zend->loadClass('Zend_Gdata_YouTube');
		$yt = new Zend_Gdata_YouTube();
		// Queryの作成
		$query = $yt->newVideoQuery();
		$query->videoQuery = '世界卓球 -パチンコ -AKB';
		$query->startIndex = 1; // 開始番号
		$query->maxResults = 10; // 検索取得数
		$query->orderBy = 'viewCount'; // 閲覧数順
		
		// Feedの取得
		$videoFeed = $yt->getVideoFeed($query);
//		$videoFeed = $yt->getUserFavorites('username'); // ユーザのお気に入りの動画を取得
		// 取得したFeedをView変数に設定する
		$this->set('videoFeed', $videoFeed);
	}
}
?>

ZendFrameworkは使ったことがなかったので、知らなかったのですが、
クラス名はディレクトリの階層をアンダーバー”_”で区切ってつけられています。
たとえば。。
Zend_Gdata_YouTubeクラスは
Zend/Gdata/YouTube.phpにあります。
この命名規約のため階層が深くなれば、newするときのメソッド名が長くなります。
短くするために、上のコードのように
$query = $yt->newVideoQuery();
でnewできるようになっています。
VideoQueryは実際は、
Zend/Gdata/YouTube/VideoQuery.php
にあります。

さらに、$query->startIndexとメンバ変数のように設定している箇所があります。
しかし、クラス、継承しているクラスを見てみると、そのようなメンバ変数はありません。
ここの実際のメソッドはsetStartIndex()です。
setter&getterはメンバ変数のように扱える仕組みになっているようです。

Viewの作成

app/views/layouts/default.ctp

.....
<head>
	<?php echo $this->Html->charset(); ?>
	<title>
		<?php __('CakePHP: the rapid development php framework:'); ?>
		<?php echo $title_for_layout; ?>
	</title>
	<?php
		echo $this->Html->meta('icon');

		// ==============================================
		// CSS
		// ==============================================
		echo $this->Html->css('cake.generic');
		
		// ==============================================
		// javascript
		// ==============================================
		echo $this->Html->script('swfobject');
		echo $this->Html->script('jquery-1.4.3.min');
		echo $scripts_for_layout;
	?>
</head>
.......

app/views/youtube/index.ctp

<!-- TEST作成のため、CSSは直接書いている-->
<h1>test</h1>
<div id="yt" style="width: 800px;margin: auto;">
	<div style="float: left;">
		<div id="ytapiplayer">
		You need Flash player 8+ and JavaScript enabled to view this video.
		</div>
	</div>
	<div style="margin-left: 5px; float: left;width:260px; height:375px; overflow: scroll;">
		<?php
		foreach ($videoFeed as $videoEntry) {
			// サムネイルの取得
			$videoThumbnails = $videoEntry->getVideoThumbnails();
			// サムネイルは4つ取得できる(ここでは1つだけ表示した)
			foreach ($videoThumbnails as $thumbnail) {
				echo $this->Html->image($thumbnail['url'], array('height' => 90, 'width' => 120, 'id' => $videoEntry->getVideoId(), 'class' => 'youtube', 'title' => $videoEntry->getVideoTitle(), 'alt' => $videoEntry->getVideoTitle()));
				break;
			}
		}
		?>
	</div>
</div>
<script type="text/javascript">
	var ytplayer = null;
	// playerの準備が完了後に呼び出されるコールバック
	// playerを制御するには必ず実装が必要
	function onYouTubePlayerReady(playerid){
		// プレイヤーを取得(swfobjectで指定したidを指定する)
		ytplayer = document.getElementById("myytplayer");
//		ytplayer.cueVideoById();
	}
	
	var params = { allowScriptAccess: "always" };
	var atts = { id: "myytplayer" };
	swfobject.embedSWF("http://www.youtube.com/v/u1zgFlCw8Aw?enablejsapi=1&playerapiid=ytplayer", 
	"ytapiplayer", "500", "375", "8", null, null, params, atts);
	$(function(){
		$("img.youtube").click(function(){
			ytplayer.loadVideoById($(this).attr("id"));
		});
		$("img.youtube").hover(function(){
			$(this).css("cursor", "pointer")
				.fadeTo("fast", 0.5);
		},function(){
			$(this).fadeTo("fast", 1);
		})
	});
	
</script>

imgタグのid属性に動画のidを設定しています。
サムネイルがクリックされたときに、その動画が再生されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です