ブログに貼れる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を表示できるようになりました。知らんぷりしてそういうことだけ言えばいいのかもしれないんだけど、ちょっと苦労話を語ってみたかっただけ。そんだけ。

ブログを書くならBlogWrite