Amazonの商品を検索するウィジェット　jQuery Amazon ProductSearch

　楽天市場、Yahoo!ショッピングに続いて最後の一角、Amazonの商品一覧を表示するウィジェットを作りました。楽天バージョンなどと同じく入力したキーワードで商品検索を行い、ヒットした内容を表示します。 これはjQueryのプラグインとして動作します。ただ、AmazonのAPIについては、他のAPIのようにJavaScriptだけで完結したアプリケーションを 作ることが困難なため、今回はPHPとJavaScriptで連携する方法をとることにしています。

※ 2011/10/26にAmazonはProduct Advertising APIの仕様変更を行う予定で、アソシエイトIDの指定が必須になるらしいです。

デモページ
⇒アフィリエイトでも稼げる！　Amazon商品検索ウィジェット
⇒サイドページ用のウィジェット

ダウンロードページ

＜最新バージョン＞
JavaScript バージョン０.１／CSS バージョン０.１
　jQueryプラグイン　⇒Amazon ProductSearch.js（ベータ版ver 0.1 13KB）
　CSSファイル　⇒Amazon ProductSearch.css（ver 0.1 3KB）
 
サイドバー用JavaScript／CSS
　jQueryプラグイン　⇒Amazon ProductSearch Sidebar.js
　CSSファイル　⇒Amazon ProductSearch Sidebar.css

まずは前準備

　このプラグインはjQueryの最新バージョン1.4以上を必要とします。jQueryライブラリはこちらのページでダウンロードできますが、 デモページではGoogle Libraries APIを利用しています。 今回呼び出すライブラリはjQueryとjQuery UIの二つです。

HEADタグ内の記述例 <script src="https://www.google.com/jsapi"></script> <script type="text/javascript"> //<![CDATA[ google.load('jquery', '1.4'); google.load('jqueryui', '1.8'); //]]> </script>

ライブラリに続けてAmazon ProductSearchのJavaScriptファイルをscriptタグに記述します。 <script type="text/javascript" src="js/jquery.amazon-product-search.js"></script>

　CSSファイルは好きなテーマのjQuery UIセットと、Amazon ProductSearchのCSSファイルをインクルードします。 このときjQuery UIのCSSファイルと画像フォルダをサイト上にアップする必要がありますが、 ファイル内容を特に変更しないならば次の例のようにGoogle Libraries APIを利用する方が手軽です。
次のURLのjqueryui/の後にバージョンの数値、themes/の後にテーマ名を入れるだけです。画像フォルダの用意はいりません。
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css
使用可能なテーマは、base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vaderなどです。
参考サイトjQuery UI Blog <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/jquery.amazon-product-search.css" type="text/css" media="screen" />

Amazon Web サービスに登録する

　Amazonの商品検索はAmazon Web サービス（AWS）のProduct Advertising APIを利用します。 ただ、このAPIを使用するには楽天ウェブサービスやYahoo!デベロッパーネットワークと同じようにメンバー登録する必要があります。 登録方法はajaxtowerというサイトに詳しく載っているので参考にしてください。 Product Advertising APIを使うために必要なのは、アクセスキーIDとシークレットキーです。また、アフィリエイトを利用する場合、 アソシエイトIDが別途必要です。アフィリエイト用のサイトやブログを作成後、こちらのページでIDを取得できます。

Product Advertising APIにリクエストする

　商品検索のリクエストは、Amazonが2009年8月から実質的にクライアントサイドから直接リクエストできないようにしたので、すべてPHPといったサーバーサイド技術で 行われることになりました。ブログの過去記事にも書いていますが、商品検索系のウィジェットはもともとAmazonから 始めるつもりでした。しかしJavaScriptオンリーの実装はやはり無理なので、紆余曲折を経てPHPと連携した商品検索ウィジェットを作ることになったのです。

