ここではAtom形式を読み込み処理します。ただし、Safari 2に関しては、うまく動作しません。Safari 2対応に関しては次項で対応します。
まず、Atomの基本構造は以下のようになっています。
<?xml version="1.0" encoding="utf-8"?>
<feed>
<title>〜</title>
<link>〜</link>
<entry>
<title>〜</title>
<link href="〜">
<summary>〜</summary>
</entry>
</feed>
RSSではitemタグ内にタイトルやリンクなどの情報が入っていましたが、Atomではentryタグ内に記述されています。まずは、見出しだけ表示するスクリプトを作成してみます。itemタグの代わりにentryにするだけでできあがりです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Atomを読み込み見出しだけ表示する</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 atomSearch()
{
atomURL = $("siteURL").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","getrss.rb?query="+atomURL+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
parseAtom(httpObj.responseXML);
}else{
$("result").innerHTML = "読み込み中です...";
}
}
// Atomを解析してタイトル（見出し）だけ表示
function parseAtom(sXML)
{
var resultText = rssTitle = "";
var itemList = sXML.getElementsByTagName("entry");
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>Atomを読み込み見出しだけ表示する</h1>
<p>Safariでは動作しない</p>
<form method="get" name="ajaxForm" onsubmit="atomSearch();return false;">
<select id="siteURL">
<option value="http://www.openspc2.org/blog/atom.xml">OpenSpace</option>
<option value="http://blog.hada.org/naoki/atom.xml">羽田製茶</option>
<option value="http://feeds.sophos.com/ja/atom1_0-sophos-security-news.xml">セキュリティニュース</option>
</select>
<input type="button" value="検索する" onClick="atomSearch()">
</form>
<div id="result"></div>
</div>
</body>
</html>
リンクはlinkタグに記述されています。RSSと異なりlinkタグのhref属性に記述されています。href属性の値を読み出すにはgetAttribute("href")とします。読み出した値（リンク先）をaタグのhrefに設定すればできあがりです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Atomを読み込む（タイトル＆リンク）</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 atomSearch()
{
atomURL = $("siteURL").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","getrss.rb?query="+atomURL+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
parseAtom(httpObj.responseXML);
}else{
$("result").innerHTML = "読み込み中です...";
}
}
// Atomを解析
function parseAtom(sXML)
{
var resultText = atomTitle = atomLink = "";
var itemList = sXML.getElementsByTagName("entry");
for (var i=0; i<itemList.length; i++)
{
atomTitle = itemList[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
atomLink = itemList[i].getElementsByTagName("link")[0].getAttribute("href");
resultText += '<a href="'+atomLink+'">'+atomTitle + "</a><br>";
}
$("result").innerHTML = resultText;
}
// --></script>
</head>
<body>
<h1>Atomを読み込む（タイトル＆リンク）</h1>
<p>Safariでは動作しない</p>
<form method="get" name="ajaxForm" onsubmit="atomSearch();return false;">
<select id="siteURL">
<option value="http://www.openspc2.org/blog/atom.xml">OpenSpace</option>
<option value="http://blog.hada.org/naoki/atom.xml">羽田製茶</option>
<option value="http://feeds.sophos.com/ja/atom1_0-sophos-security-news.xml">セキュリティニュース</option>
</select>
<input type="button" value="検索する" onClick="atomSearch()">
</form>
<div id="result"></div>
</div>
</body>
</html>
Atomでは記事の要約はsummaryタグ内に記述されています。ただし、このsummaryは必須タグではないため、存在しない場合もあります。存在しないデータを読み出すとエラーになりますので、try...catchを使ってエラーが発生した場合には空文字にして書き出します。（サンプルを
実行する）
<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 atomSearch()
{
atomURL = $("siteURL").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","getrss.rb?query="+atomURL+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
parseAtom(httpObj.responseXML);
}else{
$("result").innerHTML = "読み込み中です...";
}
}
// Atomを解析
function parseAtom(sXML)
{
var resultText = atomTitle = atomLink = atomText = "";
var itemList = sXML.getElementsByTagName("entry");
for (var i=0; i<itemList.length; i++)
{
atomTitle = itemList[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
atomLink = itemList[i].getElementsByTagName("link")[0].getAttribute("href");
try { atomText = itemList[i].getElementsByTagName("summary")[0].childNodes[0].nodeValue; }catch(e){ atomText = "" }
resultText += '<a href="'+atomLink+'">'+atomTitle + '</a><div class="desc">'+atomText+'</div>';
}
$("result").innerHTML = resultText;
}
// --></script>
</head>
<body>
<h1>Atomの見出しと記事内容を表示する</h1>
<p>Safariでは動作しない</p>
<form method="get" name="ajaxForm" onsubmit="atomSearch();return false;">
<select id="siteURL">
<option value="http://www.openspc2.org/blog/atom.xml">OpenSpace</option>
<option value="http://blog.hada.org/naoki/atom.xml">羽田製茶</option>
<option value="http://feeds.sophos.com/ja/atom1_0-sophos-security-news.xml">セキュリティニュース</option>
</select>
<input type="button" value="検索する" onClick="atomSearch()">
</form>
<div id="result"></div>
</div>
</body>
</html>
この項までで、RSS 1.0, RSS 2.0, Atomのデータを処理して表示させることができるようになりました。が、Safariで動作しない、タグの順番が入れ替わると動作しない場合がある、といった問題もあります。また、RSS 1,2とAtomで異なるスクリプトのため、3種類ある配信データに対応させるにはスクリプトを分けるといった必要も出てきます。そこで、次項ではRSS 1.0, 2.0, Atomのいずれでも問題なくタイトル、リンク、要約記事を表示できるようにし、Safari 2でも動作させるスクリプトを作成します。
[
第11章 5:全ての形式に対応させるへ]
[
目次へ]
(2006.1.29)