アマゾンでの書籍の表示条件は以下のものを指定することができます。
| salesrank | 売れている順に表示 |
| pricerank | 価格の安い順に表示 |
| inverse-pricerank | 価格の高い順に表示 |
| daterank | 新しく発行された順に表示 |
| titlerank | アルファベット順に表示 |
| -titlerank | アルファベットの逆順に表示 |
この表示条件はクエリーのSort=の部分に指定します。サンプルではCGI側に、この条件（文字列）を渡しています。（サンプルを
実行する）
<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;
ft = $("findType").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","amazon.rb?query="+n+"&findtype="+ft+"&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"><br>
<select id="findType">
<option value="salesrank">売れている順に表示</option>
<option value="pricerank">価格の安い順に表示</option>
<option value="inverse-pricerank">価格の高い順に表示</option>
<option value="daterank">新しく発行された順に表示</option>
<option value="titlerank">アルファベット順に表示</option>
<option value="-titlerank">アルファベットの逆順に表示</option>
</select>
<br>
<input type="button" value="タイトル一覧表示" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
アマゾンでは書籍のタイトルだけでなくサムネール画像もXMLで返してくれますので、次にサムネール画像を表示させてみましょう。サムネール画像の情報も得るにはクエリーでResponseGroup=Medium,ImagesとしてImagesを指定します。この場合、返されるXMLを一部抜粋すると以下のようになります（一部のみ展開して表示し、余計な部分は省略しています。全てを
表示する）。
<Item>
<ASIN>4408592552</ASIN>
<DetailPageURL>
</DetailPageURL>
<SmallImage>
<URL>
http://images.amazon.com/images/P/4408592552.09._SCTHUMBZZZ_.jpg
</URL>
<Height Units="pixels">75</Height>
<Width Units="pixels">52</Width>
</SmallImage>
<MediumImage>
<URL>
http://images.amazon.com/images/P/4408592552.09._SCMZZZZZZZ_.jpg
</URL>
<Height Units="pixels">160</Height>
<Width Units="pixels">111</Width>
</MediumImage>
<LargeImage>
<URL>
http://images.amazon.com/images/P/4408592552.09._SCLZZZZZZZ_.jpg
</URL>
<Height Units="pixels">500</Height>
<Width Units="pixels">348</Width>
</LargeImage>
<ImageSets>
<ImageSet Category="primary">
<SmallImage>
<URL>
http://images.amazon.com/images/P/4408592552.09._SCTHUMBZZZ_.jpg
</URL>
<Height Units="pixels">75</Height>
<Width Units="pixels">52</Width>
</SmallImage>
<MediumImage>
<URL>
http://images.amazon.com/images/P/4408592552.09._SCMZZZZZZZ_.jpg
</URL>
<Height Units="pixels">160</Height>
<Width Units="pixels">111</Width>
</MediumImage>
<LargeImage>
<URL>
http://images.amazon.com/images/P/4408592552.09._SCLZZZZZZZ_.jpg
</URL>
<Height Units="pixels">500</Height>
<Width Units="pixels">348</Width>
</LargeImage>
</ImageSet>
</ImageSets>
<ItemAttributes>
<Author>木村 佳子</Author>
<Binding>単行本（ソフトカバー）</Binding>
<Creator Role="著">木村 佳子</Creator>
<ListPrice>
<Amount>1470</Amount>
<CurrencyCode>JPY</CurrencyCode>
<FormattedPrice>￥ 1,470</FormattedPrice>
</ListPrice>
<NumberOfPages>220</NumberOfPages>
<ProductGroup>Book</ProductGroup>
<PublicationDate>2006-01-28</PublicationDate>
<Publisher>実業之日本社</Publisher>
<Title>株で儲ける逆転の発想 絶対失敗しない株式投資の知恵</Title>
</ItemAttributes>
<OfferSummary>
<LowestNewPrice>
<Amount>1470</Amount>
<CurrencyCode>JPY</CurrencyCode>
<FormattedPrice>￥ 1,470</FormattedPrice>
</LowestNewPrice>
<TotalNew>1</TotalNew>
<TotalUsed>0</TotalUsed>
<TotalCollectible>0</TotalCollectible>
<TotalRefurbished>0</TotalRefurbished>
</OfferSummary>
</Item>
XMLデータには小サイズ、中サイズ、大サイズの画像の情報が入っています。今回はサムネールなので一番小さいサイズを使って表示させてみます。小サイズはSmallImageタグ内に入っています。このSmallImageタグ内のURLタグの最初のテキストノードの文字列が画像のURLになります。文字の代わりに、この画像を表示させればよさそうですが、書籍によっては画像が存在しないものもあります。そこで、SmallImageタグの個数を調べて1以上であればアマゾンが提供する画像を表示し、そうでない場合は自前で用意した「画像なし」の画像を表示するようにします。（サンプルを
実行する）
<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;
ft = $("findType").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","amazon.rb?query="+n+"&findtype="+ft+"&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++)
{
imageData = itemList[i].getElementsByTagName("SmallImage");
bookImage = "noImage.gif";
if (imageData.length > 0)
{
bookImage = imageData[0].getElementsByTagName("URL")[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+'"><img src="'+ bookImage + '"></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"><br>
<select id="findType">
<option value="salesrank">売れている順に表示</option>
<option value="pricerank">価格の安い順に表示</option>
<option value="inverse-pricerank">価格の高い順に表示</option>
<option value="daterank">新しく発行された順に表示</option>
<option value="titlerank">アルファベット順に表示</option>
<option value="-titlerank">アルファベットの逆順に表示</option>
</select>
<br>
<input type="button" value="タイトル一覧表示" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
サムネール画像が存在しない場合には、以前のサンプルのようにタイトル文字を表示することもできます。（サンプルを
実行する）
<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;
ft = $("findType").value;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","amazon.rb?query="+n+"&findtype="+ft+"&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++)
{
bookPrice = itemList[i].getElementsByTagName("FormattedPrice")[0].childNodes[0].nodeValue;
bookLink = itemList[i].getElementsByTagName("DetailPageURL")[0].childNodes[0].nodeValue;
imageData = itemList[i].getElementsByTagName("SmallImage");
if (imageData.length > 0)
{
bookImage = imageData[0].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
txt += '<a href="'+bookLink+'"><img src="'+ bookImage + '"></a> '+bookPrice+"<br>";
}else{
bookTitle = itemList[i].getElementsByTagName("Title")[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"><br>
<select id="findType">
<option value="salesrank">売れている順に表示</option>
<option value="pricerank">価格の安い順に表示</option>
<option value="inverse-pricerank">価格の高い順に表示</option>
<option value="daterank">新しく発行された順に表示</option>
<option value="titlerank">アルファベット順に表示</option>
<option value="-titlerank">アルファベットの逆順に表示</option>
</select>
<br>
<input type="button" value="タイトル一覧表示" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
作成するページによっては特定のキーワードで表示される書籍だけ表示させたい場合もあります。そこで次項では指定したキーワードの書籍を表示させてみます。
[
第八章 4:特定キーワードの書籍を表示するへ]
[
目次へ]
(2006.1.24)