Web Learn Log

jParse で複数のディレクトリから XML を読み込み、一つのページに纏める方法は以前の記事で書いたのだが、項目事に XML をマークアップし一つ一つ jpet0,jpet1,jpet2…と指定するのは面倒だし、更新情報や新着情報を更新する際に XML 内でマークアップした「内容だけ」を書き換えれば更新される。とゆう総合的に簡単な方法を考えてみる。

1. 要は「 XML の要素は一つにし、それをパース」これをループさせる。
2. ループさせる為に XML 以外の HTML タグも使用したいので「 CDATA セクションを使用する」
3. 更に、「 XML がキャッシュされる事を防ぐ」為に、ページを更新する度に XML のファイル名にランダムな数字を付加する。

この方法を実現する為にとりあえず HTML 内の設定、今回は定義リストを使用する。

<div>
	<dl id="newsArea">ここにコンテンツ</dl>
</div>

<script type="text/javascript">
// ここにファイル名
var filename = "index_news.xml";
// ランダムな数値を付加し変数に代入
filename += "?rand=" + Math.random();

//ID が ajax_content_wrap に表示
$('#newsArea').jParse({
// 代入した変数
	ajaxOpts: {url: filename},
// XML 内の UpDate 要素内にある
	parentElement: 'UpDate',
// XML の News 要素を読み込み
	elementTag: ['News'],
// 読み込んだ内容はそのまま表示
	output: 'jpet0'
});
</script>

続いて XML の内容 CDDATA内にタグを挿入しても問題ないので、後から CSS を適用する事ができる。

<?xml version="1.0" encoding="utf-8"?>
<UpDate>
<News><![CDATA[
	<dt><em>2010.03.03</em></dt>
	<dd>更新内容その１<strong>New</strong></dd>
]]></News>

<News><![CDATA[
	<dt><em>2010.02.15</em></dt>
	<dd>更新内容その２</dd>
]]></News>
</UpDate>

これで XML 内に書いた 定義リスト内要素が、HTML 内にある dl#newsArea に読み込まれる。
※更新も XML 内のタグ内を書き換えるだけと、初心者でも簡単に更新できる。
※更に後から「 New 」などの画像を付け加えたくなった場合でも、上記の場合なら strong 要素内を CSS で背景画像を適用すれば出来るようになる。