「Ajax したい！」Web デザイナーのための Spry 集中講座
第三回：Dreamweaver CS3 でコードを一行も書かずに
「Ajax する」方法
今月号の記事
Dreamweaver CS3 の「バインディング」パネル
これまで2回に渡って紹介してきた Spry Framework を使っての Ajax ページ制作。今までは簡単とは言え Spry のコードを記述してきました。しかし新しい Dreamweaver CS3 では、Spry のサイト作成があたかもビヘイビアを設定するかのごとくボタンをクリックしていくだけで作成できるのです。XML データセットの登録と、それを表示するソート可能なテーブルを、今回は Dreamweaver CS3 で作成します。コードの記述は一切不要。まさに“デザイナーのための Ajax 開発ツール”の登場です。
Dreamweaver CS3 を起動すると、新しく挿入パネルに「Spry」が追加されたことに気づくはずです。また、これまで静的な HTML の場合では無縁だった「バインディング」パネルに「Spry XML データ セット」という項目が設定可能になっています。これはすなわち、Spry がいつでも使用可能な状態に あることを意味しています。
前回使用した XML データがご自身のローカルルートフォルダの中にあることを再度確認し、早速データセットの追加から行っていきましょう。
Spry XMLデータセットの作成
「挿入」パネルの「Spry」タブにある「Spry XMLデータセット」、もしくは、「バインディング」パネルにある［＋］ボタンをクリックして「Spry XMLデータセット」を選択します。以下のようなダイアログが表示されましたらXMLソースの項にある「参照」をクリックし、ローカルルートフォルダの中にあるXMLデータを選択します。
Spry データセットの機能を使用するためには、予め XML 構造を把握したうえで Xpath の指定を自身で行う必要がありました。しかし Dreamweaver CS3 では「スキーマの取得」をクリックすることで XML データの構造をビジュアライズされたものとして把握することができ、さらには Xpath の値によってどのようにデータセットの値が変化するか、実際に「プレビュー」しながら確認することができます。また、同じダイアログ内で各フィールドのデータ形式や読み込み時のソート順指定、データセット内容をキャッシュするかどうかなど、かなり詳細に設定することが可能です。
ここで「OK」をクリックしてデータセットの作成を完了すると、ローカルルートフォルダのルート階層に「SpryAssets」フォルダが作成され、その中に Spry の本体ともいえる xpath.js ファイルと SpryData.js ファイルが書き出されます。このファイルは任意の場所に移動させることが可能です。サーバで動作させる場合は、これらのファイルも忘れずにアップロードしましょう。
Spry データセットの表示
作成したデータセットをページに表示させる方法も、Dreamweaver CS3 なら驚くほど簡単です。「挿入」パネルの「Spry」タブにある「Spry」テーブルをクリックするだけでデータセット挿入用のテーブルを作成してくれます。ダイアログの内容に従うだけで、前回作成した Spry を利用した動的テーブルを簡単に作れます。
こうして作成したテーブルは、以下のような表示になります。これまで一切のコーディング作業を行っていないことをお分かりいただけますよね。Ajax の技術を簡単なコーディングで実現するのが Spry の驚くべき利点でしたが、Dreamweaver CS3 ではそのコーディングすらも一切不要にしてしまったのです。
| Product | Category | Price | @recordid |
|---|---|---|---|
| {Product} | {Category} | {Price} | {@recordid} |
Dreamweaver CS3 の Spry 機能はもちろんこれだけではありません。次号でも引き続き、Dreamweaver CS3 で Ajax ページを制作する方法をご紹介していきます。お見逃しなく。
なお、Spry の最新プレリリース版はAdobe Labsにて入手可能です。最新バージョンの1.5では、ネストされた XML データセットのサポートやエフェクト表示の仕様改善が行われています。進化を続ける Spry の動向についてもご注目ください。
