書籍でなくDVDの一覧を表示させてみます。原理は全く同じですがクエリーで指定できるパラメータが若干異なっています。例えばDVDの場合、表示指定は以下の種類になります。
| salesrank | 売れている順 |
| pricerank | 安い順 |
| -pricerank | 高い順 |
| titlerank | アルファベット順 |
| -titlerank | アルファベット逆順 |
| -orig-rel-date | 新しい順 |
| orig-rel-date | 古い順 |
また、クエリーで送信するSearchIndexには「SearchIndex=DVD」のようにDVDを指定する必要があります。あとは、書籍の場合と同じで受信したXMLデータを解析（XMLの
サンプルを表示する）します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>アマゾン検索 (DVDタイトル一覧)</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++)
{
dvdURL = itemList[i].getElementsByTagName("DetailPageURL")[0].childNodes[0].nodeValue;
dvdObj = itemList[i].getElementsByTagName("SmallImage")[0];
dvdImage = dvdObj.getElementsByTagName("URL")[0].childNodes[0].nodeValue;
txt += '<a href="' + dvdURL +'"><img src="'+dvdImage+'"></a>';
}
return txt;
}
// --></script>
</head>
<body>
<h1>アマゾン検索 (DVDタイトル一覧)</h1>
<form method="get" name="ajaxForm" onsubmit="amazonSearch();return false;">
ジャンルコード：<input type="text" value="562020" id="bCode">
<input type="button" value="タイトル一覧表示" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
書籍の時にもサムネール画像を表示しましたが、DVDでも同様の方法でサムネール画像を表示することができます。書籍の時には一番小さな画像を利用しました。XML内には小中大の３種類のデータが用意されているので、メニューにより自由に大きさを選択できるようにしたものが以下のサンプルです。クエリー部分は全く変更せずにXMLの解析部分だけの変更になります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>アマゾン検索 (DVDタイトル一覧。サムネールサイズ指定)</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)
{
dispType = $("dType").value;
txt = "";
itemList = xml.getElementsByTagName("Item");
for (i=0; i<itemList.length; i++)
{
dvdURL = itemList[i].getElementsByTagName("DetailPageURL")[0].childNodes[0].nodeValue;
dvdObj = itemList[i].getElementsByTagName(dispType)[0];
dvdImage = dvdObj.getElementsByTagName("URL")[0].childNodes[0].nodeValue;
txt += '<a href="' + dvdURL +'"><img src="'+dvdImage+'"></a>';
}
return txt;
}
// --></script>
</head>
<body>
<h1>アマゾン検索 (DVDタイトル一覧。サムネールサイズ指定)</h1>
<form method="get" name="ajaxForm" onsubmit="amazonSearch();return false;">
ジャンルコード：<input type="text" value="562020" id="bCode"><br>
<select id="dType">
<option value="SmallImage">小サイズで表示</option>
<option value="MediumImage">中サイズで表示</option>
<option value="LargeImage">大サイズで表示</option>
</select>
<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>アマゾン検索 (DVDタイトル一覧。表示条件指定)</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++)
{
dvdURL = itemList[i].getElementsByTagName("DetailPageURL")[0].childNodes[0].nodeValue;
dvdObj = itemList[i].getElementsByTagName("MediumImage");
dvdImage = "noImage.gif";
if (dvdObj.length > 0)
{
dvdImage = dvdObj[0].getElementsByTagName("URL")[0].childNodes[0].nodeValue;
}
txt += '<a href="' + dvdURL +'"><img src="'+dvdImage+'"></a>';
}
return txt;
}
// --></script>
</head>
<body>
<h1>アマゾン検索 (DVDタイトル一覧。表示条件指定)</h1>
<form method="get" name="ajaxForm" onsubmit="amazonSearch();return false;">
ジャンルコード：<input type="text" value="562020" id="bCode"><br>
<select id="findType">
<option value="salesrank">売れている順番に表示</option>
<option value="pricerank">安い順に表示</option>
<option value="-pricerank">高い順に表示</option>
<option value="titlerank">アルファベット順に表示</option>
<option value="-titlerank">アルファベット逆順に表示</option>
<option value="-orig-rel-date">新しい順に表示</option>
<option value="orig-rel-date">古い順に表示</option>
</select>
<input type="button" value="タイトル一覧表示" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
次項では家電商品を扱いレビュー情報を表示させます。
[
第八章 6:家電商品一覧を表示するへ]
[
目次へ]
(2006.1.24)