ここで使う方法はGoogle Mapsとは異なりアマゾンにクエリーを送って戻ってきたXMLデータをJavaScriptで処理させるものです。ブラウザのURLに指定された情報を入力すればブラウザ上にXML情報が表示されます（FirefoxなどXMLデータを整形して表示できるブラウザの方が良いでしょう）。
その前に、アマゾンのWebサービスを利用するにはGoogle Mapsと同じく申し込みが必要です。アカウントを持っていない人はアカウントを作成しましょう。アカウントを持っているだけでも駄目でWebサービスは、別途申し込む必要があります。また、Googleよりも、登録時に入力する情報は多くあります。
まず、以下のURLにアクセスします。[1] 登録ID (SubscriptionID) を取得します、のリンクをクリックします。
http://www.amazon.co.jp/exec/obidos/subst/associates/join/webservices.html/503-3082273-2271147
すでに登録している人はメールアドレスとパスワードを入力します。未登録の場合にはNo, I ama anew customer.のラジオボタンにチェックを入れてContinueボタンをクリックします。
名前とメールアドレスとパスワードを入力します。入力したらContinueボタンをクリックします。
住所などの個人情報を入力します。
情報が正しく入力できれば登録は完了です。
あとは、使用するKey IDを確認します。とりあえず上記画面のAmazon E-Commerce Serviceのリンクをクリックします。Amazon E-Commerce Serviceの画面になります。右上にYour Web Service Accountのボタンがありますので、このボタンの上にマウスを重ねます。すると、メニューが表示されるのでView Access Key Identifiersをクリックします。すると以下のような画面が表示されます。
ここにAccess Key IDという項目があります。このIDが登録した自分のアクセスキーになります。アマゾンのWebサービスを利用する場合には、このIDを指定します。もし、アマゾンのアフィリエイト（アソシエイト）に申し込んでいる場合には、そのアフィリエイトIDも指定することができます。
アマゾンのWebサービスを利用するためのドキュメントは以下のURLにあります。
http://www.amazon.com/gp/browse.html/104-2478592-0899925?%5Fencoding=UTF8&node=3487571&no=12738641&me=A36L942TSJ2AJA
これで準備ができました。
アマゾンをAjaxで利用する場合にはサーバー側にCGIが必要になります。というのもAjaxでは動作しているスクリプトが置かれている同一サーバー上以外の情報を取得できないためです。そこで、ここではRuby (1.8.4)を使って、ブラウザから要求されたものをアマゾンのサーバーに渡し、その結果をブラウザに返すものを用意します。以下がサンプルですが（おかしな部分は、おおめに見てやってください）、●の部分が先ほど取得したアクセスキー、■の部分がアフィリエイトのIDになります。アフィリエイトに参加していない場合には&AssociateTag=の部分は不要です。また、最初のサンプルではresponseTextで受け取るためMIME Typeをtext/htmlにしていますが、それ以外のサンプルではXMLで受け取るためMIME typeをtext/xmlにしておく必要があります。
#!/usr/local/bin/ruby
require "cgi-lib"
input = CGI.new
inputdata = input["query"]
print "Content-type: text/html\n\n"
fh = open("| curl 'http://webservices.amazon.co.jp/onca/xml?Service=AWSECommerceService&AWSAccessKeyId=●&AssociateTag=■&Operation=ItemSearch&Sort=daterank&SearchIndex=Books&BrowseNode="+inputdata+"&ResponseGroup=Medium'")
while !fh.eof
print fh.gets
end
fh.close
それでは、最も簡単なところから始めましょう。以下のサンプルはコンピューター・インターネット関係の書籍の情報を表示するものです。（サンプルを実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>アマゾン検索 (responseText)</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()
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","amazon.rb?query=466298&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerText = httpObj.responseText;
$("result").textContent = httpObj.responseText;
}
}
// --></script>
</head>
<body>
<h1>アマゾン検索 (responseText)</h1>
<form method="get" name="ajaxForm" onsubmit="amazonSearch();return false;">
<input type="button" value="コンピュータ・インターネットのカテゴリの書籍を検索" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
サンプルを実行するとXMLデータが、ごっそりと表示されます。このデータをFirefoxなどで見ると、どのような構造になっているか知る事ができます（このXMLの構造はサーバーに要求するResponseGroupの値によって変わります）。（アマゾンのXMLのサンプルを表示する）
簡単なところで、指定したカテゴリ（ここではコンピュータ・インターネット）の総冊数を取得してみます。XMLを見ると
<TotalResults>66190</TotalResults>
とあります。これが総冊数になります。このTotalResultsの最初のテキストノードの値を表示すればできあがりです（今までにもXMLのデータを表示してきましたので、説明は省略します）。（実際のサンプルを実行する）
<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()
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","amazon.rb?query=466298&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
xmlData = httpObj.responseXML;
total = xmlData.getElementsByTagName("TotalResults")[0].childNodes[0].nodeValue;
$("result").innerHTML = "このカテゴリには<b>" + total + "</b>冊の本があります。";
}
}
// --></script>
</head>
<body>
<h1>アマゾン検索 (特定ジャンルの総冊数表示)</h1>
<form method="get" name="ajaxForm" onsubmit="amazonSearch();return false;">
<input type="button" value="コンピュータ・インターネットのカテゴリの書籍総冊数表示" onClick="amazonSearch()">
</form>
<div id="result"></div>
</body>
</html>
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(srchType)
{
if (srchType == 0) return;
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","amazon.rb?query="+srchType+"&cache="+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
xmlData = httpObj.responseXML;
total = xmlData.getElementsByTagName("TotalResults")[0].childNodes[0].nodeValue;
$("result").innerHTML = "このカテゴリには<b>" + total + "</b>冊の本があります。";
}
}
// --></script>
</head>
<body>
<h1>アマゾン検索 (指定されたジャンルの総冊数表示)</h1>
<form method="get" name="ajaxForm" onsubmit="return false;">
<select onChange="amazonSearch(this.value)">
<option value="0">カテゴリを選択してください</option>
<option value="466282">ビジネス・経済・キャリア</option>
<option value="466298">コンピューター・インターネット</option>
<option value="492054">投資・金融・会社経営</option>
<option value="466284">文学・評論</option>
<option value="571582">人文・思想</option>
<option value="571584">社会・政治</option>
</select>
</form>
<div id="result"></div>
</body>
</html>
カテゴリーのコードに関しては開発用のドキュメント (2005-10-05)の432ページ以降に掲載されています。アマゾンは各国でサービスが異なるため、日本用のリクエストコードなどを指定しないといけません。つまり米国のアマゾンと日本のアマゾンではURLで指定するキーが異なりますので注意が必要です。
カテゴリーコードはアマゾンのWebサイトで表示されるURLからも知る事ができます。アマゾンのサイトでカテゴリを選択していきます。例えば以下のURLの場合には赤字の数値部分がカテゴリーコードになります。
http://www.amazon.co.jp/exec/obidos/tg/browse/-/466280/ref=amb_b_nav_466280/503-3082273-2271147
このコードを指定すれば好きなカテゴリーの情報を取得することができます。
本の総冊数を表示させるだけでは、意味がありませんので次項では、XMLデータを解析し書籍一覧を表示させてみます。
[第八章 2:書籍一覧を表示するへ]
[目次へ]
(2006.1.24)