古籏一浩のJavaScriptラボ ― 第55回

jQueryでDashboardウィジェットを作ろう (4/4)

非同期通信でWebサーバー上のXML(RSS)を読み込む

　XMLHttpRequestを使って非同期通信(Ajax)でデータを読み込みます。new XMLHttpRequest()として非同期で通信するオブジェクトを生成し、open()メソッドの第1引数に"get"、第2引数に読み込むRSSのURLを指定します。ドメインの制約がないので、http://から始まるURLを指定できます。

　RSSデータが読みこまれたらときに実行する処理を、非同期通信オブジェクトのonloadにイベントハンドラとして設定します。RSSが読み込まれたら、非同期通信オブジェクトのresponseXmlにXMLデータが格納されます。

　ASCII.jpが配信しているRSSは2.0で、記事はitem要素にあります。このitem要素内にあるtitle要素が記事のタイトルになり、記事のタイトルをすべて読み出して表示します。

RSSの内容

　XML (RSS) データからitem要素を抽出するには、getElementsByTagName("item")のようにします。非同期通信で読み込まれたXMLデータはXMLオブジェクト (XML DOM) として扱えるので、HTML DOMと同様に、getElementsTagName()やchildNodeなどが使えます。HTML DOMよりもXMLの方がルールが明確なので扱いやすいでしょう。

　getElementsByTagName("item")で抽出されたitem要素は、配列として返されます（実際にはノードリスト。JavaScriptだと配列と同じ形式でアクセスが可能）。item要素内にあるtitle要素を読み出すので、getElementsByTagName("title")とすればtitle要素が配列で返されます。title要素は1つしかありませんが、以下のように指定すると、最初のtitle要素の内容を読み出せます。

getElementsByTagName("title")[0].firstChild.nodeValue

　あとは、item要素の数だけ繰り返し読み出せばできあがりです。

簡易RSSリーダー

■サンプル2[JavaScript:main.js]

window.onload = displayRSS;
// RRS の記事を表示
function displayRSS(){
    var rssURL = "http://www.ascii.jp/cate/1/rss.xml";
    var httpObj = new XMLHttpRequest();
    httpObj.onload = function(){
        var dateObj = new Date();
        var YY = dateObj.getFullYear();
        var MM = dateObj.getMonth() + 1;
        var DD = dateObj.getDate();
        var H = dateObj.getHours();
        var M = dateObj.getMinutes();
        var S = dateObj.getSeconds();
        var txt = "更新日時："+YY+"年"+MM+"月"+DD+"日　"+H+"時"+M+"分"+S+"秒<br>";
        var xml = httpObj.responseXML;
        var itemList = xml.getElementsByTagName("item");
        for(var i=0; i<itemList.length; i++){
            txt += "<div>"+itemList[i].getElementsByTagName("title")[0].firstChild.nodeValue +"</div>";
        }
        document.getElementById("rss").innerHTML = txt;
    };
    httpObj.open("get", rssURL);
    httpObj.send(null);
}

　サンプル2のRSSリーダーは、ウィジェットが起動したタイミングでRSSを読み込み、表示します。そのため、ウィジェットを再起動させないと、最新の記事が表示されません。

　そこでウィジェットの起動時だけでなく、ウィジェットが再度表示されたときにもRSSを読み込み直すようにしましょう。ウィジェットが表示された場合にはwidgetオブジェクトのshowイベントが発生するので、showイベントの発生時にも処理を実行するように指定すれば完成です。

window.onload = widget.onshow = displayRSS;

◆

　次回は、HTML5を使ったDashboardウィジェットに挑戦します。お楽しみに。