導入
2009年01月21日追記: このサイトのフレームワークは現在、mootoolsではなくｊQueryを使用しています。
このサイトでは，画像拡大やタグクラウドの表示に「prototype.js+script.aculo.us」を使っていました．しかしファイルサイズが合わせて100KB近くもあり，訪問者が毎回読み込むことを考えると，現実的な選択とは言えませんでした．
そんな折，このサイトのベースデザインを作ったDRSIのデザイナー氏が，「mootools」というJavaScriptフレームワークを使ってサイトを作ったので，このサイトもmootoolsへ乗り換えてみました．
mootoolsの利点
- prototype.js+script.aculo.usと比較して軽量
- mootoolsは軽量で，エフェクトのライブラリを含めても40KB程度です．
- 細かくパーツ分けされている
- 高度にモジュール化されているため，必要なコンポーネントだけをダウンロードしてファイルサイズをさらに減らすことができます．また圧縮率も自分で決めることができます．
- 欲しい機能が簡単に導入できる
- スムーススクロール（同一ページ内のアンカーへ滑らかにスクロールする機能）やツールチップ（リンクにマウスオーバーした時にリンク先の情報が表示される機能）などがすでにプラグインとして提供されていて，簡単に自分のサイトに組み込むことができます．
- ドキュメントが充実している
- 英語ではありますが，コンポーネントごとに整理されたドキュメントが充実しています．また，デモも豊富です．
サンプルサイト
DRSI: Design ReSolution Institute
普通のサイトならばアンカーをクリックやマウスオーバーすると「パッ」と切り替わってしまいますが，mootoolsのトランジション・エフェクトのおかげで滑らかに動いています．ローディングなどの細かいところもこだわっているようです．
Windows IE7とFirefox2でのみ動作確認しているようです．IE6では表示が崩れていました．
感想
このサイトで使っていたprototype.jsベースのエフェクトは，mootoolsベースに完全に移行できました．戸惑ったのは，toggleエフェクトの使い勝手などの細かい仕様の違いくらいです．
軽量で手軽に楽しい視覚効果が得られるので，かなりオススメです．
参考
このエントリーは以下のリンク先の記事を参考・引用して書かれています．
- mootools – home
- Mootools 1.0+ Plugins, Examples, Tutorials & Demos List
- Slimbox, the ultimate lightweight Lightbox clone » digitalia.be
