ブログ上でYoutubeのお気に入りビデオを再生するU2B Player

今やユニークユーザ数でGoogle Videoを圧倒し、映画配給会社のプロモーションにも使われるようにまでなったYouTube.com。所謂Social Serviceで、ユーザーが投稿したビデオを評価・共有できる。音楽PV好きとしては、Flash Video採用で画質・音質ともにイマイチな同サービスより、この間タグを貼ってみたGoFish.comのほうがお気に入りなんだけども、API（Web Services）が公開されているという意味ではYouTube.comに軍配が上がる。その割にはこのAPIを使ったネタがないなーと思って作ってみたのが右サイドバーに貼ってある「U2B Player」。U2Bとかいてユーチューブと読む。読んでくれ。読んで下さい。再生画面の下に並んでるサムネールをクリックするとそのビデオが再生画面に表示されて、再生ボタンを押すと再生されます。

前のエントリのG2V Player同様使い方は簡単で、JavaScriptの使えるブログに下記のSCRIPTタグをサイドバーに貼るだけ。前回同様、 ココログの場合は「マイリスト」→「新規作成(リンク)」→「テキスト表示（設定）」でSCRIPTタグをベタ打ち、livedoorブログの場合は「カスタマイズ/管理」→「プラグインの設定」→「新規追加」→「上級者向けプラグイン（Javascript）」で下記のURLを指定する。但し、今回はいくつか機能をつけたのでパラメータを指定しないといけない。



<script src="http://www.got2do.com/api/U2Bplayer.php?

 mode=[モード]&user=[ユーザID]&proxy=[プロキシ名]"

 type="text/javascript" charset ="utf-8"></script>

mode	３つのモードを指定可能。省略した場合は「top」を指定したと見なされる。３つのモードについては各々下記。 top：YouTube.comのトップページで紹介されているビデオ25個を表示する。 favorite：「ID」で指定したユーザーのお気に入りビデオを表示する。お気に入りが25個以上の場合は26個目以降は表示しない。ID指定必須。 ※YouTubeのAPIの仕様変更に伴い、表示数上限が10個になっています。ご注意下さい。（参考） uploaded：「ID」で指定したユーザーが投稿したビデオを表示する。投稿ビデオ25個以上の場合は26個目以降は表示しない。ID指定必須。 ※YouTubeのAPIの仕様変更に伴い、表示数上限が10個になっています。ご注意下さい。（参考）
user	modeが「favorite」「uploaded」のとき、ユーザーIDを指定する。
proxy	YouTube.comからGETしたXMLをJSONに変換するプロキシを指定する。 g2d：www.got2do.comのプロキシを利用。省略した場合はこれになる。 drk7：drk.7.jpさんの提供されている「XML2JSON」サービスを利用。詳細は後述。

よって、例えばユーザー名teddygのお気に入りビデオを貼りたい場合は下記のいずれかになる。



<script src="http://www.got2do.com/api/U2Bplayer.php?mode=favorite&user=teddyg" type="text/javascript" charset ="utf-8"></script>

<script src="http://www.got2do.com/api/U2Bplayer.php?mode=favorite&user=teddyg&proxy=drk7" type="text/javascript" charset="utf-8"></script>



言うまでもないが、パラメータを全て省略するとYouTube.comのトップで紹介されているビデオが表示される。

スクリプトの内容についてはG2V Playerと同じで、JSONで受け取ったデータを配列に読み込んで、HTMLに整形してブログに挿入しているだけ。今回は自前のgot2do.comのプロキシ以外にdrk7.jpさんの提供するXML2JSONサービスも利用できるようにしてみた。ウチのサーバの負荷分散とかいうわけではなくて、単に使ってみたかっただけです。

XML2JSONサービスではパラメータvarで指定した関数のdataプロパティをJSONで吐き出した上、onload()メソッドを実行するようになっているので、まずはJavascript上でそれを定義する必要がある。今回はonloadメソッドだけを持つjsonU2Bという関数を用意し、jsonU2B.onload()は実際のHTML生成等を行うplayU2Bオブジェクトのインスタンスを生成してplay()メソッドを実行するだけにしています。ソースコード自体はG2Vplayerとほとんど同じなので、使ってもないnext()とprev()のメソッドが名残として残ったままになっている。まあ気にしない。

あと、XML2JSONサービスでは元のXMLデータが複数の同一要素を持っている場合（例えばRSSにおけるitem要素みたいなの）に、数値をキーとする配列ではなく、各々の要素のID?みたいなの?をキーとする連想配列としてJSONが吐き出される。よって、各々の要素にアクセスするにはキーを指定する必要があるので、そのキーだけを別の配列としてplayU2Bのプロパティとして持つようにして処理しています。ってもう何のことだかわかんないな。

ってなわけで、ブログ上で自分の見つけた面白ビデオを紹介したい人だとか、自分の子供や孫を動画で自慢したい人、自分とか自社とかのビデオをPRしたい人、例えばライブ映像を流したいバンドの人だとかにはいいんじゃないでしょうか、ねえollirodge兄さん。

【追記】アサマシ機能（リスティング機能）と上述のオプション設定をする為のツールを作りました。設定用ツール（ページ）はこちら、詳細解説はこちらです。

【追記2】ページ内でLightBoxのように動画をオーバーレイさせて表示させる機能を追加しました。詳細解説はこちらです。

【追記3】U2B Player読み込み完了後に、ページ内のすべてのYouTubeへのリンクを、ページ内での動画オーバーレイ表示させる機能（Link2B）を追加しました。詳細解説はこちらです。