アマゾンWebサービスで得られたXMLデータを解析して書籍タイトルを表示させてみます。
まず、XMLデータを見てみましょう。以下が実際のXMLの一部を抜き出したものです。
<Item>
<ASIN>4798110450</ASIN>
<DetailPageURL>
</DetailPageURL>
<ItemAttributes>
<Author>吉田 茂樹</Author>
<Binding>大型本</Binding>
<Creator Role="著">吉田 茂樹</Creator>
<ListPrice>
<Amount>2310</Amount>
<CurrencyCode>JPY</CurrencyCode>
<FormattedPrice>￥ 2,310</FormattedPrice>
</ListPrice>
<NumberOfPages>328</NumberOfPages>
<ProductGroup>Book</ProductGroup>
<PublicationDate>2006-03-02</PublicationDate>
<Publisher>翔泳社</Publisher>
<Title>TCP/IP入門 第2版</Title>
</ItemAttributes>
書籍の情報はItemタグ内に含まれています。その中に書籍情報がたくさんありますが、Titleタグ部分が書籍のタイトルになります。Itemタグは書籍の数（今回の場合は最大10）だけ存在します。つまりItemタグの個数だけfor()を使って繰り返し処理を行い、Itemタグ内にあるTitleタグの最初のテキストノードの文字を取得し表示すれば、書籍一覧を表示することができます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>アマゾン検索 (書籍タイトル一覧)</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 amazonSearch()
{
n = $("bCode").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","amazon.rb?query="+n+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = bookList(httpObj.responseXML);
}
}
function bookList(xml)
{
txt = "";
itemList = xml.getElementsByTagName("Item");
for (i=0; i<itemList.length; i++)
{
bookTitle = itemList[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue;
txt += bookTitle + "<br>";
}
return txt;
}
// --></script>
</head>
<body>
<h1>アマゾン検索 (書籍タイトル一覧)</h1>
<form method="get" name="ajaxForm" onsubmit="amazonSearch();return false;">
ジャンルコード：<input type="text" value="466298" id="bCode">
<input type="button" value="タイトル一覧表示" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
XMLタグ内には多くの書籍情報がありますが、次に金額を表示させてみます。金額はクエリーにResponseGroup=Mediumを指定した場合、FormattedPriceタグの最初のノードに円記号付き、カンマ付きの数値が入っています（整形されていない金額はResponseGroup=Largeなどで取得できます。この場合はタグが異なります。）。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>アマゾン検索 (書籍と金額を一覧で表示)</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 amazonSearch()
{
n = $("bCode").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","amazon.rb?query="+n+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = bookList(httpObj.responseXML);
}
}
function bookList(xml)
{
txt = "";
itemList = xml.getElementsByTagName("Item");
for (i=0; i<itemList.length; i++)
{
bookTitle = itemList[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue;
bookPrice = itemList[i].getElementsByTagName("FormattedPrice")[0].childNodes[0].nodeValue;
txt += bookTitle + " "+bookPrice+"<br>";
}
return txt;
}
// --></script>
</head>
<body>
<h1>アマゾン検索 (書籍と金額を一覧で表示)</h1>
<form method="get" name="ajaxForm" onsubmit="amazonSearch();return false;">
ジャンルコード：<input type="text" value="466298" id="bCode">
<input type="button" value="タイトル一覧表示" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
書籍のタイトルも金額も表示できました。次は書籍名をクリックしたらアマゾンのページに移動するようにリンクを指定してみます。該当する書籍の詳細ページへのリンクを示すタグはDetailPageURLです。このタグの最初のテキストノードの文字がhttp://で始まるURLになっています。このURLをaタグのhrefの値として指定すればリンクを設定することができます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>アマゾン検索 (リンク付き一覧表示)</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 amazonSearch()
{
n = $("bCode").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","amazon.rb?query="+n+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = bookList(httpObj.responseXML);
}
}
function bookList(xml)
{
txt = "";
itemList = xml.getElementsByTagName("Item");
for (i=0; i<itemList.length; i++)
{
bookTitle = itemList[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue;
bookPrice = itemList[i].getElementsByTagName("FormattedPrice")[0].childNodes[0].nodeValue;
bookLink = itemList[i].getElementsByTagName("DetailPageURL")[0].childNodes[0].nodeValue;
txt += '<a href="'+bookLink+'">'+ bookTitle + "</a> "+bookPrice+"<br>";
}
return txt;
}
// --></script>
</head>
<body>
<h1>アマゾン検索 (リンク付き一覧表示)</h1>
<form method="get" name="ajaxForm" onsubmit="amazonSearch();return false;">
ジャンルコード：<input type="text" value="466298" id="bCode">
<input type="button" value="タイトル一覧表示" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
ここまでは売れている順番で書籍を表示しましたが、価格順や新刊順にすることもできます。次項では、書籍の表示条件を指定して表示させてみます。
[
第八章 3:表示条件を設定するへ]
[
目次へ]
(2006.1.24)