導入

このサイトでは，画像拡大やタグクラウドの表示に「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