特集：AdobeのAjaxフレームワーク「Spry」を使ってみよう

Ajaxフレームワーク「Spry」で作る「リンク集2.0」

田中 孝太郎
dotimpac.to
2006/6/21

アドビのAjaxフレームワーク「Spry」。さっそくダウンロードして、簡単なサンプルを作成しながら、その機能を探ってみよう（編集部）

Spryフレームワークを知ろう

　先月5月11日、米アドビシステムズが発表したAjaxフレームワーク「Spry」は、最低限のプログラミングでAjaxスタイルのWebページ構築を可能にする、Webデザインフレームワークだ。今回は数あるJavaScriptライブラリの中でもユニークなフレームワークであるSpryを紹介し、実際にSpryを使ったサンプルを解説しながらその機能を探っていきたい。

■Spry framework for Ajax

　 Ajaxが騒がれた昨年から今年にかけて、Ajaxアプリケーション開発のためのJavaScriptライブラリ、フレームワーク、開発環境などの開発が盛んだ。多くのオープンソースコミュニティがライブラリやフレームワークを公開しており、「Prototype」や「script.aculo.us」といったライブラリはすでにメジャーな位置を占めて多くのアプリケーションで採用されている。

　また、いくつかの企業では自サービスのために開発したライブラリやツールキットの無償公開を開始した。米Yahooが提供、サポートを行っている「Yahoo UI Library」などが有名だろう。米Googleも、アプローチは違うもののJavaScriptを用いたAjaxアプリケーションの開発ツールキットである「Google Web Toolkit（参照記事：JavaをAjaxに変換するグーグルのGWTを使ってみよう）」を5月に公開している。

　米Adobe Systemsが提供を開始したAjaxフレームワーク「Spry framework for Ajax」も、大きな流れとなりつつあるインタラクティブなWebサイトデザインに対応するために開発された、Webデザインフレームワークだ。Webデザインソフト「Dreamｗeaver」などを開発するAdobe Systemsが提供するだけあり、SpryはプログラマーではなくWebデザイナーが使用することを想定しており、基本的にはHTMLを加工するだけで、動的な表示の更新やインタラクティブな機能を実現できるようになっている。

　将来的にはDreamweaverやPhotoshop、 ImageReadyなどのAdobeソフトに組み込まれ、Webデザインの一部として使用されていくのだろうと考えられるが、現在公開されているものはプレビュー版であり、最低限のライブラリが提供されているにすぎない。しかし、SpryにはほかのJavaScriptライブラリやフレームワークには見られないユニークな仕組みを備え、XMLファイルを用意するだけで動的に更新されるWebページを作ることができる。そこで今回は、Spryフレームワークの概要を解説し、リリース1のSDKを実際に使って、サンプルを開発してみたい。

XMLデータとダイナミックリージョン

　 Spryフレームワークが想定しているのは、同じ形式のデータアイテムを逐次読み込み、それを場合に応じて表示、操作できるようなダイナミックなWebページだ。Ajaxフレームワークだからといってどんなページでも簡単に作れるというわけではなく、データのリスティングや、その動的な切り替えなどに特化したものであることにまず注意しよう。このような性質のページを動的に管理するために、Spryでは「Spryデータセット」と「ダイナミックリージョン」という考え方が導入されている。

　Spryデータセットとは、SpryのライブラリがXML形式で書かれたデータファイルを読み込んで生成するJavaScriptのオブジェクトのことだ。このデータセットの内容を後述するダイナミックリージョンに表示するというのが、Spryを使ったWebページの基本的な動作である。読み込むXMLは、表示するデータのために用意しても、あるいはRSSのような他サービスから生成されたものでも構わない（ただし通常のJavaScriptと同様にドメインの制約があるため、別ドメインのサーバから直接データを読み込むことはできない）。

　ダイナミックリージョンは、SpryデータセットをJavaScriptで動的に表示するためのテンプレートだと思ってもらえばよいだろう。Spryでは、特殊な属性を持ったHTMLタグそのものがSpryの表示テンプレートとなり、ページがロードされSpryデータセットが生成された後、このダイナミックリージョン部が変換されてデータが表示されるわけだ。

　このデータセットとダイナミックリージョンの連携によって、Spryフレームワークによる動的なページ表示が行われる。データセットはデータの変更や状態の変化を監視しており、変化に応じてダイナミックリージョンのデータ表示を再更新することができる。このような動的な表示の変化を、JavaScriptの記述をほとんどしないまま実現できるところがSpryフレームワークの真価だろう。

図1　SprayフレームワークがXMLとHTMLをダイナミックなAjaxページを生成させる

　以上がSpryの概略だが、概念の説明だけでは分かりづらい部分もあるので、次のページでは実際にSpryを使ったサンプルを見ながら、Spryがどのように動いているのか確かめていこう。

1/3

INDEX
AdobeのAjaxフレームワーク「Spry」を使ってみよう
	Page1＜Spryフレームワークを知ろう／Spry framework for Ajax／XMLデータとダイナミックリージョン＞
	Page2＜Spryフレームワークをダウンロードする／Spryフレームワークで「リンク集2.0」を作る ／XMLデータを用意する／HTMLにダイナミックリージョンを埋め込む＞
	Page3＜Spryフレームワークで「リンク集2.1」を作る／ダイナミックリージョンの表示制御属性／詳細データを非同期ロードする／最後に＞

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）