AppleのサイトとかiTunesとかiPodとかOsXとかで活躍中のインターフェイス、カバーフローをwebページで再現できるAjax、MooFlowと格闘中。
大問題その１！
インストールの仕方がまったくわからない（解決！）
まずMooFlowのMooという名前から、これはMooToolsが必須であることは間違いない！と、いうことで早速MooToolsからファイルをゲット。ところが、MooTools自体をよく理解していないので、早速ここで２時間スタック。
なんでも
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
だそうだ。ふーん。
なんか、よいことが起きそうな予感。
MooToolsのDownloadより早速、ブツをゲット。ところでcoreってなんだろとかおもいつつ、MooFlowのファイル群とともにサーバーにアップして、MooFlowのDocumentにあるように設定してみた。
うーん、まったく動かん。
よくよく色々な文献を読んでみると、MooToolsはcoreとプラグインに分かれていて、必要なライブラリを追加する必要があるようだ。MooFlowのDocumentの一番下をよく見ると、SliderっていうのとAssetsというのが書いてあった。この表記の仕方はもはやイジメですな。
で、改めてmootools-1.2-more.jsっていうのをSliderとAssetsで作ってサーバーにアプ。
動いているようで、ちゃんと動いてない。
大問題その２！
イメージが読み込まれない！読み込み中のクルクル回るグラフィックは表示されるようになったものの、その先にまったく進まず。うーん、HTMLの表記が悪いのか、なんなのか。ためしにIEで見てみたら、表示は崩れ気味のものの動いている風！スタック３時間目、こんなサイトを発見！投稿を読んでみると、FireFoxのエラーコンソールに表示されている内容に激似。ふむふむとか言いながら投稿を読み進んでみたけど、さっぱり何のことやら。でも、どうやらMooFlow本体の記述に問題があるような気配。さらに数時間後ミラクル発生。どうやらなんかの宣言の表記の仕方に問題があるらしく、
var i = arg.img.clone();
を
var i = new Element(‘img’).setProperty(‘src’, arg.img.src);
に変えたら直ったよ的な投稿を発見。
で、該当する文字列を探してみたけどこれがなかなか見つからず、ついに396行あたりに発見。
正確には
i = arg.img.clone();
を
i = new Element(‘img’).setProperty(‘src’, arg.img.src);
に書き換えてみた。
FireFoxでもちゃんと動いた！
大問題その３！解決中
画像に設定したリンクが反応しない
大問題その４！解決
これはよく読めばわかると思うけど、全体の天地のサイズの設定の仕方がわからない。
mooflow.js本体のheightRatioを調節することで解決！
うーん、先はまだまだ長そ。トホホ。
