この章では、多くのサイトで配信されているRSSを利用して見出し、リンク、記事内容の要約を表示させてみます。
RSSに関しては読み込まれた内容に対して一括して検索して結果を表示するという処理を
第六章の六で行いました。RSSに関しては
詳解RSSという本がありますし、サイトで検索すればRSSフォーマットに関する情報が得られます。
一口にRSSといっても簡単ではありません。というのもフォーマットがいくつかあり、それぞれ別の団体が作成していたりするため、互換性などがなかったりします。現在、配布されているRSSには以下の3つがあります。
- RSS 1.0 (RDF) 【日本で多く利用】
- RSS 2.0 (RSS 0.9x)【米国で多く利用】
- Atom【ブログで多く利用】
RSS 0.9を改良したものがRSS 2.0です。1.0ではありません。RSS 1.0はRDFフォーマットで別個です。フォーマットが乱立したため、統合しようということでAtomが出てきました。ブログではAtomで配布されているところが多くあります。
まず、この項では日本で一番多く利用されているRSS 1.0 (RDF) のデータを表示させてみます。RDF/XMLに関しては
Web KANZAKIを参考にしてみてください。
他のサイトの情報を得るにはCGIを用意しておく必要があります。他の章でも利用しましたが、以下のようなCGIを利用しています。
#!/usr/local/bin/ruby
require "kconv"
require "cgi-lib"
input = CGI.new
inputdata = input["query"]
bom = "\xef\xbb\xbf"
print "Content-type: text/xml\n\n"
print bom
fh = open("| curl '"+inputdata+"'")
while !fh.eof
str = fh.gets
print Kconv::toutf8(str)
end
fh.close
解析するRSS 1.0ですが、簡単に書けば以下のような構造になっています。
<rdf:RDF>
<channel>
<title>〜</title>
<link>〜<link>
<description>〜<description>
</channel>
<item>
<title>〜</title>
<link>〜</link>
</item>
</rdf:RDF>
赤字の部分(item)が記事の数だけ繰り返し記述されます。このitemタグ内にあるtitleが記事の見出しになります。RSSデータ内からgetElementsByTagName("item")としてitemタグのリストを取得し、その中にあるtitleタグの最初のテキストノードを読み出します。これで記事の一覧を表示させることができます。（実際のスクリプトを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>RSSを読み込み見出しを表示する (RSS 1.0 - RDF -)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function rssSearch()
{
rssURL = $("siteURL").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","getrss.rb?query="+rssURL+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
parseRSS1(httpObj.responseXML);
}else{
$("result").innerHTML = "読み込み中です...";
}
}
// RSS 1.0 (RDF) を解析してタイトル（見出し）だけ表示
function parseRSS1(sXML)
{
var resultText = rssTitle = "";
var itemList = sXML.getElementsByTagName("item");
for (var i=0; i<itemList.length; i++)
{
rssTitle = itemList[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
resultText += rssTitle + "<br>";
}
$("result").innerHTML = resultText;
}
// --></script>
</head>
<body>
<h1>RSSを読み込み見出しを表示する (RSS 1.0 - RDF -)</h1>
<form method="get" name="ajaxForm" onsubmit="rssSearch();return false;">
<select id="siteURL">
<option value="http://hotwired.goo.ne.jp/news/index.rdf">Wired</option>
<option value="http://japan.cnet.com/rss/index.rdf">CNET</option>
<option value="http://www3.asahi.com/rss/index.rdf">Asahi.com</option>
<option value="http://nikkeibp.jp/jp/flash/index.rdf">日経BP</option>
<option value="http://japan.zdnet.com/rss/news/index.rdf">ZDNET</option>
</select>
<input type="button" value="検索する" onClick="rssSearch()">
</form>
<div id="result"></div>
</div>
</body>
</html>
これで、できあがりといきたいところですが、なぜかSafari 2 (v203) では動作しません。他のブラウザでは動作するのでSafari 2には何らかの不具合があるような感じです。このため、Safariでも動作させる場合には、上記のように手軽に処理することができません。以下のようにノードを辿ってみだし記事を得る方法を使う事になります。このようにすればSafari 2でも他のブラウザでも動作します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>RSSを読み込み見出しを表示する (RSS 1.0 - RDF -)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function rssSearch()
{
rssURL = $("siteURL").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","getrss.rb?query="+rssURL+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
parseRSS1(httpObj.responseXML);
}else{
$("result").innerHTML = "読み込み中です...";
}
}
// RSS 1.0 (RDF) を解析してタイトル（見出し）だけ表示
function parseRSS1(sXML)
{
var resultText = rssTitle = "";
var itemList = sXML.getElementsByTagName("item");
for (var i=0; i<itemList.length; i++)
{
rssTitle = itemList[i].childNodes[1].childNodes[0].nodeValue;
resultText += rssTitle + "<br>";
}
$("result").innerHTML = resultText;
}
// --></script>
</head>
<body>
<h1>RSSを読み込み見出しを表示する (RSS 1.0 - RDF -)</h1>
<form method="get" name="ajaxForm" onsubmit="rssSearch();return false;">
<select id="siteURL">
<option value="http://hotwired.goo.ne.jp/news/index.rdf">Wired</option>
<option value="http://japan.cnet.com/rss/index.rdf">CNET</option>
<option value="http://www3.asahi.com/rss/index.rdf">Asahi.com</option>
<option value="http://nikkeibp.jp/jp/flash/index.rdf">日経BP</option>
<option value="http://japan.zdnet.com/rss/news/index.rdf">ZDNET</option>
</select>
<input type="button" value="検索する" onClick="rssSearch()">
</form>
<div id="result"></div>
</div>
</body>
</html>
今回は１行だけの修正で済みましたが、いろいろ処理していくとSafari 2だけがうまく動かないという現象が多発します。そこで、第4項まではSafariは除外するか特別扱いとし以下のようにブラウザを判別して処理を行います（サンプルを
実行する）。最後の項ではSafari 2でも他のブラウザでも問題なく動作するスクリプトを作成します。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>RSSを読み込み見出しを表示する (RSS 1.0 - RDF -)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
Safari = false;
if (navigator.userAgent.indexOf("Safari") > -1) Safari = true;
function rssSearch()
{
rssURL = $("siteURL").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","getrss.rb?query="+rssURL+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
parseRSS1(httpObj.responseXML);
}else{
$("result").innerHTML = "読み込み中です...";
}
}
// RSS 1.0 (RDF) を解析してタイトル（見出し）だけ表示
function parseRSS1(sXML)
{
var resultText = rssTitle = "";
var itemList = sXML.getElementsByTagName("item");
for (var i=0; i<itemList.length; i++)
{
if (Safari)
{
rssTitle = itemList[i].childNodes[1].childNodes[0].nodeValue;
}else{
rssTitle = itemList[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
resultText += rssTitle + "<br>";
}
$("result").innerHTML = resultText;
}
// --></script>
</head>
<body>
<h1>RSSを読み込み見出しを表示する (RSS 1.0 - RDF -)</h1>
<form method="get" name="ajaxForm" onsubmit="rssSearch();return false;">
<select id="siteURL">
<option value="http://hotwired.goo.ne.jp/news/index.rdf">Wired</option>
<option value="http://japan.cnet.com/rss/index.rdf">CNET</option>
<option value="http://www3.asahi.com/rss/index.rdf">Asahi.com</option>
<option value="http://nikkeibp.jp/jp/flash/index.rdf">日経BP</option>
<option value="http://japan.zdnet.com/rss/news/index.rdf">ZDNET</option>
</select>
<input type="button" value="検索する" onClick="rssSearch()">
</form>
<div id="result"></div>
</div>
</body>
</html>
次項では記事の一覧を表示し実際の記事にリンクしてみます。
[
第11章 2:RSSの記事と内容を処理するへ]
[
目次へ]
(2006.1.29)