タグのXMLファイルからタグリストを表示する

jQueryを使いタグの情報のはいったXMLファイルを読み込んでAjaxなタグリストを表示してみます

ということで、この前の続きになります。

さっと要点だけ申し上げますと、Movable Typeのタグまわりのテンプレートタグを利用して、タグの情報のはいったXMLファイルを作成する、というところまでをやりました。

このファイルを活用して何かしようということで(ご想像のとおりで)、jQueryを使ってAjaxなタグ一覧のようなものを作ってみました。

jQueryによるXMLファイルの読み込み

前回作成したファイル名をtags.xmlとして出力させたものとします。

用意するのは、jQuery本体(ここではヴァージョン・1.3.2ということにしておきます）でjQuery本体は先に読み込んでおくとします。

ページには、以下のようなタグリストが差し込まれる要素を埋め込んでおきます。

<ul>
    <li class="firstChild">Tag list here.</li>
</ul>

そして、XMLファイルを解析するコードを追加します。

$(function(){
    $.ajax({
    url: '<$MTBlogURL$>tags.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert("Error loading XML file.");
    },
    success: function(xml){
    $('.firstChild').remove();
    $(xml).find('items').each(function(){
        var tag = $(this).find('tagName').text();
        var link = $(this).find('link').text();
        var count = $(this).find('tagCount').text();
        var rank = $(this).find('tagRank').text();
        $('<li></li>')
            .html('<a href=\"'+link+'\" class=\"rank-'+rank+'\">'+tag+'</a>'+' ( '+count+' )')
            .appendTo('ul');
       });
   }
   });
});

このファイルは、外部のJavaScriptとして読み込めばコードがすっきりするでしょう。<$MTBlogURL$>の箇所は、インデックステンプレートでこのJavaScriptファイルを作成した場合のものです。JavaScriptファイルをMTを使わず作成するときは実際に出力されたXMLファイルまでのパスと置き換えします。

で、これを実際にやったのが以下となります。ここのブログでよく使われているタグ50件分をXMLファイルとしています。

• http://www.markdiary.com/sample/ajax_taglist.html

timeoutの数値を先に示したコードより長めにしてますが、サーヴァの状況により読み込みに時間がかかり失敗しているようならば、時間をおいてから読み込んでみてください。