Skip to content
2011/06/07 / Javelina

WordPressで自分のYouTubeの動画をリスト表示する簡単なプラグインを作ってみる

本家サイトでの話。

動画を掲載するにあたってYouTubeを利用しているんですが、動画投稿用に取ったアカウントと普段使っているアカウントが違うので、動画の情報を見たりするときに何かと不便だったりします。

せめて自分の動画の一覧表示画面だけでもログインし直したりせずに見れればな・・・と思っていたんですが、PHPのYoutube Data APIを眺めていたらPHPで割と簡単にできそうだったので、プラグインを作ることにしました。

 

結果からお見せするとこんな感じで作ることができました。満足!↓

 

サムネイルクリックで、wordpressのthickboxを利用して動画のプレビューが見れるようにしてあります。↓

Devilish Design MovieList-preview-

 

YouTubeのフィードを取得・表示するだけなら、先程のPHPのYoutube Data APIを読めば済んでしまう話なんですが、一応作り方を書いてみたいと思います。

まずYouTubeのデベロッパーキーが必要なのでこちらから取得しておきます。
それとZend Frameworkが必要なのでダウンロードします。→Zend Framework
ダウンロードが済んだら、my_youtubeというフォルダを作っておいて、解凍したZend Frameworkをそこにまるごとぶちこみます。(他でZend Frameworkを使ってる場合はもちろんここに入れなくても構いません)ちなみに解凍しただけだとフォルダ名の最後にバージョンが入っていると思いますが、ここでは「Zend Framework」にリネームしているものとします。

続いて、my_youtubeの中にmy_youtube.phpというファイルを作ります。
my_youtube.phpにはまずはこんなかんじで書いときます。

 

<?php /*
Plugin Name: My_Youtube
Plugin URI: http://devilishdesign.net
Description: JavelinaDevilのYouTubeムービー一覧
Author: Javelina
Author URI: http://devilishdesign.net
Version: 0.0.1
*/
add_action('admin_menu','MyYouTube_Plugin');
function MyYouTube_Plugin(){
add_menu_page('MyYoutube', 'MyYoutube', '2', __FILE__, 'movielist',  plugins_url('/my_youtube/youtube_icon_sm.png'));
add_submenu_page(__FILE__, 'MovieList' , 'MovieList' , '2' , __FILE__ , 'movielist');
}?>

 

今回の場合はmy_youtube.phpとZend Frameworkが同じフォルダに入っているので、Zend Frameworkの呼び出しは次のような感じで。限定動画を読み込むにはログイン状態にしないといけないので、Zend_Gdata_YouTubeの他にZend_Gdata_ClientLoginも呼んでおきます(今回は面倒くさいのでクライアントログイン方式で認証)

 

