Kawa.netxp [ajax] JavaScript版 RSSリーダー

RSS（ウェブフィード）をダウンロードし、 テンプレートを使用してHTMLページ中に展開する ajax の習作です。
JKL.ParseXML と JKL.Hina を利用しています。

RSS をダウンロード〜展開 (DEMO)

ボタンを押すと、 RSSファイルをダウンロード〜展開します。⇒

[ここに展開されます]

JavaScript ソース

JKL.ParseXMLとJKL.Hinaを利用するので、 まず、head 要素内で jkl-hina.js と jkl-parsexml.js を呼び出して下さい。 

<head>
    <script src="jkl-hina.js" charset="Shift_JIS"></script>
    <script src="jkl-parsexml.js"></script>
</head>

このページの JavaScript ソース本体は短いです。
以下のコードを onload 以降に呼び出します。（＝hinaとdestが存在する状態） 

    var url = "http://www.kawa.net/index.rdf";
    var xml = new JKL.ParseXML( url, null );
    var data = xml.parse();
    data.now = new Date().toLocaleString();
    var hina = new JKL.Hina( "hina" );
    hina.expand( data, "dest" );

テンプレートと合わせて、↑が最低限のコードになります。
なお、JavaScript のセキュリティ制限により、 同サイト内の RSS ファイルのみダウンロードできます。
他サイトにある RSS ファイルは読み込めません。

HTML テンプレート

テンプレート部分は通常は style="display: none;" で隠しておきます。
テンプレートは、 JKL.Hina によって展開表示されます。 

<div style="display: none;">
<p id="hina">
<table border="1">
    <tr>
    <th>カテゴリ</th>
    <th>件名</th>
    <th>日時</th>
    </tr>
    <tr title="@foreach item1 [/rdf:RDF/item]">
    <td>[/item1/dc:subject]</td>
    <td><a _href="[/item1/link]">[/item1/title]</a></td>
    <td>[/item1/dc:date]</td>
    </tr>
</table>
ダウンロード処理日時：[/now]
</p>
</div>

ボタンを押すと、生テンプレートを表示します。⇒

カテゴリ 件名 日時
[/item1/dc:subject] [/item1/title] [/item1/dc:date]
ダウンロード処理日時：[/now]

RSS 2.0 を利用している場合

なお、RDF ファイル（拡張子 .rdf の場合が多い）でなくて、 RSS 2.0（拡張子 .rss や .xml の場合が多い）を利用している場合は、 HTML テンプレートで 以下の書き換えが必要になります。
（書き換えるだけで RSS 2.0 に対応します） 

  <tr title="@foreach item1 [/rdf:RDF/item]">
　　　　　　　↓
  <tr title="@foreach item1 [/rss/channel/item]">

日時の表示形式を変更する場合

RDF ファイルの日付の表示形式は、 W3CDTF形式 になっています。
人間でも読める形式ですが、一般の人には分かりにくいです。

そこで、 DateオブジェクトのW3CDTF拡張を利用して、 分かりやすい形式に変換してみます。 

    <script src="jse-date-w3cdtf.js"></script>

まず、上記のように jse-date-w3cdtf.js を読み込んでおきます。 

    var items = data["rdf:RDF"].item;
    for( var i=0; i<items.length; i++ ) {
        var dd = new Date();
        dd.setW3CDTF( items[i]["dc:date"] );
        var min = ""+dd.getMinutes();
        if ( min.length < 2 ) min = "0" + min;
        var hour = ""+dd.getHours();
        if ( hour.length < 2 ) hour = "0" + hour;
        var date = dd.getFullYear() + "/" + (dd.getMonth()+1) + "/" +
                   dd.getDate() + " " + hour + ":" + min;
        items[i]["dc:date"] = date;
    }

このコードを xml.parse() の後に追加すれば、 “2006/3/4 06:07”形式の表示になります。
XML をいじらずに、単に JavaScript のオブジェクト（連想配列）／配列を 操作しているだけなので、単純な処理で済みます。
できれば、JavaScript にも sprintf() があると便利なのですが。

表示件数を制限する場合

RDF ファイルに多数のページ情報を掲載している場合は、 ずらずら表示するとページの見た目に影響したり、 動作速度も遅くなってしまいます。 そこで、表示するアイテム数を制限するのが現実的です。 

    var items = data["rdf:RDF"].item;
    if ( items.length > 15 ) items.length = 15;

このコードも xml.parse() の後に追加してください。 RSS のアイテムは通常新着順に並んでいるので、最新から 15件が表示されます。

対応ブラウザ

動作するブラウザは、JKL.ParseXML と JKL.Hina の稼働状況に依存します。

応用例

自分のページに設置する手順 もまとめてみました。
こちらは、非同期モード(asyc)を利用するように改良してあります。
非同期モードを利用した方が、操作性も良くなるのでオススメです。

コメントはこちらへ by AjaxCom

その他のページへのリンク

このページへのトラックバック by AjaxTB

トラックバックURL：http://www.kawa.net/service/tb/ajaxtb.cgi/works/ajax/rss/rss.html

Kawa.netxp © Copyright 2005-2006 Yusuke Kawasaki