特集:アドビのAjaxフレームワーク「Spry」を使ってみよう

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


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


 Spryフレームワークをダウンロードする

  サンプルを作るために、まずはSpryをAdobeのサイトからダウンロードする必要がある。現在Spryは下に示すAdobeのラボサイト(英語)からダウンロード可能だ。ダウンロードにはAdobe(Macromedia)のIDが必要になる。まだIDを持っていない場合は先に作成する必要がある。

 Spryフレームワークは5月11日にファーストリリースが公開された後、6月8日にリリース1.1にバージョンアップされ、いくつかの仕様変更や機能追加が行われている。今回のサンプルではリリース1.1の仕様に準拠した。

  1. http://labs.adobe.com/technologies/spry/を開く
  2. 「Get prerelease 1.1 of Spry framework now」をクリック
  3. Adobe IDを持っていなければ、取得するために情報を登録する
  4. Adobe IDとパスワードを入力して送信する
  5. Spry framework 1.1をダウンロードする

Spryフレームワークで「リンク集2.0」を作る
  SpryでXMLデータを表示する簡単なサンプルとして、いわゆるリンク集を作ってみよう。いまやほとんど見かけなくなったリンク集ページを今回はわざわざAjaxフレームワークで開発し、「リンク集2.0」といい張ってみたい。

XMLデータを用意する
  最初に、リンク集で表示するためのサイトのリストを、XMLデータで用意する必要がある。形式のそろったXMLであれば、どのような内容であっても構わない。今回は以下のようなXMLを用意することにした。

<?xml version="1.0" encoding="UTF-8" ?>
<linkpage>
  <site>
    <url>http://www.atmarkit.co.jp/fwcr/</url>

    <site_name>@IT:リッチクライアント &amp; 帳票</site_name>
    <language>Japanese</language>
    <description>この連載記事の掲載サイト</description>
    <tag>atmarkIT Ajax RichClient</tag>
  </site>
  <site>

    <url>http://labs.adobe.com/technologies/spry/</url>
    <site_name>Adobe Labs - Spry framework for Ajax</site_name>
    <language>English</language>
    <description>Spryフレームワークの配布元</description>
    <tag>Adobe JavaScript Framework Spry</tag>
  </site>

≪中略≫
</linkpage>

            

 HTMLにダイナミックリージョンを埋め込む

  次にHTMLページを書き、その中にダイナミックリージョンを設定する。HTMLページ自体のデザインはどのように行ってもよく、今回の例ではリンク集のリストを表示する部分に、Spry独自の記述を追加してダイナミックリージョンに指定する必要がある。また、Spryのライブラリを読み込み、XMLをデータセットに変換するJavaScriptの記述も必要だ。以下に説明していこう。

・HTMLページのリンク

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Spryフレームワークサンプル リンク集2.0</title>
<script type="text/javascript" src="../js/xpath.js"></script>
<script type="text/javascript" src="../js/SpryData.js"></script>
<script type="text/javascript">
var dsLinks = new
Spry.Data.XMLDataSet("xml/linkpage_two_point_zero.xml",
"/linkpage/site");
</script>
<link href="../linkpage.css" rel="stylesheet" type="text/css" />
</head>

 head部にJavaScriptの記述がある。“xpath.js”と“SpryData.js”がSpryフレームワークのライブラリソースだ。Spryを使用する場合、これらを必ず読み込まなくてはいけない。また、xpath.jsの機能をSpryData.jsが使用しているため、必ず“xpath.js”の後に“SpryData.js”を読み込む必要がある。

<script type="text/javascript">
var dsLinks = new
Spry.Data.XMLDataSet("xml/linkpage_two_point_zero.xml",
"/linkpage/site");
</script>

 この部分が、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 id="contents" spry:region="dsLinks" >
  <ul id="link-list">
    <li id="{ds_RowID}" spry:repeat="dsLinks">
      <a href="{url}" target="_blank">
        <img src="http://img.simpleapi.net/small/{url}" width="64" height="64" class="thumnail">

        {site_name}
      </a><br />
      <p class="description">{description}</p>
    </li>
  </ul>
</div>

 続いて、ダイナミックリージョン部を見ていこう。上に示した部分がダイナミックリージョンになるが、ご覧のとおり、基本的にはdiv、ul、liといった通常のタグになっている。これらのタグにSpry独自の属性を埋め込んでおくと、Spryがロード時にその情報を検知し、データセットの内容を指示どおりに埋め込んでくれるわけだ。

 始めにあるdivタグに、「spry:region="dsLinks"」という属性がある。これがダイナミックリージョンの領域を指定する属性だ。この場合、このdivタグに含まれる内容が、ダイナミックリージョンとして機能する。ダイナミックリージョン領域内では、指定されたデータセットのデータを参照する記述形式が使えるようになるため、このダイナミックリージョン内では、データセット“dsLinks”を表示するためのテンプレートを、通常のHTMLとして記述することになる。

 今回のサンプルのデザインでは、XMLで用意されたリンク集をリスト形式で並べることにしている。通常どおりULタグの中にLIタグを列挙してリストを作るわけだが、ここでSpryでデータの繰り返しを表現する「spry:repeat」という属性を使っている。

  <li id="{ds_RowID}" spry:repeat="dsLinks">

 liタグに書かれた「spry:repeat="dsLinks"」という指定によって、このliタグはデータセット“dsLinks"のデータの数だけ繰り返し表示されることになる。例えば、後にXMLファイルのリンク集データを追加したとしても、同じ形式で表示が可能だ。これまでならサーバ側のプログラムを設置または開発しなければ難しかった頻繁に更新されるデータの動的な表示を、フレームワークに従いXMLファイルを用意することで、プログラミングなしで実現できることがSpryの利点の1つだろう。

 また、li要素のidに「ds_RowID」というデータを入れているが、これはSpryがデータセットを作成する際に各データに挿入するデータ番号であり、データアイテムごとにユニークな値になるため、このようにidなどのナンバリングに使用することができる。

 aタグでリンクを指定している行では、ダイナミックリージョン内でのデータ参照を使用している。{url}や{site_name}というブレースで囲まれた記法がそれだ。

 XMLファイルでは、以下のように記述している。

   <a href="{url}" target="_blank">
      <img src="http://img.simpleapi.net/small/{url}" width="64"
height="64" class="thumnail">
      {site_name}
   </a><br />

 データセット「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」を作る/ダイナミックリージョンの表示制御属性/詳細データを非同期ロードする/最後に>



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間