jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する

jQuery2011年9月29日

MovableTypeやWordPressなどのCMSツールを使用せず、ニュースリリースなどが静的HTMLで構築されているサイトの場合、HTMLを直接修正して更新する必要があります。

そこで、ニュースリリースなどの情報をひとつのXMLファイルで管理し、HTMLを触らずともあたかもデータベースのようにXMLを扱うことで、XMLファイルの更新のみでサイトの管理が可能になり、メンテナンス性が向上します。

jQueryを使用すると実装が比較的容易なので、今回サンプルを作成してみました。

HTML

<table cellpadding="0" cellspacing="0" border="0" class="tbl">
<col width="15%" />
<col width="15%" />
<col width="70%" />
<tbody>
<tr>
<th></th>
<td></td>
</tr>
</tbody>
</table>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="js/info.js"></script>

CSS

body{
padding:20px;
font-size:100.01%;
}

table.tbl{
width:600px;
margin:0 auto;
border-collapse:collapse;
}

table.tbl th,
table.tbl td{
padding:10px;
font-size:0.8em;
font-weight:normal;
vertical-align:top;
border:1px solid #ccc;
line-height:1.6;
}

table.tbl td span{
display:inline-block;
padding:2px 10px;
font-size:0.78em;
color:#fff;
}

table.tbl td span.company{background:#0066cc;}
table.tbl td span.products{background:#0dd000;}

Javascript

// -------------------------------------------------
// 初期設定（いったんHTMLを空にする）
// -------------------------------------------------
$(function(){
$("table.tbl tbody").html("");
});


// -------------------------------------------------
// XML読み込み
// -------------------------------------------------

function xmlLoad(){
$.ajax({
url:'xml/data.xml',
type:'get',
dataType:'xml',
timeout:1000,
success:parse_xml
});
}

// -------------------------------------------------
// XMLデータを取得
// -------------------------------------------------

function parse_xml(xml,status){
if(status!='success')return;
$(xml).find('item').each(disp);
}


// -------------------------------------------------
// HTML生成関数
// -------------------------------------------------

function disp(){

//各要素を変数に格納
var $day = $(this).find('day').text();
var $label = $(this).find('label').text();
var $category = $(this).find('category').text();
var $content = $(this).find('content').text();
var $url = $(this).find('url').text();
var $target = $(this).find('target').text();

//HTMLを生成
$('<tr>'+
'<th>'+$day+'</th>'+
'<td class="label"><span class="'+$label+'">'+$category+'</span></td>'+
'<td><a href="'+$url+'" target="'+$target+'">'+$content+'</a></td>'+
'</tr>').appendTo('table.tbl tbody');
}

//関数実行
$(function(){
xmlLoad();
});

XML

<?xml version="1.0" encoding="UTF-8" ?>
<info>
<item>
<day>2011.09.30</day>
<label>company</label>
<category>企業情報</category>
<content>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</content>
<url>http://www.yahoo.co.jp/</url>
<target>_self</target>
</item>

<item>
<day>2011.06.01</day>
<label>products</label>
<category>商品情報</category>
<content>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</content>
<url>http://www.google.co.jp/</url>
<target>_blank</target>
</item>

<item>
<day>2011.06.15</day>
<label>company</label>
<category>企業情報</category>
<content>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</content>
<url>http://www.yahoo.co.jp/</url>
<target>_self</target>
</item>

</info>

解説

バリデータエラーのために挿入しているHTMLをいったん空にします。

次にXMLのパスを指定し、読み込みます。ここでのパスは表示するHTMLからのパスになるため、注意が必要です。
本サンプルでは相対パスで記述していますが、複数ページに表示する場合も考慮し、ルートパスでの記述が望ましいでしょう。

function parse_xmlでは、XMLデータを解析しています。

function dispではひとつひとつデータを変数に格納し、アイテム単位で関数を実行させ、tr毎にHTMLをアイテムの数分だけ生成しています。

XMLでの管理はflashでよく利用する場合が多いですが使い方次第で全然HTMLでも使えます。
先日はじめて案件でこのようなスクリプトを作成したのですが、今後このような機能の実装は増えてくることが予想されますので、習得しない手はないと思います。

2013/07/31 追記

JSONデータでも実装してみました。あわせてお読みくださ

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。