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

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

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

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

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

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>