« JavaScriptでユーザーに親切なフォーム入力 | トップページ | Safari用のCSSハック »

2008.05.10

XMLデータをWebページに表示する

Spryを利用してXMLデータをページに表示

ちょっと古いネタですが、web creators 2007 10月号の「TIPS&TRICKS」に載っていたSpry framework for Ajaxを使ってXMLデータをWebページに表示させる仕組みを紹介してみます。

頻繁に更新するデータなどを実際のページから切り離してXMLで管理できるので、クライアントさんが更新作業をする場合などに提案できるかもしれません。
ただし、ソースコードを編集できるクライアントさんじゃないと難しいと思います。また、実際のページのソースは変更されず元のままなので、SEOを重視する場合は不向きです。
まあ、iframでページとは切り離してデータを管理する方法に似ているでしょうか? 更新システムをちゃんと作るのであれば、CMS Designer等のCMSツールを使用した方が良いでしょう。

では、サンプルです。

↑このサンプルはこちらからダウンロードできます。

設定はそれほど難しくありません。ソースを見ていただくとだいたい分かると思うんですが、簡単に説明すると…

まずは、Spryを配布サイトからダウンロードし、「includes」フォルダの中身をコピーします。
htmlにxpath.jsとSpryData.jsを読み込むように記述し、さらに9〜11行目のように、
<script type="text/javascript">
var ds1 = new Spry.Data.XMLDataSet('data.xml','book_store/item');
</script>
と、記述します。

XMLは、<book_store>〜</book_store>(例)とdivのように囲み、その中を<item>〜</item>ごとにデータで区切り、それぞれの値を記述します。

htmlに戻って、XMLのデータが表示されるtableの直前に18行目のように、
<div spry:region="ds1">と、記述して下さい。
XMLで記述したそれぞれの値は、25〜28行目のように{}で囲みます。
<tr spry:repeat="ds1">
<td scope="col" class="item"><a href="{url}" target="_blank">{name}</a></td>
<td scope="col" class="data">{price}円</td>
</tr>

また、Spryの拡張属性を使うために、2行目の
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
も忘れずに記述して下さい。

これくらいのサンプルだとhtmlに直接データを打ち込んだ方が早そうですけどね…。興味があれば試してみて下さい。

|

« JavaScriptでユーザーに親切なフォーム入力 | トップページ | Safari用のCSSハック »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/41161067

この記事へのトラックバック一覧です: XMLデータをWebページに表示する:

« JavaScriptでユーザーに親切なフォーム入力 | トップページ | Safari用のCSSハック »