特集:アドビのAjaxフレームワーク「Spry」を使ってみよう
Ajaxフレームワーク「Spry」で作る「リンク集2.0」
田中 孝太郎
dotimpac.to
2006/6/21
Spryフレームワークをダウンロードする |
Spryフレームワークは5月11日にファーストリリースが公開された後、6月8日にリリース1.1にバージョンアップされ、いくつかの仕様変更や機能追加が行われている。今回のサンプルではリリース1.1の仕様に準拠した。
- http://labs.adobe.com/technologies/spry/を開く
- 「Get prerelease 1.1 of Spry framework now」をクリック
- Adobe IDを持っていなければ、取得するために情報を登録する
- Adobe IDとパスワードを入力して送信する
- Spry framework 1.1をダウンロードする
■Spryフレームワークで「リンク集2.0」を作る
SpryでXMLデータを表示する簡単なサンプルとして、いわゆるリンク集を作ってみよう。いまやほとんど見かけなくなったリンク集ページを今回はわざわざAjaxフレームワークで開発し、「リンク集2.0」といい張ってみたい。
■XMLデータを用意する
最初に、リンク集で表示するためのサイトのリストを、XMLデータで用意する必要がある。形式のそろったXMLであれば、どのような内容であっても構わない。今回は以下のようなXMLを用意することにした。
|
HTMLにダイナミックリージョンを埋め込む |
次にHTMLページを書き、その中にダイナミックリージョンを設定する。HTMLページ自体のデザインはどのように行ってもよく、今回の例ではリンク集のリストを表示する部分に、Spry独自の記述を追加してダイナミックリージョンに指定する必要がある。また、Spryのライブラリを読み込み、XMLをデータセットに変換するJavaScriptの記述も必要だ。以下に説明していこう。
|
head部にJavaScriptの記述がある。“xpath.js”と“SpryData.js”がSpryフレームワークのライブラリソースだ。Spryを使用する場合、これらを必ず読み込まなくてはいけない。また、xpath.jsの機能をSpryData.jsが使用しているため、必ず“xpath.js”の後に“SpryData.js”を読み込む必要がある。
|
この部分が、XMLファイルを読み込みSpryデータセットを生成するためのJavaScriptコードである。SpryData.jsライブラリに含まれる「Spry.Data.XMLDataset」にXMLファイルのパスを指定してデータセットを生成している。
Spry.Data.XMLDataSetの2つ目の引数は、XMLデータのどの部分をデータセットとして生成するかを指定するパラメータで、XPath(XMLドキュメントの特定部分をアドレッシングするために定義されたパス形式)によって指定する。後に解説するが、このパス指定に変数を含めて可変にし、データセットを非同期に読み込ませることもできる。今回は前節で作成したXMLファイル「linkpage_two_point_zero.xml」のリンクアイテムのパス“/linkpage_two_point_zero/site”を直接指定した。
|
続いて、ダイナミックリージョン部を見ていこう。上に示した部分がダイナミックリージョンになるが、ご覧のとおり、基本的にはdiv、ul、liといった通常のタグになっている。これらのタグにSpry独自の属性を埋め込んでおくと、Spryがロード時にその情報を検知し、データセットの内容を指示どおりに埋め込んでくれるわけだ。
始めにあるdivタグに、「spry:region="dsLinks"」という属性がある。これがダイナミックリージョンの領域を指定する属性だ。この場合、このdivタグに含まれる内容が、ダイナミックリージョンとして機能する。ダイナミックリージョン領域内では、指定されたデータセットのデータを参照する記述形式が使えるようになるため、このダイナミックリージョン内では、データセット“dsLinks”を表示するためのテンプレートを、通常のHTMLとして記述することになる。
今回のサンプルのデザインでは、XMLで用意されたリンク集をリスト形式で並べることにしている。通常どおりULタグの中にLIタグを列挙してリストを作るわけだが、ここでSpryでデータの繰り返しを表現する「spry:repeat」という属性を使っている。
|
liタグに書かれた「spry:repeat="dsLinks"」という指定によって、このliタグはデータセット“dsLinks"のデータの数だけ繰り返し表示されることになる。例えば、後にXMLファイルのリンク集データを追加したとしても、同じ形式で表示が可能だ。これまでならサーバ側のプログラムを設置または開発しなければ難しかった頻繁に更新されるデータの動的な表示を、フレームワークに従いXMLファイルを用意することで、プログラミングなしで実現できることがSpryの利点の1つだろう。
また、li要素のidに「ds_RowID」というデータを入れているが、これはSpryがデータセットを作成する際に各データに挿入するデータ番号であり、データアイテムごとにユニークな値になるため、このようにidなどのナンバリングに使用することができる。
aタグでリンクを指定している行では、ダイナミックリージョン内でのデータ参照を使用している。{url}や{site_name}というブレースで囲まれた記法がそれだ。
XMLファイルでは、以下のように記述している。
|
データセット「dsLinks」はこの<site>タグの内容を1つのアイテムとして持っている。従って、このダイナミックリージョン内では{url}や{site_name}などのデータを参照できることになる。ここでは使用してないが{language}や{tag}といったほかのデータを参照して表示することもできる。
このサンプルを表示すると、以下のようになる。しかしこれだけではAjaxフレームワークの恩恵はとりたててないので、次のページではSpryの機能をもっと活用した「リンク集2.1」を作成してみたい。
画面1 リンク集2.0(WindowsIE6、Firefox1.0、Safari1.3.1で動作確認済) |
2/3 |
INDEX | ||
AdobeのAjaxフレームワーク「Spry」を使ってみよう | ||
Page1<Spryフレームワークを知ろう/Spry framework for Ajax/XMLデータとダイナミックリージョン> | ||
Page2<Spryフレームワークをダウンロードする/Spryフレームワークで「リンク集2.0」を作る /XMLデータを用意する/HTMLにダイナミックリージョンを埋め込む> |
||
Page3<Spryフレームワークで「リンク集2.1」を作る/ダイナミックリージョンの表示制御属性/詳細データを非同期ロードする/最後に> |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|