| 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もなるほど便利ですね。

“SpryでAmazonからの情報表示” への1件のコメント

  1. しまっち より:

    おおおお。おおおおおおお、すごい。
    手作業で毎回リンク作ってる僕の苦労って一体何だったんでしょう。

| INDEX |