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

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


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

　Spryフレームワークで「リンク集2.1」を作る

　前ページで、Spryの基本的な使用方法であるデータセットの生成、ダイナミックリージョンのレイアウトと、実際の動作を確認した。今度はこのサンプルを基に、Spryの機能をさらに活用した、よりインタラクティブな操作を可能にするサンプルを制作してみよう。

　まずサンプルを見てみよう。前ページのサンプルと比較して見てほしい。今回は、リストの種目をクリックするとリストが並べ替えられ、関連リンクをクリックすると、下の領域に関連リンクを表示するようにしてみた。これらもSpryの機能を利用して作られており、javascriptプログラミングはされていない。

画面2　リンク集2.1（WindowsIE6、Firefox1.0、Safari1.3.1で動作確認済）

　ダイナミックリージョンの表示制御属性

　ダイナミックリージョンは、前ページのサンプルのようにデータセットの内容をそのまま表示するだけでなく、データ内容で場合分けしたり、条件を満たすもののみを表示したりすることができる。また、表示後の操作でソートキーを変更したり、項目を絞り込んだりすることも可能だ。

　上のサンプルでリストのソートを指定しているコードを見てみよう。

・index.html

         <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spryフレームワークサンプル　リンク集2.1</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_one.xml",
"linkpage/site");
  var dsLinkDetail = new Spry.Data.XMLDataSet("{dsLinks::detail_url}",
"related_links/site");
</script>
<link href="../linkpage.css" rel="stylesheet" type="text/css" />
</head>

　テーブルヘッダのonclickハンドラで、Spryデータセットのソートメソッドを呼んでいる。このように、データセットに用意されたデータ操作メソッドを使用することで、インタラクティブな機能を追加することが可能になる。また今回は使用していないが、以下のようなSpryの専用属性をタグに追加しておくことで、ダイナミックリージョンでのデータ表示を制御することができる。

・spry:if ：　条件を満たす場合、そのタグを表示する

  <!-- languageが"japanese"のデータのみ表示する例 -->
  <ul>
    <li spry:repeat="dsLinks" spry:if="'{language}' == 'japanese'"><a href="{url}">{site_name}</a></li>
  </ul>

・spry:choose / spry:when / spry:default ：　場合分けする
・spry:hover ：　要素にマウスオーバーしたときの振る舞いを指定する
・spry:select ：　要素をクリックして選択したときの振る舞いを指定する

　詳細データを非同期ロードする

　「リンク集2.1」サンプルでは、各リンクについて関連リンクという詳細情報を表示するようにしているが、この詳細情報のデータは、リンク集のXMLファイルとは別のファイルになっており、表示する関連リンクが選択された時点で、非同期ロードを行い、新たに取得したデータセットを動的に表示する仕組みになっている。いわゆるAjax的な動作だ。今回のサンプルではデータ数がごく少ないためさほど恩恵はないが、データ量が多いならば、このように個別のデータを必要に応じてロードできる仕組みは表示や動作速度の向上につながるだろう。

　Spryでのデータセット間の連携動作を解説していこう。まずヘッダ部のデータセット生成コードはこのようになっている。

<script type="text/javascript">
  var dsLinks = new
Spry.Data.XMLDataSet("xml/linkpage_two_point_one.xml",
"linkpage/site");
  var dsLinkDetail = new Spry.Data.XMLDataSet("{dsLinks::detail_url}",
"related_links/site");
</script>

　2行目のデータセットが、今回のサンプルで増えたもので、こちらはデータセットに指定するXMLファイル名に、データセットdsLinksのsite要素のデータ「detail_url」がデータ参照で埋め込まれるようになっている。つまり、データセットdsLinsDetailの内容はdsLinksの選択行が変化するタイミングで自動的に読み込まれ更新されるわけだ。

   <td><a href="javascript:;"
onclick="dsLinks.setCurrentRow('{ds_RowID}')">関連リンクを見る</a></td>

　 リンク集の「関連」アンカーでは、onclickハンドラでdsLinksの選択行を変更する「setCurrentRow」メソッドを呼ぶことで、選択行を変更しており、この状態変化が通知され、データセットが再読み込みされ、詳細データのダイナミックリージョンが再表示される。

詳細データのダイナミックリージョンは次のように指定されている。

   <div id="detail" spry:detailregion="dsLinkDetail">
      <h2>関連リンク</h2>
      <ul>
        <li spry:repeat="dsLinkDetail">
          <a href="{url}" target="_blank">
            <img src="http://img.simpleapi.net/small/{url}" width="64"
height="64" class="thumnail">
            {site_name}
          </a>
          <p class="description">{description}</p>

        </li>
      </ul>
   </div>
  </div>

　「spry:detailregion」というのが、詳細データのダイナミックリージョンの属性だ。「spry:region」とは、データセットの状態を検知して、変更があると表示を再構成する点が異なる。これにより、dsLinksの選択行変さらに伴うデータセットの変更が即座に表示に反映される。

　きたるべきバージョンアップ時にどんなことができるだろう

　 今回は、簡単なサンプルを作りながら、Spryフレームワークの概要を解説した。Spryはまだまだ発展途上のフレームワークであり、実用的に使われていくのはこれから先のことになるかもしれない。しかし、プログラマーではなくWebデザイナーのためのフレームワークというポジションは、今後AjaxアプローチによるWebページがより普及するために必要なものであるはずだ。

　発表後数週間でバージョンアップが公開されたことからも分かるように、おそらくこのSpryフレームワークもほかのAjaxライブラリと同様、今後目まぐるしいスピードで発展していくことだろう。いまのうちからフレームワークを試用してみて、どんなことができるか考えてみるのはどうだろうか。


 3/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 記事ランキング

本日 月間
＠IT