あかつきのお宿

以前、こんな記事を書いたんですけど、ついにあの問題が解決したぜ。文章だと平坦なテンションでこう言ってるように見えるかもしれないけど、実際はかなりやべーっす。周りに白いハトが200羽くらい元気に飛び回っているくらいのテンションです。分かり辛いですね。

音楽の再生は前にも言ったようにjPlayerというものを使っているんですが、これを使ってプレイリストを作る場合、こんな感じのスクリプトが動いてます。今日の話に必要のは最初の20行くらいなので、後半は省略してます。

<script>
$(document).ready(function(){
    var usePlayList = true;
    var playItem = 0;

    var myPlayList = [
        <?php foreach($musics as $key => $music) : ?>
            {name:"<?php echo $music['Music']['title'] ?>",filename:"<?php echo $music['Music']['path'] ?>"},
        <?php endforeach ?> 
    ];

    var isIE = /*@cc_on!@*/false;
    if(isIE == true) {
        myPlayList.length -= 1;
    }

    $("#jquery_jplayer").jPlayer({
        ready: function() {
            displayPlayList();
            playListEnable(true);
        }
    });

　　〜中略〜
});
</script>

問題は、6～10行目の部分。見て分かるように、myPlayListという変数に配列を渡しているのですが、ここで僕は、PHPを使って、DBから取って来た楽曲データをループで回して配列作ってるんですよ。

で、肝心なのが8行目の最後。ここにコンマが入ってますよね。

どうやらこれが原因だったようです。このたった一文字のためにずっと悩まされていたと思うと、もう情けないやら情けないやら……情けないです。でも、そういうこともありますよね。だって人間だもの。



あれが実際に動作すると、配列はこんな感じになります。

var myPlayList = [
    {name:"Orange Horizon",filename:"/mp3/orange_horizon.mp3"},
    {name:"Silent Drop",filename:"/mp3/silent_drop.mp3"},
    {name:"Yellow Carnival",filename:"/mp3/yellow_carnival.mp3"},
    {name:"Run Away",filename:"/mp3/run_away.mp3"},
    {name:"Planet",filename:"/mp3/planet.mp3"},
    {name:"Bell",filename:"/mp3/bell.mp3"},
]

まあ、ループで回してるんだから当然ですよね。

ここで注目したいのが、最後のコンマ、bell.mp3の後ろにあるコンマです。
ここにコンマがある場合、実は配列の解釈がIEとそれ以外（FirefoxとかOpera）では違うみたいなんですね。実際にアラートを出してみれば分かるんですが、配列の長さを調べてみると、こうなります。

//Firefox
alert(myPlayList.length); => 6

//IE
alert(myPlayList.length); => 7

そうなんです。コンマの後ろに何もない場合、Firefoxだと何もないものとするんですが、IEは空の要素としてカウントしてしまうみたいなんですね。だから結果が１多い。これが正常に動かない原因だったみたいです。

いやぁ……これは全然気づかなかったわ。ちゃんと配列に入ってる、おっけ！　ってな感じでもうここはそれ以上チェックしてなかったですからね。余計なコンマがあったなんて、失念も失念ですわ。

PHP側でこのmyPlayListに入れる配列の形を文字列で生成してから渡しても良い……というか、本当はそっちの方がいいと思うんですが、今回は応急処置的な感じで、ブラウザがIEだったら配列の要素数を-1してます。それが上記のソースの中の12～15行目にあたる部分です。

/*@cc_on!@*/false

たったこれだけで、IEだとtrueが返って来る構文が書けるみたいです。お手軽だね。
まあ、そのうち別の感じに、つまり上で書いたようにPHP側できちんと処理する感じに直すかもしれません。ってか、直そう。



そんなこんなで、とりあえず無事に解決したでございますよ。実際に聴いていただけるかどうかは別として、動作は問題ないと思うので、良かったら動作確認でもしてみてください。

いや、ほんと直って良かった。

ほんと、良かった。