Spryを利用してXMLデータをWebサイトに表示する方法のサンプル
最近はXMLデータとの連携が必要なWEBサイト制作が非常に多くなっていますが、誰でも簡単にWEBの表示に利用できる程簡単という印象ではありませんでした。
実際に昔チャレンジしたのですが断念し、システムの方へお願いしてしまいましたし・・・。
そこで最近購入した「CSS&JavaScript表現アイデア帖」を久々にパラパラめくっていたらあるじゃないですか！
「Spryを利用して簡単にXMLデータをWebページに表示する方法」
これは試すしかありませんね。
という事で掲載ソースを元にサンプルを制作してみました。
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
●サンプル制作に必要なファイルは下記です。
・表示用HTML 【index.html】
・データXMLファイル 【data.xml】
・Spryデータ２種 【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>
あとは工夫次第で様々な表示方法が可能ですね！これは簡単です。
Spryってなんて便利なんでしょうか。
また欠点といえばjavascriptが動作しないと表示されないので、携帯サイトでの展開などが出来ないところが残念です。
<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は自由に設定してください。
あとは工夫次第で様々な表示方法が可能ですね！これは簡単です。
Spryってなんて便利なんでしょうか。
また欠点といえばjavascriptが動作しないと表示されないので、携帯サイトでの展開などが出来ないところが残念です。
トラックバック(2)
このブログ記事を参照しているブログ一覧: Spryを利用してXMLデータをWebサイトに表示する方法のサンプル
このブログ記事に対するトラックバックURL: http://lala-rockets.com/mt/mt-tb.cgi/57
» Buy carisoprodol online no prescription required.(Carisoprodol online prescription.)~のトラックバック
Buy carisoprodol online no prescription required. Carisoprodol online prescri... 続きを読む
» Discount tramadol.(Discount tramadol.)~のトラックバック
Buy tramadol online from discount pharmacy store. Discount tramadol. 続きを読む
