ブログで本の紹介などしたいと思えば、書籍の表紙も同じく載せたいと考えるのが普通なのか。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もなるほど便利ですね。