Ajaxな話題

数あるAjaxフレームワークの中でも、もっともエフェクト処理が美しいフレームワークに「Ext.js」があります。
オフィシャルサイトのデモンストレーションを見るだけでも、うっとりするほど動きが美しいことが分かります。

»Ext Documentation Center

しかし、「美しいものにはとげがある」の言葉通り（？）、Ext.jsを利用するのは意外と大変。ドキュメントも親切なようで、大事な情報がいまいち載っていなかったりします。
そこで、備忘録もかねて今回「ダイアログを表示する」というスクリプトにチャレンジしてみたので、やり方を紹介しましょう。

1. Ext.jsを手に入れる

まずは、Ext.jsをダウンロードします。
»Download Ext JS Library

「Build your own Ext」という、必要な要素だけを選んでダウンロードできる機能もありますが、いまいちなにが必要か分からなかったので、ここでは全部入りをダウンロードしました。

2. JSファイルと CSSファイルの組み込み

次に、JSファイルと CSSファイルの組み込み。これが、非常に難しく見えて非常に簡単でした。JSファイルも CSSファイルもたくさん収録されているのに、ダイアログの表示に必要なファイルがどれかというのが、ドキュメントに書いていなかったのです。いろいろ試行錯誤したり、サンプルサイトのソースを見て理解できました。「-all」を使えばよいのでした。
というわけで、次のように組み込みます。

<link rel="stylesheet" type="text/css" href="_js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="_js/ext/ext-all.js"></script>


また、Ext.jsは単体でも利用できますが、Prototype.js、jQuery、Yahoo! UI Libraryのいずれかを利用している場合は「アダプタ」を利用して、それらのフレームワークを利用することができるようです。私の場合、Prototype.jsを使っているので次のようにしてアダプタを組み込みます。

<script type="text/javascript" src="_js/prototype.js"></script>
<script type="text/javascript" src="_js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="_js/ext/ext-prototype-adapter.js"></script>


3. ダイアログの元を作る

次に、表示させるダイアログの内容を記述します。ページ内の適当な場所に作って、「style="display: hidden"」などとして隠しておくと良いでしょう。

<div id="areaDialog">
<div class="x-dlg-hd">ダイアログのタイトル</div>
<div class="x-dlg-bd">
ダイアログの内容
</div>
</div>


「x-dlg-hd」と「x-dlg-bg」というクラス名のついたdivに、それぞれ内容を入れ込み、id属性を付加した

いまさらながら、Prototype.jsを使っていろいろなものを作っています。
Ajaxで、各種画面パーツにイベントを割り当てる場合、通常は

などとするか、

などとしていました。しかし、Prorotype.jsにはクロスブラウザでイベントを割り当てる「Event.observe」というメソッドがありました。次のように記述します。

となります。これの方がスマートかもしれませんね。また、ファンクションにパラメータを渡したい場合は、

と呼び出せば大丈夫でした。正しい使い方なのか微妙ですが、ひとまず便利そうなので使ってみようと思います。

私もそのすばらしさに圧倒されて、「使います」宣言をした「Apry framework for Ajax」ですが、Adobeの林さんが公開している、自身のBlogでSpry1.6についてのアナウンスをしていました。

Takesato Hayashi: Spry 1.6 Preview

それによると、Spry1.6には「ツールチップ」のwidgetが搭載されるのだとか。ツールチップは、Yahoo! UI Libraryなどの一部のフレームワークで利用できますが、非常にシンプルなものでなかなか使い道がありませんでした。

しかし、Spryのツールチップは文章はもちろん、画像を張り込むこともできますし、また表示の時にフェードインなどのエフェクトをかけることもできるようです。これは非常に楽しみな機能です。すでにソースもダウンロードできるようなので、試してみたい方は先行してみてはいかがでしょうか？　私も時間ができたら試してみます。

Spry 1.6 Preview（タイトル自体「Spry 1.5 Preview」になっています。誤植？）

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