blog/2008-12-23

音楽室をリニューアルしてみた（Loudblogの改造／dojo.query、swfObjectの使い方）

http://logue.be/podcast/

MP3プレイヤーは、Marsh氏のmrmp3player.swfを使うことにした。さて、ソースをみるとどうやら、FlashVarsにmp3、lyric、mp3title、mp3artistというFlashに渡すパラメータがあり、どれか一つでもかけていると使えないようである。とりあえず、Loudblog本体は極力いじらない方向で再生する方法を考えていたところ妙案を思いついた。それは、 *CSSセレクタを使ってパラメーターをLoudblogから抜き出して、swfObjectを使ってFlashを書き換えればいいじゃないか* ということである。

ここでは、例によって慣れているdojoを使うことにした。FireFoxならFireBugで関数の名前や処理の結果を出力することができるが、IEではこれができない。やっぱりフレームワークの一部にFirebugが入っていることは便利である。

本体の改造

まず、本体の改造だ。Flashを書き換えるためには<object>タグにID属性をつける必要がある。あとで、処理しやすいようにplayer0、player1というようなIDになるようにしよう。そこで、loudblog/inc/function.phpの1198行目付近を以下のようにする。

function showflash ($url, $width, $height) {
+global $player_count;
    $return = "\n<object type=\"application/x-shockwave-flash\" ";
+   $return .= "id=\"player".$player_count."\" ";
    $return .= "data=\"".$url."\" ";
    $return .= "width=\"".$width."\" height=\"".$height."\">\n";
    $return .= "    <param name=\"movie\" value=\"".$url."\" />\n";
    $return .= "</object>\n";
+   $player_count++;
    return $return;

dojoの準備

次に、dojoを呼び出す。面倒だからGoogle CDNのスクリプトにダイレクトリンク。dijitといったUI拡張は行わないためこの２つだけで問題ない。テンプレートのヘッダーに以下の行を追加。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js" djConfig="isDebug:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/resources/dojo.css" />

曲名のタイトル

dojo.queryとは、dojoのCSSセレクタである。たとえば、mp3titleで使うパラメータはh2タグの文字である。従って

dojo.query('h2')

で、ページに含まれるすべてのh2タグの内容を配列として取得できる。たとえば、３番目のh2タグにアクセスしたい場合は、

dojo.query('h2')[2]

となる。２なのは単に０からカウントしているため。次にテキストデーターを取得したいのでIEでは、

dojo.query('h2')[2].innerText

になる。これで、曲名のタイトルが取得できる。しかし、IE以外ではinnerTextでテキストを読み込むことができない。そこで、textContentを使う。これは逆にIEでは使えないため、分岐処理が必要になる。

dojo.query('h2')[2].textContent;

となる。

mp3の位置

次にmp3の位置である。Loudblogでは、

<object type="application/x-shockwave-flash" data="loudblog/custom/templates/(テンプレート名)/emff.swf?src=get.php?fla=(ファイル名).mp3" width="355" height="28">
 <param name="movie" value="loudblog/custom/templates/(テンプレート名)/emff.swf?src=get.php?fla=(ファイル名).mp3" />
</object>

でmp3を呼び出している。ちなみに、get.php?fla=というパラメータが必要になるのは、mp3のflashによる再生回数をLoudblogで集計しているため。ここで必要になるパラメータは、(ファイル名).mp3なので、=でsplitすると、３番目にmp3のファイル名が出てくる。どういうわけか、Loudblogでは標準で、.htaccessのmod_rewrite指定にget?php=flaというアドレスをfla/でアクセスできるようになっているので、本来ならば、emff.swf?fla/(ファイル名).mp3でもいいはずだが・・・。

まぁ、それはさておき結論から言うと、mp3は

'./fla/' + dojo.query('object')[count].data.split(/=/)[2],

という感じで、mrmp3player.swfに渡せばいいだろう。同一ドメインなので相対指定でも問題ない。

ここでは、

location.href.split(/\?/)[0]

で、Loudblogの設置ディレクトリを指定し、そこにfla/を追加して、

dojo.query('object')[count].data.split(/=/)[2]

で、その後ろにobjectタグのdata属性から、mp3のファイルを=で分割してファイル名を取得している。

mp3artist

mp3artistだが、しゅとくする方法がこのままではないので、テンプレートの<lb:author />を<span class="author">タグで囲んでそれをdojo.queryで呼び出すことにした。

dojo.query('span.author')[n].childNodes[0].data

dojo.query('span.author')[n].innerTextでアクセスできないので、やや変則的だがこれで問題ない。

なお、IE以外では、

dojo.query('span.author')[count].textContent;

でも読み込める

そのほか

lyricは、

[00:00:00]表示したいテキスト

という内容の外部テキストファイルを読み込んで使うらしい。mp3のid3タグのLyricsを参照させることは可能だが、今回は割愛。空欄にしておこう。

swfObjectの指定

swfObjectは、flashを呼び出す際の煩雑なタグ打ちを簡略化したり、flashのバージョンが古いときに自動的にアップグレードしたりするスクリプトで広く使われている。まぁ、dojoにもこれと同じ処理ができるAPI『dojox.embed.Flash』があるわけだが、いかせん採用事例が少ない。というか、dojox.embed.Flashの検索結果で一番ヒットするのが自分の作っている[Lorelei](http://mabinogi.logue.be/)の[ソースコード](http://code.google.com/p/lorelei/source/browse/trunk/webroot/js/lorelei/mml/player.js)じゃないか！

dojox.embed.Flashを使ったサンプルは後日書くとして、今回はswfObjectを使う。使い方は、SWFObject v2.0 ドキュメント日本語訳を参考にした。形式は、

swfobject.embedSWF([埋め込むFlash],[書き換えるターゲットとなるDOM],[幅],[高さ],[Flashのバージョン],[expressInstall.swfの位置, [flashvarsのパラメータ], [paramタグの内容], [Flashのobjectタグに埋め込む属性]);

らしい。

結果上記パラメータを加えて

<script type="text/javascript">
//<![CDATA[
var flashvars = {

となる。あと、カウンターを初期化する処理をヘッダー内に入れる

<script type="text/javascript">
//<![CDATA[
var count = 0;
//]]>
</script>

これで、完成だ。JavaScriptが無効なときはデフォルトのemff.swfが使われる。