<?php
function movielist(){
$lib = dirname(__FILE__) . "/ZendFramework/library/";
set_include_path(get_include_path() . PATH_SEPARATOR . $lib); 
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata_YouTube');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
?>

 

次に設定を書いていきます。自分の動画さえ表示できればいいのでユーザー名などは全部ベタ書き。

 

<?php 
$authenticationURL= 'https://www.google.com/youtube/accounts/ClientLogin';
$httpClient = Zend_Gdata_ClientLogin::getHttpClient(
$userName = '**********',//ユーザー名
$password = '**********', //ログインパスワード
$service = 'youtube',
$client = null,
$source = 'MySource',
$loginToken = null,
$loginCaptcha = null,
$authenticationURL);
$myDeveloperKey = '******************************';//取得したデベロッパーキー
$httpClient--->setHeaders('X-GData-Key', "key=${myDeveloperKey}");
?>

 

ここまででログインのための記述完了。次に最新50件の動画のフィードを取得するための記述です。

 

<?php
$yt = new Zend_Gdata_YouTube($httpClient);
$yt->setMajorProtocolVersion(2);
$start_index = 1;//何個目の動画からカウントするか
$max_results = 50;//取得する動画の数
$url = Zend_Gdata_YouTube::USER_URI .'/'. $userName .'/'. Zend_Gdata_YouTube::UPLOADS_URI_SUFFIX . '?start-index=' . $start_index . '&max-results=' . $max_results;
$myFeed = $yt->getVideoFeed($url);
?>

 

$max_resultsには最新何件の動画を取得したいかを入れればよいわけですが、一度に取得できるのは最大で50件までです。
この設定だと一番新しい動画~50個目の動画が表示されます。
51~100個目の動画を表示したい場合は$start_indexを51にすればよいわけです。GETで数値を渡すようにしてページを分けてもいいかもですね・・・。

 

最後に、出力部分を記述します。

 

<div class="wrap">
<h2><img src="<?php echo plugins_url('/my_youtube/youtube_icon_lg.png');?>" style="vertical-align:bottom;" width="37" hight="37" />My YouTube</h2>

<ul id="mymovies">
<?php printVideoFeed($myFeed);?>
</ul>
<p id="clear">&nbsp;</p>
</div>
<?php }?>
<?php
function printVideoFeed($videoFeed, $displayTitle = null) 
{
  if ($displayTitle === null) {
    $displayTitle = $videoFeed->title->text;
  }
  echo '<h3>' . $displayTitle . '</h3>' . "\n";
  echo "\n";
   foreach ($videoFeed as $videoEntry) {
     echo '<li>';
     printVideoEntry($videoEntry);
     echo "\n";
     echo "</li>";
   }
}
function printVideoEntry($videoEntry) {

  $title = $videoEntry->getVideoTitle();//動画のタイトル
  $videoid = $videoEntry->getVideoID();//動画のID
  $description = $videoEntry->getVideoDescription();//動画の説明文
  $tags = $videoEntry->getVideoTags();
 if(is_array($tags)){$tags = implode(',',$tags);}//動画のタグ
  $l_url = $videoEntry->getVideoWatchPageUrl();//動画のURL
  $s_url = 'http://youtu.be/' .  $videoid;//動画の短縮URL
  $time = gmdate('i:s', $videoEntry->getVideoDuration());//動画の長さ
  $count = $videoEntry->getVideoViewCount();//動画の視聴数
  $ratinginfo = $videoEntry->getVideoRatingInfo();
 $rating = $ratinginfo['numRaters'];//動画の評価
  $thumbnail = 'http://i.ytimg.com/vi/' . $videoid . '/hqdefault.jpg';//動画のサムネイル

$yttable = 
'<a class="thickbox" title="プレビュー" href="http://www.youtube.com/watch_popup?v=' . $videoid . '&TB_iframe=true&height=300&width=400">'.
'<img src="' . $thumbnail . '" alt="" width="200" /></a>' .
'<table class="movielines">' .
'<tbody>' .
'<tr><th colspan="2"><a title="'.$description.'" href="'.$l_url.'">' . $title . '</a></th></tr>' .
'<tr><td width="50px">ID:</td><td width="150px"><input class="inputtext" type="text" value="' . $videoid . '" /></td></tr>' .
'<tr><td width="50px">URL:</td><td width="150px"><input class="inputtext" type="text" value="' . $s_url . '" /></td></tr>' .
'<tr><td>tag:</td><td><input class="inputtext" type="text" value="' . $tags . '" /></td></tr>' .
'<tr><td>time:</td><td>' . $time . '</td></tr>' .
'<tr><td>count:</td><td>' . $count . '</td></tr>' .
'<tr><td class="last">rate:</td><td class="last">' . $rating . '</td></tr>' .
'</tbody>' .
'</table>';

echo $yttable;
}?>
<?php function myyoutube_css(){?>
<style type="text/css" media="screen">
ul#mymovies{
margin:0;
padding:0;
width:100%;
}
ul#mymovies li{
display:block;
margin:0;
width:200px;
padding:10px;
float:left;
}
p#clear{
clear:left!important;
font-size:1px;
height:1px;
line-height:1px;
margin:0;
padding:0;
}
table.movielines{
table-layout:fixed;
border:none;
margin:0;
padding:0;
text-align:left;
}
table.movielines tr th{
height:40px;
}
table.movielines tr td{
height:25px;
border-top:1px dotted #888;
}
table.movielines tr td.last{
border-bottom:1px dotted #888;
}
table.movielines tr td input.videoid{
width:99%;
border:none;
background:transparent;
}
</style>
<?php }?>
<?php
if($_GET['page'] == 'my_youtube/my_youtube.php'){
add_action('admin_head', 'myyoutube_css');
add_thickbox();
}?>

 

htmlやcssは好きずきだと思いますが一応こんな感じです。

あとは、ファイルを保存してmy_youtubeフォルダごとwp-content/plugins/ディレクトリにポイ!
有効化して終了です。

ちなみに、私の場合は限定動画(URLを知っていないと見れない動画)で投稿することがちょくちょくあるのでログインの処理を入れなければなりませんでしたが、一般動画のみ表示できれば良いのであればログイン処理する必要はありません。その場合はデベロッパーキーを取得する必要もありません。

また、今回の場合は最新50件の動画が表示されるようにしていますが、最新25件のみ取得で良いのなら$myFeedは

 

$yt = new Zend_Gdata_YouTube();
$yt->setMajorProtocolVersion(2);
$userName = '**********';//ユーザー名
$myFeed = $yt->getUserUploads($userName);

 

これだけで済ますことができます。

 

ちょっと乱暴な作りのプラグインだとは思いますが、今のところかなり重宝してます。
・・・って言っても、普通はわざわざアカウント分けたりはしないと思うので全く必要性がないかもしれませんね^^;
 

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。