entry

mootools,0と1の間のデザイン

date: 2007/05/27 19:59 | modified: 2009/01/21 18:09

導入

2009年01月21日追記: このサイトのフレームワークは現在、mootoolsではなくjQueryを使用しています。

このサイトでは,画像拡大やタグクラウドの表示に「prototype.js+script.aculo.us」を使っていました.しかしファイルサイズが合わせて100KB近くもあり,訪問者が毎回読み込むことを考えると,現実的な選択とは言えませんでした.
そんな折,このサイトのベースデザインを作ったDRSIのデザイナー氏が,「mootools」というJavaScriptフレームワークを使ってサイトを作ったので,このサイトもmootoolsへ乗り換えてみました.

mootoolsの利点

prototype.js+script.aculo.usと比較して軽量
mootoolsは軽量で,エフェクトのライブラリを含めても40KB程度です.
細かくパーツ分けされている
高度にモジュール化されているため,必要なコンポーネントだけをダウンロードしてファイルサイズをさらに減らすことができます.また圧縮率も自分で決めることができます.
欲しい機能が簡単に導入できる
スムーススクロール(同一ページ内のアンカーへ滑らかにスクロールする機能)やツールチップ(リンクにマウスオーバーした時にリンク先の情報が表示される機能)などがすでにプラグインとして提供されていて,簡単に自分のサイトに組み込むことができます.
ドキュメントが充実している
英語ではありますが,コンポーネントごとに整理されたドキュメントが充実しています.また,デモも豊富です.

サンプルサイト

DRSI: Design ReSolution Institute

DRSI_ScreenShot

普通のサイトならばアンカーをクリックやマウスオーバーすると「パッ」と切り替わってしまいますが,mootoolsのトランジション・エフェクトのおかげで滑らかに動いています.ローディングなどの細かいところもこだわっているようです.

Windows IE7とFirefox2でのみ動作確認しているようです.IE6では表示が崩れていました.

感想

このサイトで使っていたprototype.jsベースのエフェクトは,mootoolsベースに完全に移行できました.戸惑ったのは,toggleエフェクトの使い勝手などの細かい仕様の違いくらいです.
軽量で手軽に楽しい視覚効果が得られるので,かなりオススメです.

参考

このエントリーは以下のリンク先の記事を参考・引用して書かれています.

関連記事

respond