この4月から私もマカーになったので、CoverFlowのインタフェースにも慣れてきた（と、言いつつほとんど仮想マシンのubuntu使っているけど）。また、iPodもCoverFlowなインタフェースを持っているので、ちょっと作ってみるのがいいんじゃない？ということで、簡単にFlexで作ってみた。

ネタは、写真をCoverFlowで表示するというもの。Flex CoverFlowで遊んでみた – l4lを参考にして、作ってみた。なんかsearchResultのループで回すところがなんか納得できなかったので、そこだけは自分で簡単にやってみた。

しかし、元ネタのサンプルFlex CoverFlow performance improvement, Flex Carousel Component, and Vertical CoverFlowを見ると、Carouselの方がイカしているじゃない？というわけでこちらを採用。Carouselという言葉の訳では、回転木馬らしいのだけども、「回転木馬」って言われてもしっくりこないので、とりあえずCoverFlowの亜種と言ったらいいのかしらん。

で、こんな感じ。例によって、写真は、私のホンジュラスのダイビングの成果。

サーバサイドのソースは、こう。単純にディレクトリの中のファイルを適当なXMLで出力しているだけ。

formatOutput = true;

$path = 'http://' . $_SERVER['HTTP_HOST'] . '/playgrounds/coverflow';
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        $root = $doc->createElement('images');
        $root = $doc->appendChild($root);
        while (($file = readdir($dh)) !== false) {
            if ($file === '..' or $file === '.') {
                continue;
            }
            $image = $doc->createElement('image', "$path/$dir/$file");
            $root->appendChild($image);
        }
        closedir($dh);
    }
}
echo $doc->saveXML();

そして、Flex側のコードは、こんな感じ。Doug McCuneさんのswcファイルはインクルードしておく。

画像をクリックするとtestという関数を呼び出してalertを出すようにしているのだが、その関数で画像を大きくするとかの処理を書いたら、もう少し使える仕組みになるかな。

うーむ。しかし、いい写真だなぁ。