Ajaxを使おう　RSSリーダーを作る

RSSリーダーを作る

　前回は、XMLHttpRequestを使って動的にファイルを読み込むテストをしました。今回は、Ajax関連のツールを使って、XMLファイルを読み込んで利用する方法を紹介します。

　Ajaxの難しいところは、ブラウザごとの微調整やXMLを利用する際のDOM周辺の取り扱いなどですが、それを補うためのさまざまなツールが、現在いろいろな場所で開発されつつあります。それらを利用すれば、数分の一の工程数で、クロスブラウザなAjaxを開発できるようになったりします。

　今回は、サーバ上のXMLファイルをダウンロード～解析して、JavaScript のオブジェクト（配列・連想配列）に自動変換してくれるJKL.ParseXML(XML→JSON展開クラス)を利用してみます。

1: JKL.ParseXML について

2: All AboutのRSS(rdf)を読み込む

3: ブログのエントリーを読み込む

4: RSSをプレロードする

追記2007.5 XMLHttpRequestは、セキュリティ上の制限で別ドメイン間のアクセスを禁止しており、この記事のRSSリーダーも同一ドメイン間の処理を前提としています。もし、別ドメインのフィードを取得するならプロクシサーバーなどを作成して利用することが一般的ですが、2007年5月にGoogleのWebサービスとして公開された、Google AJAX Feed APIを利用すると、比較的安全に別ドメインのフィードをJavaScriptから取得できます。
Google AJAX Feed APIを利用した参考記事:: YUI+Google AJAX Feed API

1: JKL.ParseXML について

　 JKL.ParseXML は、Kawasaki Yusuke さんが開発されているライブラリで、XMLファイルを動的に受信・解析し、JavaScript のオブジェクトや配列(JSON形式)に自動変換してくれます。

　つまり、このライブラリを利用するだけで「Ajaxの送受信」「XMLの解析」「JavaScript化」を丸ごと引き受けてくれるというわけです。

　たとえば、

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<aaa>
  <bbb>
    <test>data</test>
  </bbb>
</aaa>

　といったXMLなら、JKL.ParseXML を通すと、

{
  aaa: {
    bbb: {
      test: "data1",
    }
  }
};

　このようなJSONフォーマットなJavaScriptのオブジェクトに展開してくれますので、あとは、

  oj.aaa.bbb.test

　といった、JavaScript的な、おなじみのアクセス方法で、プロパティ「test」の値である「data1」を簡単に取り出すことができるようになります。

　JKL.ParseXMLの最新版は、 http://www.kawa.net/works/js/jkl/parsexml.html で入手することができます。ドキュメントもわかりやすいので実際に自分で試してみるとよいでしょう。利用は自由で、商用利用制限もないそうです。今回のサンプルでは、 v0.07 を使います。

　本当は、データのやりとりをみれば、XMLよりJSONの方が軽量で高速に送受信できるわけですが、現在のWebサービスはXMLで構築されているものが多いですから、このような変換ライブラリは重宝します。

2: All AboutのRSS(rdf)を読み込む

　最近は、MovableTypeなどのブログツールが、更新情報を公開する仕組みとしてRSSを出力してくれるおかげで、このRSSというXMLを利用できるサイトが増えています。RSSは、もともとはNetscapeのプッシュ技術のひとつでしたが、その後、複数の系列に分かれたまま利用されています。

　All Aboutでも、RDFベースの RSS 1.0 というタイプのRSSを利用できます。ページの右上隅を見てください「RSS」というリンクがありますね。これが、All AboutのRSSのページです。

　RSSはXML形式のファイルです。ということは、、、そうです、Ajaxで扱えるわけです。今回は、これを読み込む簡易RSSリーダーを作ってみます。

動作ブラウザ

win					mac				linux
n7	m1	e6	o7	o8	n7	m1	e5	s1	n7	m1	k3
○	○	○	×	○	○	○	×	×	○	○	○

下記ボタンをクリックすると各RSSを動的に読み込み、リストを表示します。 (チャンネルによっては、最新データが0件の場合もあります。別のチャンネルをお試し下さい。上記動作可能ブラウザでうまく表示できない時は、ActiveXの設定などもお確かめください。)

<button onclick="rssReader('http://allabout.co.jp/rss/computer/index.rdf')">
パソコン・デジタル家電</button><br>
<button onclick="rssReader('http://allabout.co.jp/rss/career/index.rdf')">
ビジネス・キャリア</button><br>
<button onclick="rssReader('http://allabout.co.jp/rss/house/index.rdf')">
住宅・インテリア</button><br>
<button onclick="rssReader('http://allabout.co.jp/rss/ranking/index.rdf')">
人気記事ランキング </button><br>

<!-- JKL.ParseXMLを読み込む -->
<script type="text/javascript" src="./jkl-parsexml.js"></script>

<script>
<!--

//メイン関数
function rssReader(url)
{
	var xml = new JKL.ParseXML( url );  // JKL.ParseXMLオブジェクトを生成
	var func = function ( data )        // 呼び出し先関数を定義する
	{  
	  onloaded1( data );                //コールバック
	}
	xml.async( func );                  // 呼び出し先関数を指定する
	xml.parse();                        // ダウンロード～解析～関数呼び出しする
}

//RSSを受信時に起動するコールバック関数
function onloaded1(xml)
{
	var data = ""
  
	//rdf:RDF要素以下のitem要素を順番に処理
	for(i in xml["rdf:RDF"].item)
	{
		//出力用HTMLを作る
		data += '<b>['+xml["rdf:RDF"].item[i].category+']</b><br>'
		data += '<a href="'+xml["rdf:RDF"].item[i].link+'">'
		data += xml["rdf:RDF"].item[i].title
		data += '</a>'
		data += '<br>'
	}

	//出力
	document.getElementById('out1').innerHTML = data
}

//-->
</script>

<!-- ここへ出力します -->
<div id="out1" 
     style ="font-size:0.8em;margin:12px;" ></div>

　ボタンをクリックすると、関数rssReader(url)が起動し、引数で与えたURLを読み込みます。読み込み完了するとXMLをJSONに変換してから関数onloaded1(xml)を起動します。

　onloaded1(xml)の引数でJSON形式になったRSSデータが引き渡されますので、あとは必要な、タイトルやリンクを取り出してinnerHTMLで書き出しています。

　RSSといえば、ブログが一般的ですので、次にブログのエントリーリストを動的に取り出して出力するサンプルを作ってみます。

「Ajaxを使おう」シリーズの記事一覧へ

記事一覧