　調べてみるとPHPのライブラリPEARに、Services_Amazonクラスという便利な認証APIがあります。 とはいえ、これを利用するにはライブラリをインストールしなければならず、自分のようなレンタルサーバーを使う身としては手間がかかります。 そこで、ライブラリ不要で認証とリクエストを済ませられないかと調べたところ、Amazon® AWS HMAC signed request using PHPというページを見つけました。 ここで定義されているaws_signed_request関数を使用すれば、面倒なAWS認証の手続きを簡単にすますことができます。コードを以下に載せておきます。

aws_signed_request.php function aws_signed_request($region, $params, $public_key, $private_key) { /* Copyright (c) 2009 Ulrich Mierendorff Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ /* Parameters: $region - the Amazon(r) region (ca,com,co.uk,de,fr,jp) $params - an array of parameters, eg. array("Operation"=>"ItemLookup", "ItemId"=>"B000X9FLKM", "ResponseGroup"=>"Small") $public_key - your "Access Key ID" $private_key - your "Secret Access Key" */ // some paramters $method = "GET"; $host = "ecs.amazonaws.".$region; $uri = "/onca/xml"; // additional parameters $params["Service"] = "AWSECommerceService"; $params["AWSAccessKeyId"] = $public_key; // GMT timestamp $params["Timestamp"] = gmdate("Y-m-d\TH:i:s\Z"); // API version $params["Version"] = "2009-03-31"; // sort the parameters ksort($params); // create the canonicalized query $canonicalized_query = array(); foreach ($params as $param=>$value) { $param = str_replace("%7E", "~", rawurlencode($param)); $value = str_replace("%7E", "~", rawurlencode($value)); $canonicalized_query[] = $param."=".$value; } $canonicalized_query = implode("&", $canonicalized_query); // create the string to sign $string_to_sign = $method."\n".$host."\n".$uri."\n".$canonicalized_query; // calculate HMAC with SHA256 and base64-encoding $signature = base64_encode(hash_hmac("sha256", $string_to_sign, $private_key, True)); // encode the signature for the request $signature = str_replace("%7E", "~", rawurlencode($signature)); // create request $request = "http://".$host.$uri."?".$canonicalized_query."&Signature=".$signature; // do request $response = @file_get_contents($request); if ($response === False) { return False; } else { // parse XML $pxml = simplexml_load_string($response); if ($pxml === False) { return False; // no xml } else { return $pxml; } } }

　この関数の引数に自分のアクセスキーIDとシークレットキーID、そして検索キーワードを含めたパラメーターを渡すと、レスポンスのXMLが返ってくるので、 後はそれをJSON形式にして出力する内容のPHPファイルを作って、クライアント側でそのPHPファイルをAjaxリクエストするようにすれば、間接的に商品検索結果を受け取ることができるようになります。

amazon-product-request.php（2011/09/22修正） /* aws_signed_request関数が記述されているファイルを読み込む */ include("aws_signed_request.php"); /* Amazon Web サービスで取得したアクセスキーIDと秘密キー、もしあればアソシエイトIDを変数に入れます */ $public_key = PUBLIC_KEY_ID; $private_key = SECRET_KEY_ID; $associate_tag = ASSOCIATE_ID; /* Ajaxリクエストするとき、キーワードとカテゴリー名、ページ番号がパラメーターに含まれます */ $keywords = $_GET['keywords']; $search_index = $_GET['search_index']; $item_page = $_GET['item_page']; $sort = $_GET['sort']; $param = array( /* Common Param */ "Service" => "AWSECommerceService", "Operation" => "ItemSearch", "Version" => "2011-08-01", "AssociateTag" => $associate_tag, "ResponseGroup" => "Request,EditorialReview,Images,ItemAttributes,OfferSummary,Reviews,SalesRank", /* individual Param */ "SearchIndex" => $search_index, "Keywords" => $keywords, "ItemPage" => $item_page, "Sort" => $sort ); /* Ajaxで処理しやすいようにJSON形式で出力します */ header("Content-Type: application/json; charset=utf-8"); $pxml = aws_signed_request("jp", $param, $public_key, $private_key); if ($pxml === False) { $response = json_encode(array("result" => "failed")); echo $response; } else { if (isset($pxml->Items)) { $response = json_encode(array("result" => $pxml->Items)); echo $response; } }

　これら二つのPHPファイルが準備できたらアップロードして、それでサーバー側の準備は終了です。

ウィジェットの設置方法

　それではウィジェットの実装に移っていきます。body要素の終了タグ直線などに次のような短いスクリプトを書きます。 jQuery(function() { jQuery('#amazon_product').amazonProductSearch( 'ドラえもん', 'キャラクター', 'グッズ', 'http://hogehoge.com/amazon-product-request.php' ); });

　この例ではウィジェットが初期化された際にドラえもん、キャラクター、グッズという単語で商品を検索し、 ID名がamazon_productという要素内に結果を10件表示します。キーワードはウィジェットを設定したページ内容に関連したものにすると効果的です。 最後の引数にはProduct Advertising APIにリクエストするPHPファイルのURLを指定します。

　オプションとして、最後の引数にハッシュを渡すことができます。searchIndexプロパティは商品カテゴリを指定します。初期値はAll（全商品）です。 各カテゴリーのパラメータはこちらのサイトに詳しく載っています。
itemPageプロパティは検索結果のページ番号を指定します。Product Advertising APIは最大で10件までしか一度に結果を受け取れないので、 以降の結果を取得するには次のページ番号を指定しなければなりません。デフォルトは1です。
sortプロパティは商品データの並び方を指定します。ただし商品カテゴリーがAll以外で機能します。また、カテゴリーによってソートの種類が異なってくるので、 ソート名について詳しくはこちらのページを参考にしてください。
widthプロパティはウィジェットの横幅をpx単位で指定します。 baseFontSizeはウィジェットの基準となるフォントサイズを指定します。初期値は12pxです。 defaultKeywordsは配列形式です。デフォルトで検索ワードに入れておきたい単語を配列にして入れます。 Amazon ProductSearch.jsの182行目あたりにデフォルトオプションの記述があり、 始めから"ファッション"、"腕時計"、"DVD"、"ゲーム"が登録されているので、この部分は自由に好きな単語に変えてください。

jQuery(function() { jQuery('#amazon_product').amazonProductSearch( 'ドラえもん', 'キャラクター', 'http://hogehoge.com/amazon-product-request.php', { 'searchIndex': 'Books', 'itemPage': 5, 'sort': 'salesrank' } ); });

　ウィジェットを埋め込む箇所に記述するタグは次のようになります。ID属性名は自由ですが、スクリプトのjQueryオブジェクトに渡すものと必ず同じにしてください。 <div id="amazon_product"></div>

アフィリエイトが関係するので利用規約を作りました。
・このウィジェットを利用するにはAmazon Web サービス（AWS）のアクセスキーIDとシークレットキーIDが必要です。
・アフィリエイトを利用するにはAmazonのアソシエイトIDが必要です。
・アソシエイトIDを指定すると、商品のリンクは常にそのアソシエイトIDを経由して作られます。
・Amazon商品の価格は「中古価格」と「新品価格」、「コレクター価格」の三つに区分されます。在庫がある場合、それぞれの最低価格が表示されます。
・短時間に大量のアクセスがかかると、一定時間利用できなくなる場合があります。
・AWSのサーバー状況によって、リクエストに不具合を生じる場合があります。
・このプラグインはProduct Advertising APIに依存しています。将来的にAWSがAPIの一部を変更もしくは終了する可能性があり、 その際にウィジェットが正常に動作しなくなる場合があります。
・このウィジェットを利用したことにより生じるいかなる損害に関して管理人は責任を負いかねます。

バージョン情報

2011/09/21 ver 0.1
ベータ版最初バージョン。

※このプラグインはまだ開発中のベータ版です。不具合等ありましたら、ブログコメントやメール等でお知らせください。

動作確認：　Firefox6.0 Chrome14.0beta IE7-9