Life is beautiful

　わずか営業日二日という、私としては例外的に短い日本出張の後は、シアトルには帰らずポートランドに直行し、Railsカンファレンスに参加だ。

　時差ぼけの頭でObjective-Cのプログラミングは辛いので、眠気覚ましに「Javascriptでコジャレたホームページ作り」に再挑戦。

　先日のものより改良したのは以下の三つ。

1) サムネールを個別の画像として取得せずに、一つの画像として取り込んで切り刻んで表示
2) ダミーのイメージファイルを使って、テキストのアンダーラインとアニメーション領域の下部を一致させる
3) ianime.jsのベジエ・アニメーション機能を最大限に使って、よりオシャレにする。

　出張中で仮想Windowsを積んでいないMacBookしかないので、Mac版のSafari/Firefox/Operaでしかテストをしていないが、それなりに動いている。それに加えて、1)のおかげでiPhone上のSafariでもちゃんと動くようになったのがうれしい。デモは以下のリンクをクリックすると別ウィンドウで始まる。

　ブラウザーのコンパチリビティには気をつけて書いたつもりなので、大抵のブラウザーでは動くはず。ただし、１）によりIE6のキャッシュのバグが回避できたかどうかは未確認。予想される一番の問題点は、あまりにたくさんの画像を同時に動かしているために、遅いマシンではフレームレートが極端におちてしまうこと（iPhoneだと３〜５frame/secになる）。比較的遅めなマシンでのアニメーションのスムーズさなどに関する感想をいただけるとありがたい。

　ちなみに、2)の解決方法のもとになったのは、コメント欄でいただいた「staticを使えば？」というもの（感謝、感謝）。最終的にはstaticは使わなかったのだが、absoluteでアニメーションエリアにオーバーラップさせたDIVの中で、アニメーションエリアと同じ高さの画像（ただし、visibility:hiddenなので非表示）とテキストを並べることにより、ベースラインの位置を任意にコントロールするというもの（例えば、ページの上から120pxの所にベースラインをあわせてテキストを表示したい場合、style="position:abolute;top:0px;0px"のDIVの中にstyle="visibility:hidden;width:1px;height:120px"なダミーの画像と並べてテキストを書けば良い）。思いつくまでは大変だが、実装はとても簡単というまさにコロンブスの卵的な手法だ。