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>