「Ajax したい！」Web デザイナーのための Spry 集中講座

第一回：Spry を使ってXML をWeb ページに読み込む

今月号の記事

Spry framework for Ajax（以下、Spry）は、アドビが提唱しているデザイナー向けの JavaScript ライブラリです。無償で配布されているこのライブラリを利用することで、サーバサイドで特別なプログラムを用意したり、ユーザの Web ブラウザへ新たなプラグインをインストールすることなく、今話題の Ajax を利用した動的でリッチなインタフェースやコンテンツを HTML の中に作り出すことができます。

“デザイナー向け”というのが Spry の大きな特長であり、他の Ajax ライブラリと比べてもユニークな点です。Spry そのものは JavaScript ライブラリ群ですが、難解な JavaScript のプログラミング知識はそれほど必要ではありません。HTML コーディングのスキルがあれば、XML からのデータを取得し、加工し、ダイナミックな形で Web ページ上に展開することができるのです。

百聞は一見にしかず。まずはこちらにある Spry のデモページをご覧ください。

このようなダイナミックな Web ページを、その動作の複雑さからは想像もできないような“簡単な”コード記述で実現できるのが Spry です。でも現在はまだベータ版ということもあり、現時点で配布されている資料や情報はさほど多くありません。このため、まずはどこから手を付けていいかと躊躇されている方々も多いことでしょう。Edge Newsletter では、今回から短期連載で、「Ajax したい！」Web デザイナーのための Spry 集中講座をお届けします。

Spry をインストールする

Spry は Adobe Labs より最新ベータ版をダウンロードして、すぐに利用できます。ダウンロードするためには Adobe ID の登録（無料）が必要となります。まずはダウンロードして、圧縮されたライブラリを解凍してください。

Spry の中核を成すのは、解凍された includes フォルダの中の JavaScript ファイルです。各ファイルの主な機能は以下のとおりです。

xpath.js	XPathを使用してJavaScript内でXMLを扱えるようにするGoogle製ライブラリ。データセットを使用する場合は、まずこれを先に読み込む必要があります。
SpryData.js	データセットの定義やSpry内で動的にデータ表示を行えるようにするためのライブラリ。
SpryEffects.js	Spryのアニメーション処理を行うライブラリ。

まずは上記のファイルをあなたが制作しているサイトのローカルルートフォルダの中に入れ、対象の HTML ファイルからこの js ファイルに対してリンクを設定します。下記で示す HTML では、HTMLファイルと同階層にある js フォルダの中に Spry の JavaScript ファイルを入れて、そこからリンクした形にしています。

<html>

  <head>

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

      <title>Spry Test</title>

           <script src="js/xpath.js" type="text/javascript"></script>

           <script src="js/SpryData.js" type="text/javascript"></script>

 </head>

外部XMLデータを準備する

Spry を利用する最も大きな利点は、「データ部分としての XML」と、それを飾る「入れ物としての HTML」を分離することができるという点です。これまでデータを動的に加工して表示するためには、Perl や php などのサーバサイドのスクリプトを介す必要があり、Web デザイナーには非常に敷居の高いものでした。しかし Spry の「データセット」を使用することで、静的な HTML の中でも同様のことができるようになります。

Spry は「XPath」と呼ばれる W3C 規格で定義されている Web 標準のデータ抽出方法を使って、XML からデータを取り出します。取り出されたデータはデータセットとして登録され、いつでも Spry の中に呼び出して配置することができるようになるのです。

Spry のデータセットは、XPath で指定された XML の中に記述されている「繰り返しノード」部分から、配列オブジェクトとして順番にデータを格納します。データセットを作成する前に、まずは使用する XML の構造を把握しておく必要があります。今回は製品データを次のような XML として用意しました。

Product.xml

<?xml version="1.0" encoding="UTF-8" ?>

  <PRODUCT_DATABASE>

    <ROW recordid="1">

        <Product>Dreamweaver 8</Product>

        <Category>Web</Category>

        <Price>50400</Price>

    </ROW>

    <ROW recordid="2">

        <Product>Fireworks 8</Product>

        <Category>Imaging</Category>

        <Price>39800</Price>

    </ROW>
                  ～以下同様～
   </PRODUCT_DATABASE>

