Javascript

【Javascript】Ajaxを試してみよう　RSSリーダーを作る

Javascript関連情報

更新日：2005年05月28日

Ajaxを試してみよう　RSSリーダーを作る

高橋登史朗

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

RSSリーダーを作る

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

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

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

1: JKL.ParseXML について

2: AllaboutのRSS(rdf)を受信する

3: 別ドメインのXMLも読み込む

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.items.item.test
```
といった、JavaScript的な、おなじみのアクセス方法で、プロパティ「test」の値である「data1」を簡単に取り出すことができるようになります。

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

2: AllaboutのRSS(rdf)を受信する

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

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

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

動作ブラウザ

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

<button onclick="rssReader('http://allabout.co.jp/rss/ranking/index.rdf')">
人気記事ランキング </button><br>
<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>

<!-- 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.nodeValue+'">'
		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>

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！