jQueryとjQuery Templates pluginで外部データ（XML等）の解析・表示

公開

CSS Nite LP, Disk 18の復習とjQuery Templates pluginの実験をかねて、スクリプトを書いてみました。はじめはレポート記事で紹介したサンプルコードの改造をしたのですが、徳田さんのセッションのスライドを見返すと同じコードが紹介されていたので、XMLで記述されたデータをjQueryで取得して表示するコードをお題にしてみました。

作成しての感想ですが、jQuery Templates pluginを利用すると、JavaScriptのコード内にHTMLが混ざらず、コードの見通し・メンテナンス性が非常に良くなりました。

解説

XML

<?xml version="1.0" encoding="UTF-8"?>
<information>
<item>
<date>2011.09.30</date>
<category>IR</category>
<content>IR情報が入ります。IR情報が入ります。IR情報が入ります。</content>
</item>
<item>
<date>2011.09.28</date>
<category>新製品</category>
<content>新製品情報が入ります。新製品情報が入ります。新製品情報が入ります。</content>
</item>
<item>
<date>2011.09.25</date>
<category>お知らせ</category>
<content>お知らせが入ります。お知らせが入ります。</content>
</item>
</information>

お知らせデータを格納したXMLです。特別変わったところはありません。

HTML

<script id="tmpl-information" type="text/x-jquery-tmpl">
<table border="1">
<tbody>
{{each data}}
<tr>
<th scope="row">${date}</th>
<td>${category}</td>
<td>${content}</td>
</th>
</tr>
{{/each}}
</tbody>
</table>
</script>

<div id="information">
<h2>お知らせ</h2>
</div>

script要素を利用して、jQuery Templates pluginのテンプレートを記述し、その後ろに生成したHTMLを挿入するdiv要素を用意します。

テンプレートを簡単に解説すると、{{each}}〜{{/each}}テンプレートタグでお知らせデータの件数だけ繰り返しを実行、${date}や${content}テンプレートタグの部分にデータが挿入される仕組みです。テンプレートタグが入る以外は全く普通のHTMLです。テンプレートタグはPHPのSmartyと同じ感覚で利用でき、私は好感を持ちました。

代替コンテンツを記述していませんが、案件で利用する場合はJavaScriptがオフになっている環境への対応も考慮した対応が必要かと思います。ちなみにJavaScriptではなくPHPでXMLをロード・解析すれば、簡単にクリアできますが...。

JavaScript

"jQuery" in window && (function($) {
 // データをオブジェクト化して配列に格納
 function _parseXML(data) {
 var regex,
 matches,
 ret = [];
 
 data = data.replace(/\n/g, "");
 regex = new RegExp(/<date>(.*?)<\/date><category>(.*?)<\/category><content>(.*?)<\/content>/g);
 while(matches = regex.exec(data)) {
 ret.push({
 date: matches[1],
 category: matches[2],
 content: matches[3]
 })
 }
 
 return ret;
 }
 
 // テンプレート適用
 function _dispData(items) {
 $("#tmpl-information").tmpl({data: items})
 .appendTo("#information");
 }
 
 $(function() {
 // XMLを取得して表示処理実行
 $.ajax({
 url: "information.xml",
 dataType: "text"
 }).then(
 function(data) {
 var items = _parseXML(data);
 _dispData(items);
 },
 function() {
 alert("Error!");
 }
 );
 });
}(jQuery));

$.ajaxでXMLファイルを取得し、データを加工した後にテンプレートを適用しています。

XMLの解析は、jQueryでDOMを解析するのではなく、XMLの内容をテキストとして扱い、正規表現で日付やカテゴリなどの項目データを取得しています。CSS Nite LPの西畑さんのセッション内容を参考にしたもので、高コストなDOM解析処理避けることにより、パフォーマンスが大幅に向上するそうです（本来ならば比較してどちらが良いか選択すべきですが、今回は省略しました）。

ちなみに、オブジェクトのプロパティ名"date"とテンプレートタグの${date}が紐付くようになっています。

テンプレートの適用は、テンプレートを記述したscript要素に対し、.tmplメソッドを記述するだけです。引数にXMLを解析して作成したデータ配列を指定しています。

XMLデータが取得できなかった場合の処理は適当にしてますので、適宜書き換えてご利用ください。