XML というと何やら難しそうな印象すらありますが、こうして見てみると HTML よりも分かりやすいです。製品データベースですので、タグの名前を<PRODUCT_DATABASE>と定義し、その下（子ノードといいます）に<ROW>と</ROW>で囲んだ部分としてデータ（製品名、カテゴリ、価格）を定義。それが繰り返し登場することで以下のようなデータベースを形成しています。ちなみにこれらのタグはすべて、分かりやすい名前を「勝手に」定義していますので、<PRODUCT_DATABASE>よりも<PRODUCTS>のほうが分かりやすい、という方は、その名前を使っても構いません。

では、この XML データを Spry のデータセットに読み込んでみましょう。Spry のデータセットの定義は、JavaScript として HTML 内に以下のように記述します。

<script type="text/javascript">

  <!--

     var データセット名 = new Spry.Data.XMLDataSet("XMLのファイルパス", "XPathの値");

  //-->

</script>

ここまででHTMLは以下のようになります。

<html>

  <head>

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

     <title>Spry Test</title>

         <script src="js/xpath.js" type="text/javascript"></script>

         <script src="js/SpryData.js" type="text/javascript"></script>

         <script type="text/javascript">

         <!--

            var dsPlist = new Spry.Data.XMLDataSet("Product.xml", "PRODUCT_DATABASE/ROW");

         //-->

         </script>

  </head>

<body>

</body>

</html>

データセット名は任意の英数字（ここではdsPlist）、XML のファイルパスは XML の保存場所（ここではProduct.xml）、XPath の値はループ構造の始まるノード位置を XPath （ここではPRODUCT_DATABASE/ROW）で明示します。なお、ブラウザのセキュリティ上の制限で 同じドメイン外のサーバにある XML ファイルは読み込むことが出来ないので注意が必要です。

Spry の記述に関するルールを把握する

Spry は HTML タグの中に spry:region 属性を加えることで表示領域として認識します。ほとんどの HTML タグに対して設定できますが、以下の HTML タグと、Body タグの外にあるタグには設定できないので注意が必要です。

col
colgroup
frameset
html
iframe
style
table
tbody
tfoot
thead
title
tr

ID	製品	種別	価格
{@recordid}	{Product}	{Category}	{Price}円

では実践編として、先ほど作成したデータセットを表組みとして表示しようと思います。Spry では、データセットに格納されたデータを表示したいタグの中にspry:region="データセット名 "とすることでデータを呼び出すことができ、さらにその中にあるタグに対してspry:repeat="データセット名" とすることで、レコードセットの行の数（今回の XML では<ROW></ROW>の数）だけ繰り返して各レコード行の値を表示させることができます。今回は DIV タグで囲まれたテーブルの中にデータセットの値を格納させます。具体的には以下のようになります。

<div spry:region="dsPlist">

  <table>

    <tr>

       <th>ID</th>

       <th>製品</th>

       <th>種別</th>

       <th>価格</th>

    </tr>

    <tr spry:repeat="dsPlist">

       <td>{@recordid}</td>

       <td>{Product}</td>

       <td>{Category}</td>

       <td>{Price}円</td>

    </tr>

  </table>

</div>

これによって表の中に XML データを表示できるようになりましたが、ここからが Spry の本領発揮です。表組みのヘッダ部分をマウスでクリックしたら、それぞれがソート表示されるようにしてみましょう。

…… 普通に考えると、この時点でお手上げです。複雑な JavaScript を組み上げなければ、と考えただけで気が遠くなるでしょう。しかし、その複雑な JavaScript は Spry の中に全部用意されているのです。我々はただ、表組みのヘッダ部分（th タグ）に、簡単な Spry タグを追加するだけでいいのです。

       <th spry:sort="@recordid">ID</th>

       <th spry:sort="Product">製品</th>

       <th spry:sort="Category">種別</th>

       <th spry:sort="Price">価格</th>

これだけでソート機能が実現します。

ここでTIPS をひとつ。@recordidとPriceの値はテキストとして扱われているため、ソートすると 1 の次は 2 にならず、10 になったりします。このような場合は、データセットに格納されているデータ型を数字だと明示することで解決します。先ほど作成したデータセットの定義の後に続けて、以下のように記述します。

<script type="text/javascript">

     <!--

         var dsPlist = new Spry.Data.XMLDataSet("Product.xml", "PRODUCT_DATABASE/ROW");

             dsPlist.setColumnType("@recordid", "number");
             dsPlist.setColumnType("Price", "number");

     //-->

</script>

ID	製品	種別	価格
{@recordid}	{Product}	{Category}	{Price}円

それでは最後に動作させてみましょう。右のようになれば完成です。

‹ 戻る