| INDEX |

ブログで本の紹介などしたいと思えば、書籍の表紙も同じく載せたいと考えるのが普通なのか。AMAZONにもリンクするんだろうな、と半ば思考停止のままに思う。で、AmazonのWebServiceを使って書籍の表紙、タイトルなどの情報を拝借しょうと。ついでにAdobeのSpryを使ってみようと。
一応まとまったのが右のもので、AWS(AmazonWebService)のItemLookupというサービスを利用したものです。試しに表示しているのは、敬愛する横山先生の面白本です。

2009/8/18追記:
2009年8月15日上記のAPIの利用方法が一部変更になったので本エントリのサンプルPHPでは不足になります。こちらの記事がとてもわかりやすいです「Amazon Product Advertising API への対応(PHP版)」。

2011/9/5追記:
2011年9月5日現在、SpryではなくJQueryで処理するように変更しました。

まずはAWSに登録です

AWSを利用するには、事前に登録IDを取得する必要があります。耳タコですが、AWSには、いろいろとサービスがあるので楽しそうですね。

AWSのItemLookupを使う

AWSのよく利用されるサービスとして、ItemSearch(検索ですね)があると思いますが、今回は特定書籍の情報が欲しいので、ItemLookupを利用します。アイテムのIDから、該当情報を引くサービスです。でもって、RESTを使ってリクエストを出すことにします。HTTPで普通にリクエスト出すってことです。

Amazonへのリクエストはこんな感じ。[******]は登録ID、[ITEM_ID]は取得したい書籍のIDです。[ITEM_ID]はカンマ区切りで複数指定できます。

http://webservices.amazon.co.jp/onca/xml?Service=AWSECommerceService&AWSAccessKeyId=[******]&Operation=ItemLookup&ResponseGroup=Medium&ContentType=text/xml&Version=2007-01-15&IdType=ASIN&ItemId=[ITEM_ID]

ブラウザで直接入力すると、レスポンスでXMLが返ってくるので、その方法で試したりできます。

AWSにリクエストを出すPHPを用意する

しかしながら、サイトで利用する際は、例えばJavascriptなどから、直接amazonへリクエストを出すことはできません。で、大抵はPHPなどのサーバプログラムを介してリクエストを出すようです。

PHPはこんな感じ。かなり簡単ですが…。

<?php
$REST_URI = "http://webservices.amazon.co.jp/onca/xml?";
$KEY_ID   = "*************";
$ITEM_ID  = $_REQUEST["ASIN"];
$reqUrl = $REST_URI .
"Service=AWSECommerceService" .
"&AWSAccessKeyId=" . $KEY_ID .
#"&AssociateTag=" .
"&Operation=ItemLookup" .
"&ResponseGroup=Medium" .
"&ContentType=text/xml" .
"&Version=2007-01-15" .
"&IdType=ASIN" .
"&ItemId=" . $ITEM_ID;
header("Content-type: text/xml; cahrset=UTF8");
echo file_get_contents($reqUrl);
?>

Scriptでリクエストを出すのは、こちらのPHPを使います。

SpryでXMLDataSetをつくる

Spryというのは、Adobeからリリースされている、Ajax的なことがお手軽に利用できるライブラリです。今回は、Spry プレリリース 1.5を使います。

XMLをロードする際には、Spryの内の、xpath.js、SpryData.js、を使います。大抵これで事足りると思います。これを外部スクリプトとして割り当てておいて、以下のようにDataSetを作成します。

<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript">
var uri = [PHPのURI]?ID=********;
var ds = new Spry.Data.XMLDataSet( uri , "ItemLookupResponse/Items/Item" , { subPaths: ["ItemAttributes","MediumImage"] });
</script>

ds、というのがDataSetの変数になりますが、バインド先の指定の際、このまま使います。

Spryでバインドする

DataSetに読み込んだデータは、spryの独自Attributeを使って表示に反映させます。以下の「spry:~」というのがそれです。で、XMLのタグのデータは、「{tag name}」といった形式で割り当てていきます。先に指定したDataSetの変数名「ds」と「spry:region」の指定が対応しています。

<div spry:region="ds">
<div spry:state="loading">NOW LOADING</div>
<div spry:state="error">ERROR</div>
<div spry:state="ready">
<a href="{DetailPageURL}" target="_blank"><img src="{MediumImage/URL}" width="{MediumImage/Width}" height="{MediumImage/Height}" alt="{ItemAttributes/Title}" border="0" ></a><br/>
{ItemAttributes/Title}<br/>
{ItemAttributes/Author}<br/>
({ItemAttributes/Publisher})
</div>
</div>

※「spry:state」で指定された要素は、それぞれ、読み込み時、エラー時、割り当て時に表示される要素を指定するものです。

最後に

基本は、これまでの部分でXMLのデータが表示されます。AWSもSpryもなるほど便利ですね。

| INDEX |