Adobe Spry フレームワークAdobe Spry: XMLデータ処理
データテーブル
2007/7/29
XMLデータを読み込んでランキングのデータテーブルを作成してみます。
まず最初に、XMLデータを用意します。
※サンプルデータは、Vectorサイトのソフトウェアランキングのデータを拝借させていただきました（感謝）。
ソフトウェアのランキングなので親ノードのタグ名は「SOWFTWEAR」とし、その子ノード名を「ROW」としました。 子ノード部分はデータ部分なので繰り返し使います。 区別するためにROW要素に「recordid」というID名を付けます。
ranking.xml<?xml version="1.0" encoding="utf-8" ?>
<SOFTWEAR>
<ROW recordid="1">
<PRODUCT>Area61 ビデオダウンローダー 2.4</PRODUCT>
<CATEGORY>ダウンロード支援</CATEGORY>
<DESCRIPTION>YouTubeから動画をダウンロードしてFLV/WMV/MPG/AVI/MP3等の形式で保存 iTunes+iPodに一発登録可。</DESCRIPTION>
<SIZE>6532</SIZE>
</ROW>
<ROW recordid="2">
<PRODUCT>極窓 22.52</PRODUCT>
<CATEGORY>ファイル管理</CATEGORY>
<DESCRIPTION>拡張子判別変換機能搭載のファイル管理ツール(1000種類以上の拡張子に対応)</DESCRIPTION>
<SIZE>1764</SIZE>
</ROW>
<ROW recordid="3">
<PRODUCT>FFFTP 1.93</PRODUCT>
<CATEGORY>ファイル転送</CATEGORY>
<DESCRIPTION>漢字コードの変換もできるFTPクライアントソフト</DESCRIPTION>
<SIZE>713</SIZE>
</ROW>
<ROW recordid="4">
<PRODUCT>FlashGet (JetCar) 1.88.1009</PRODUCT>
<CATEGORY>ダウンロード支援</CATEGORY>
<DESCRIPTION>ファイルのダウンロード速度を最大500%高速化する、便利ツール</DESCRIPTION>
<SIZE>4520</SIZE>
</ROW>
<ROW recordid="5">
<PRODUCT>めもりーくりーなー 3.070</PRODUCT>
<CATEGORY>メモリ用</CATEGORY>
<DESCRIPTION>メモリーのお掃除＆監視ソフト スキン機能有 リソース、CPU表示も可。</DESCRIPTION>
<SIZE>972</SIZE>
</ROW>
<ROW recordid="6">
<PRODUCT>Craving Explorer α 0.17.0</PRODUCT>
<CATEGORY>ダウンロード支援</CATEGORY>
<DESCRIPTION>YouTube、ニコニコ動画などの動画をダウンロード、AVI、MPEG、MP4、MP3等で保存できるブラウザ</DESCRIPTION>
<SIZE>3482</SIZE>
</ROW>
<ROW recordid="7">
<PRODUCT>UniteMovie 2.11</PRODUCT>
<CATEGORY>動画変換</CATEGORY>
<DESCRIPTION>動画・音声ファイル(rm,mpg,avi,asf,wmv,mov,flv,3gp,3g2,mp4,m4v,amc,mp3,wma,wav,m4a)結合ツール</DESCRIPTION>
<SIZE>1187</SIZE>
</ROW>
<ROW recordid="8">
<PRODUCT>Orbit downloader 2.0.1</PRODUCT>
<CATEGORY>ファイル転送</CATEGORY>
<DESCRIPTION>埋め込み動画・Flash・YouTubeも落とせる汎用型ダウンローダーOrbit</DESCRIPTION>
<SIZE>2070</SIZE>
</ROW>
<ROW recordid="9">
<PRODUCT>あやめ 1.35.001</PRODUCT>
<CATEGORY>プルグラムランチャー</CATEGORY>
<DESCRIPTION>『かすみ』の後継、あまりにも細くて目立たない高機能ランチャ</DESCRIPTION>
<SIZE>110</SIZE>
</ROW>
<ROW recordid="10">
<PRODUCT>Lhaca デラックス版</PRODUCT>
<CATEGORY>アーカイブユーティリティ</CATEGORY>
<DESCRIPTION>DLL不要で、LZH,ZIP,CAB,GZ,Z,BZ2,TAR,TGZ,TAZ,TBZ,JAR,ARJ,RARファイルの圧縮・解凍・分割・一覧が可能</DESCRIPTION>
<SIZE>288</SIZE>
</ROW>
</SOFTWEAR>
次に、Spryのコーディングルールに基づいてXHTML+CSSを記述します。
最後にXMLデータ読み込み処理をするJSを記述します。 パラメータに「ランキングXMLファイルのパス」と「XMLの親ノード名/子ノード名」を指定します。
このように、たった1行のJSを記述するだけでデータテーブルができてしまいます！
サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head profile="http://purl.org/net/uriprofile/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Spry: XMLデータ出力（ソートなし）</title>
<script src="/content/spry/includes/xpath.js" type="text/javascript"></script>
<script src="/content/spry/includes/SpryData.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_xml/ranking.css" />
</head>
<body>
<div class="wrapper">
<h1>Windows新着ソフトランキング <span>07.06.20～07.07.19</span></h1>
<div spry:region="dsRanking">
<table>
<tr>
<th>順位</th>
<th>ソフト名</th>
<th>カテゴリ</th>
<th>説明</th>
<th>ファイルサイズ</th>
</tr>
<tr spry:repeat="dsRanking">
<td class="rank">{@recordid}</td>
<td>{PRODUCT}</td>
<td>{CATEGORY}</td>
<td>{DESCRIPTION}</td>
<td class="fsize">{SIZE}KB</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var dsRanking = new Spry.Data.XMLDataSet("/module/include/ajax/adobespry_xml/ranking.xml", "SOFTWEAR/ROW");
</script>
</body>
</html>
データテーブル（ソートあり）
2007/7/29
上のデータテーブルにソート機能をつけてみましょう。 以下のように、表頭部分（TH要素）にSpry独自の属性を追加するだけで、ソート機能がつけられます。
サンプルを見る
<div spry:region="dsRanking">
<table>
<tr>
<th spry:sort="@recordid">順位</th>
<th spry:sort="PRODUCT">ソフト名</th>
<th spry:sort="CATEGORY">カテゴリ</th>
<th spry:sort="DESCRIPTION">説明</th>
<th spry:sort="SIZE">ファイルサイズ</th>
</tr>
<tr spry:repeat="dsRanking">
<td class="rank">{@recordid}</td>
<td>{PRODUCT}</td>
<td>{CATEGORY}</td>
<td>{DESCRIPTION}</td>
<td class="fsize">{SIZE}KB</td>
</tr>
</table>
</div>