The Mad4Milk teamは3日(米国時間)、moo.fxの最新版となるmoo.fx version 2.0(以降、moo.fx2)を公開した。moo.fx2は超軽量のJavaScriptエフェクトライブラリ。mootoolsの一環として開発されているが、prototypeとともに動作するようにも作成されている。prototypeは"Ajaxian.com 2006 Survey Results"調査結果において43%の支持を得ている1番人気のAjaxフレームワーク。moo.fxは11%の支持を得て5位にランクインしている同じく人気のあるJavaScriptエフェクトライブラリ。

同チームは9月11日(米国時間)、JavaScriptライブラリ集であるmootoolsを公開。moo.fxとmootoolsはときに同じ意味として使われるが、moo.fxはより細かい成果物の名称として、mootoolsはmoo.fx以外のコンポーネントも含めて全体をさす場合の名称として使われている。moo.fxもmootoolsThe MIT Licenseのもとでオープンソースソフトウェアとして公開されている。

moo.fx2の新機能

moo.fx2ではいくつもの新機能が追加されたほか、アーキテクチャが変更されている。たとえば新しくCSSプロパティを変更するためのFx.Styleコンポーネントと、一度にたくさんのCSSプロパティを変更するためのFx.Stylesコンポーネントが追加されている。この2つのコンポーネントはエフェクトを操作するにあたって重要であり、ベーシックパッケージであるmoo.fx.jsに内包されている。

moo.fx.packには要素のカラープロパティを変更するためのFx.Colorコンポーネントとdiv要素のコンテンツをスクロールするためのFx.Scrollコンポーネントが追加されている。

moo.fx.utilsには依然としてFx.Height、Fx.Width、Fx.Opacityなども含まれているため、数値やパディング、マージ、ボーダーなどをトグルしたい場合に使うことができる。moo.fx.transitionsも依然として用意されているため、カスタマイズしたルックスが欲しい場合は同パッケージを活用すればいい。

moo.fx2は大幅なアーキテクチャの変更が実施されているため、従来のバージョンとの互換性はない。以前のバージョンを対象にして作成されたスクリプトを使う場合、以前のバージョンをそのまま使う必要がある。

ダウンロード

moo.fx2はprototype用とmootools用の2種類が用意されている。すでにprototypeを採用している場合はprototype用を、moo.fx2だけを採用し軽量なサイトを実現したいならmootools用を採用するといい。

図1 mootoolsのダウンロードページ – 含めたいコンポーネントを選択し、スクリプトを圧縮率を指定してダウンロードを実行、オンザフライで成果物が生成されて提供される仕組みになっている

mootools用をダウンロードするのは簡単だ。mootoolsのダウンロードページから直接成果物を生成してダウンロードすればいい。最新のmoo.fx2はすでにmootoolsに内包されている。moo.fx2は実質的にmootoolsのコアライブラリであるため、今後はmoo.fx2もmootoolsもバージョンをそろえてリリースされていくのではないかとみられる。

prototype用を使う場合はprototype.jsかまたはprtotype.lite.jsとともに動作させる必要がある。moo.fx2は最低でもmoo.fx.jsが必要で、moo.fx.pack.js、moo.fx.utils.js、moo.fx.accordion.js、moo.fx.transitions.jsは必要に応じて用意すればいい。mootools用と同じく成果物はmootoolsのダウンロードページから生成して取得すればいい。

mootoolsはダウンロードの方法に特徴があり、コンポーネントの選択と圧縮率を指定することができる。開発時はフルコンポーネントを非圧縮でダウンロードし、ソースコードを参考にしながら使うといい。サイトにデプロイする段階で最小のコンポーネントを最大圧縮でダウンロードして使うといいだろう。