« February 2006 | Main | April 2006 »

ブログ上で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  3つのモードを指定可能。省略した場合は「top」を指定したと見なされる。3つのモードについては各々下記。
  • 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)を追加しました。詳細解説はこちらです。

| | Comments (149) | TrackBack (5)

ブログに貼れるMini Movie、G2V Player

前のエントリで書いたとおり、Got2VideoでUser Ratingの高いVideo Top 20のPodcastRSS feedとJSON feedの配信を開始した。でもって作成したのがTop 20のVideoを再生してくれるMini Player、「G2V Player」である。JavaScriptが使えるブログならば下記のSCRIPTタグをサイドバーに貼るだけでOK。当ブログの右サイドバーのてっぺんに表示されてるやつがそれだ。

<script src="http://www.got2do.com/api/G2Vplayer.js" type="text/javascript" charset ="utf-8"></script>

ココログの場合は「マイリスト」→「新規作成(リンク)」→「テキスト表示(設定)」で上記タグを書き込めばOK、livedoorブログの場合は「カスタマイズ/管理」→「プラグインの設定」→「新規追加」→「上級者向けプラグイン(Javascript)」で上記のURLを指定するだけでよい。Javascriptが使えない場合はwww.got2do.com上のHTMLファイルを下記の通りIFRAMEで表示させるという手もある。

<iframe width="160" height="196" src="http://www.got2do.com/lab/G2Vplayer.htm" scrolling="no" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe>

さて、G2Vplayer.jsのソースを読んでもらえば分かるとおり、コード自体は非常にシンプルである。next()、prev()、play()、make()のメソッドを持つplayG2Vオブジェクトを準備し、関数loadG2V(args)で配列argsを渡してplayG2Vのインスタンスを生成する、でもってメソッド実行。あとはお決まりのscriptタグの動的生成でJSON feedを読み込んでやれば関数jsonG2V(args)が実行されるというわけだ。

しかし、ここまでをFirefoxで動作確認した後、IEで表示しようとして大いにはまった。HepCat Dev and Testの「GoogleマップとIEの『開けません。操作は中断されました』」のエントリにある現象同様、このスクリプトをBODY内で実行しようとすると、IEではエラーが生じてしまうのである(厳密には、BODY内のDIVタグ内で実行しようとするとエラーが生じる)。原因の特定にも時間がかかったが、解決策をどうしたものか。HepCat Dev and Testに指摘されている通り、確かにHEAD内にスクリプトを書けばよいのだが、できればブログのBODYのDIVタグ内にSCRIPTタグ一発を書くだけで簡単に実行されるようにしたい。色々調べた結果、WebDeveloper.comのこちらのスレにあるとおり、document内のタグを全部調べて、「HEAD」の次のタグを指定してdocument.insertBefore()すれば「動的にHEAD内にSCRIPTタグを埋め込む」ことができると分かった(BODYタグ指定でinsertBefore()ではエラー)。

というわけで、結論としてはJavascriptの使えるブログなら、上述のSCRIPTタグ一発でG2V Playerを表示できるようになりました。知らんぷりしてそういうことだけ言えばいいのかもしれないんだけど、ちょっと苦労話を語ってみたかっただけ。そんだけ。

| | Comments (33) | TrackBack (3)

Got2VideoのUser Rating Top 20をPodcastRSSとJSONで配信

Got2VideoがYahoo!に登録されました。でもって、Yahoo!デベロッパーネットワークのトップページにも掲載して戴きました。技術屋でも何でもないのにこんなところに載せて頂くなんてまさにこれがうれしはずかしというやつですな。

というわけで、適当に作りっぱなしたまま放置しとくのもイケナイような気がしていくつか修正を行いました。
①検索結果にAmazonの関連商品を表示するように。
②User Ratingの高いビデオ Top 20のリストをPodcastRSS及びJSONで配信。
③②のデータを利用して、Got2VideoのトップページにBest 20のリストを表示するように。

①については、かっこよく言えばリスティング広告、平たく言えばアサマシですが、いつか使ってみようと思っていたawsearch.jsAmazon最速検索のJSON-RPCを汎用化したライブラリ)を使ってみたもの。笑うくらい簡単に実装できてしまう上、Codingにも学ぶところが沢山あるので、Web Services Requesterな方々は一見の価値あり。

②が今回のUpdateのメインですが、http://video.got2do.com/putG2V.php?mode=rss がPodcastRSS feedのURI、http://video.got2do.com/putG2V.php?mode=json がJSON feedのURIになります。PodcastRSSはiTunesに突っ込んでBest VideoをDownloadしたり、RSSリーダーで読んだり、Proxy経由でAjaxな使い方したりと好きなようにいじってください。
JSON feedについては、「jsonG2V(args)」の形式でfeedを吐くので、jsonG2Vに関数を前もって設定してやって、JSON feedのURIを指定するscriptタグを動的に生成してappendChildしてやればAjaxな感じでデータを読み込むことができます。詳細は最速インターフェース研究会さんの「JSAN構想とリモートデータの取得とUser JavaScript」のエントリと弊「JSONでBiddersインクリメンタル検索、をブログに貼ってみる」のエントリを御参照願います。為念、Codingはこんな感じ。

var jsonG2V=funtion(args) {
    var html='';
    for (var i=0;i<args.length;i++) {
        html+=args.item
    }
    document.getElementById('result').innerHTML=html;
}
var s=document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src','http://video.got2do.com/putG2V.php?mode=json');
s.setAttribute('charset','utf-8');
document.body.appendChild(s);

Got2Videoのトップの「Got2Video Best Rated Video!」もこの仕組みを使ってます。単にBest 20を表示するだけならServer側で処理して表示してもよいのですが、トップページは即表示される方が快適なので、Server処理せずにただのHTMLページを表示後、JavaScriptで表示するようにしています。IEの場合はセキュリティ警告が出るかもしれません。

同じようにJSONを使って作ったのが右サイドバートップに表示されているMini Player(G2V Player)。「Prev」と「Next」でTop 20のビデオを次々と再生することができます。スクリプトタグ一発で貼れるので、こんな風にLivedoor Blogなんかにも貼れます。Codingのベース自体は家に帰る電車内の30分くらいでできたものの、IEでエラーが出まくったりしたので、詳細は別エントリにて説明します。

| | Comments (1) | TrackBack (0)

« February 2006 | Main | April 2006 »