Adobe Spryがすばらしい 5つの理由

Ajaxのフレームワークは、Prototype.jsをはじめとして数多くあります。
私も、これまで「Protptype.js」「jQuery」「Motchkit」「Yahoo! UI Library(YUI)」と使ってみて、今は web creatorsの連載でもYUIを勧めています。

しかし、つい先日発売された「Adobe Creative Suite3（CS3）」が発売され、Dreamweaver CS3を触っているうちに、Adobe Spryがあまりにもすばらしい仕上がりになっていたので、思わず乗り換えてしまいました。

というわけで、これからは Spryにします宣言とともに、なにが良い点なのか、流行のブログタイトルで5の理由を挙げてみます。

1.重すぎない

Spryはダウンロードファイルが 3.5MB程度、必要な.jsファイルや素材（Widget）は 700KB程度で収まります。YUIの場合はbuildフォルダだけで 4.2MB。Spryのサンプルなどをすべて含めた容量よりもさらに大きいです。
とはいえ、これは YUIが、1つのライブラリにつき「normal」「-min」「-debug」という3種類のファイルを同梱している上、画像素材なども含んでいるため単純な比較はできないのですが、しかし、いちいち必要なファイルだけを選んでアップロードするよりは、やっぱりどさっとアップロードしたいところなので、この手軽さはうれしいです。

script.aculo.usは、150KB程度しかないので、Spryが「軽い」とまでは言えませんが、「重すぎない」というのがバランス的に良い感じでした。

2.CSSを汚さない

Spryは、各Widgetで定義されているCSSがルールに則ったクラス名で定義されているため、既存のWebページに組み込んでも崩れることはまずありません。
しかし、YUIの場合は要素自体に CSSを指定しているものなども多々あり、調整がものすごく大変でした。

CSS自体もシンプルに作られているため、上書きなどもそれなりに楽なのがよいですね。

3.シンプルなコード

たとえば、Spryでエフェクトをかける場合、次のようなコードで実現できます。

effectSlide = new Spry.Effect.Slide(’property1′,{duration: 500,from:’0′,to:’200px’});
effectSlide.start();

しかし、YUIでは非常に多くのコードを記述しないと実現ができず、非常に大変でした。しかも、たとえばエフェクトを「スライド」から「ハイライト」に変える場合には

Spry.Effect.Highlight

に変えるだけで、後はパラメータを調整すれば変えることができます。

4.機能が豊富でクオリティが高い

SpryのWidgetには、現在「アコーディオン」「タブウィンドウ」「フォームバリデート」「折りたたみパネル」「メニューバー」があります。
どれも非常にクオリティが高く、実装が簡単でキーボードでも操作ができるなど、アクセシビリティにも考慮されています。
しかも、スクリプトを記述する必要はほとんどなく、決められたクラス名に従ってHTMLを組むだけ。非常に簡単です。

5.Dreamweaverとの連携がすばらしい

そして、今回Spry採用の最大の要因となったのは、Dreamweaver CS3(DW)との親和性が非常に高かったこと。
Spryは、発表された当初からDWに組み込まれるだろうと予想していましたし、噂もされていましたが、ここまでしっかり組み込んでくるとは思いませんでした。

フォームを作るときに、「Spry」タブからテキストフィールドを選ぶだけで、JavaScriptによるバリデートが走り出す。しかも、バリデートの内容はプロパティパネルで簡単に設定できるのです。

Spryのファイルは必要なものだけを指定されたディレクトリにコピーしてくれ、さらにすばらしいのがそのコントロールを消すと「必要なくなったけどファイル消しますか？」と聞いてくれる。後のことをしっかり考えているのがよいですね。

メッセージなどは、ディフォルトではちょっと使えないメッセージですが、コードビューで簡単に書き換えられますし、CSSで見た目も簡単に変更可能。チェックをするタイミングなども設定できて、非常に高機能です。

これなら、フォームバリデートのためだけにもSpryを是非とも使っていきたいところ。

というわけで、Spryの魅力を語ってみました。もちろん Prototype.jsの柔軟性にはかなわないところがありますが、そこはそれ、Prototype.jsと一緒に使っても今のところは、全く不具合がないので両方使っていけばよいのです。

これはよいフレームワークに仕上げてくれました。今後、機会があったら使い方なども紹介していこうと思います。

»Adobe Labs - Spry framework for Ajax