Adobe SpryとDreamweaver CS3であのエフェクトもサクサク：魅力のAjaxライブラリAdobe Spry入門

図1-4

　ここまで、全くコードを記述することなく出来上がってしまった。その上、Spryをダウンロードする必要もなく、コピーしたり組み込む必要もない。DWCS3にあらかじめSpryのファイルが同梱されており、その都度必要なファイルだけをコピーしてくれる仕組みなのだ。

　念のためコードを確認しておこう。次のようなコードが自動生成される。

　MM_から始まる独特なファンクション名がつけられているが、実際の動作は前回のスクリプトの通り、Spryの標準メソッドである「DoFade」が使われていることがわかる。ちなみに「MM_」はDreamweaverの元々の開発元である「Macromedia」の頭文字をとった名前で、 Dreamweaverではよく使われるキーワードだ。

　このように、Webデザイナであれば、全くSpryの存在を意識することなく、高度なエフェクトを簡単に実装することができる。しかも、クロスブラウザなスクリプトであることが保証され、プログラマはコードを自由に編集することができる。

XMLを表示する

　次に、XMLファイルを表示するテーブルを作ってみよう。まずは、適当なXMLファイルを作成する。ここでは、Spryの「data」フォルダにある「scores.xml」を利用した。

    
        Blue Team
        12
        43
        12
        23
        6
    
...

　新しいHTMLファイルを作成して、XMLを同じ場所にコピーする。そしたら、「挿入」バーの「Spry」グループの中から「Spry XMLデータセット」ボタンをクリックしよう（図2-1）。図2-2のようなダイアログボックスが表示されるので、それぞれ設定して［OK］ボタンをクリックする。

図2-1

図2-2

　次に、同じバーにある「Spryテーブル」をクリックしよう（図2-3）。今作った「データセット」が設定されているので、下に表示されている列の一覧から「round1」をクリックして［ヘッダーがクリックされたときにソート］チェックボックスをクリックする。これで［OK］ボタンをクリックすれば準備完了だ（図2-4）。

図2-3

図2-4

　適当なスタイルを施して、Webブラウザに表示するとXMLのデータがテーブルとして表示されるようになる。さらに、「Round1」と書かれた見出しをクリックすると、その場で並び替えされるのである。（図2-5）

図2-5

　こちらも作られるJavaScriptコードは、次の1行だけだ。

　しかし、拡張属性やネームスペースの宣言なども含めて、DWCS3がすべて代行してくれるため、非常に心強いと言える。

ウィジットを利用する

　最後にウィジットを使ってみよう。新しいHTMLを作成して、Spryツールバーの［Spry アコーディオン］ボタンをクリックする。これで、アコーディオンの原型ができあがる（図3-1）。

図3-1

　標準は、2つのパネルがあるアコーディオンだが、画面上部の青いラベル部分をクリックすると、プロパティパネルで数を変更することができる（図3-2）。また、各アコーディオンの内容は、ラベルにマウスを重ねると図3-3のようなアイコンが表示されるため、これをクリックすればアコーディオンが切り替わって、内容を編集できるようになる。

図3-2

図3-3

　こうして編集が終わったら、Webブラウザに表示すればアコーディオンパネルが完成だ（図3-4）。その他のウィジットもそれぞれ、簡単に作ることができるので試してみよう。

図3-4

　いかがだろうか。これほど簡単にSpryを操ることができるのだ。これなら、プログラミング経験の乏しいWebデザイナでもJavaScriptを活用した、非常にリッチな演出を施したWebサイトを簡単に作ることができるだろう。しかも、全くDreamweaverに依存することなく、Spryというオープンな技術によって作られているため、改造も容易なのだ。このためだけにも、Dreamweaver CS3を使う価値がある。