Spryを使ったHTML上でXMLの読み込み

Spryを使用したHTMLでXMLを読み込む方法をご紹介します。
そもそもSpryはAdobe Systems社が開発したAjaxフレームワーク(JavaScriptライブラリ)で、今回紹介するXML形式のデータを読み込むことはもちろん、Widgetの作成など様々な機能があります。

GitHub

デモ

No 名前 ローマ字
{@id} {text} {kana}

次のXMLファイルのデータを表形式で表示しています。

xml_spry.xml

ダウンロードと設置

こちらからダウンロードして解凍します。
ただし、ダウンロードは無料のAdobe会員になっている必要がありますのでご注意ください。
解凍後、includesディレクトリを任意の場所に設置します。

JavaScriptの読み込み

次のHTMLをhead要素内に記述します。

HTML

適用方法

table要素で適用を行う場合はdiv等でtableを囲み、spry:region="DataSetID名"をdivに設定します。
また、表示したい部分に{要素名}という形で記述します。
※ 次のコードにある@idは、要素名に付加されているidを取得するためのものです。

HTML

次に読み込むXMLと出力する部分の設定をします。

上記の場合1つしか表示されないので、繰り返し処理をする場合は、
spry:repeat="DataSetID名"をtrに設定します。

ソート(並び替え)

ソートしたい見出しタグにspry:sort="要素名"を設定します。