特集：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
また、いくつかの企業では自サービスのために開発したライブラリやツールキットの無償公開を開始した。米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」を作る／ダイナミックリージョンの表示制御属性／詳細データを非同期ロードする／最後に＞ | ||
- 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データの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
