Spryを利用してXMLデータをWebサイトに表示する方法のサンプル

最近はXMLデータとの連携が必要なWEBサイト制作が非常に多くなっていますが、誰でも簡単にWEBの表示に利用できる程簡単という印象ではありませんでした。

実際に昔チャレンジしたのですが断念し、システムの方へお願いしてしまいましたし・・・。
そこで最近購入した「CSS&JavaScript表現アイデア帖」を久々にパラパラめくっていたらあるじゃないですか!
「Spryを利用して簡単にXMLデータをWebページに表示する方法」
これは試すしかありませんね。
という事で掲載ソースを元にサンプルを制作してみました。

—————————————————————————————

●まずSpryをダウンロードします。

—————————————————————————————
●サンプル制作に必要なファイルは下記です。
・表示用HTML 【index.html】
・データXMLファイル 【data.xml】
・Spryデータ2種 【includes/xpath.js】【includes/SpryData.js】
—————————————————————————————
●それではXMLファイルを制作します。【data.xml】
下記サンプルです。
<?xml version=”1.0″ encoding=”UTF-8″?>
<news>
<item>
<title>新作展示試着会</title>
<date>2008/9/30</date>
<place>京都</place>
<url>http://www.yahoo.co.jp</url>
</item>
<item>
<title>新作発表会</title>
<date>2008/10/5</date>
<place>北海道</place>
<url>http://www.google.co.jp</url>
</item>
<item>
<title>特別商談会</title>
<date>2008/10/7</date>
<place>神奈川</place>
<url>http://www.goo.ne.jp</url>
</item>
<item>
<title>新作展示試着会</title>
<date>2008/10/20</date>
<place>新潟</place>
<url>http://www.ocn.ne.jp</url>
</item>
<item>
<title>特別注文相談会</title>
<date>2008/10/30</date>
<place>山口</place>
<url>http://www.kddi.com</url>
</item>
</news>
—————————————————————————————
●つぎにSpryデータのincludesフォルダをindex.htmlと同じ場所に格納します。
—————————————————————————————
●表示HTMLにSpryモジュールを組み込みます。【index.html】
・<head>内にxpath.js、SpryData.jsを読み込みます。
var ds1 = new Spry.Data.XMLDataSet(‘data.xml’,’news/item’);の記述も追加します。XMLファイル名、タグ名は都度変更ください。
・XMLを展開させるテーブルを<div spry:region=”ds1″>で囲います。
・データを繰り返し表示させるtrに<tr spry:repeat=”ds1″>と記述します。
・XMLの値を落としたい箇所に{place}の様に記述します。
・拡張属性を使用するのでxmlns:spry=”http://ns.adobe.com/spry”を追加します。
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:spry=”http://ns.adobe.com/spry”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>XML表示練習</title>
<script type=”text/javascript” src=”includes/xpath.js”></script>
<script type=”text/javascript” src=”includes/SpryData.js”></script>
<script type=”text/javascript”>
<!–
var ds1 = new Spry.Data.XMLDataSet(‘data.xml’,’news/item’);
–>
</script>
</head>
<body>

<div spry:region=”ds1″>

<table>
<tr>
<th>会場</th>
<th>日時</th>
<th>エリア</th>
</tr>
<tr spry:repeat=”ds1″>
<td><a href=”{url}” target=”_blank”>{title}</a></td>
<td>{date}</td>
<td>{place}</td>
</tr>
</table>

</div>

</body>
</html>

—————————————————————————————

●ブラウザで表示するとこの様になります。

※cssは自由に設定してください。

xml.JPG

あとは工夫次第で様々な表示方法が可能ですね!これは簡単です。
Spryってなんて便利なんでしょうか。
また欠点といえばjavascriptが動作しないと表示されないので、携帯サイトでの展開などが出来ないところが残念です。

コメントフォーム

*
*
* (公開されません)