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

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

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

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

ダウンロードページ

<最新バージョン>
JavaScript バージョン0.1CSS バージョン0.1
 jQueryプラグイン ⇒Amazon ProductSearch.js(ベータ版ver 0.1 13KB)
 CSSファイル ⇒Amazon ProductSearch.cssver 0.1 3KB)
 
サイドバー用JavaScriptCSS
 jQueryプラグイン ⇒Amazon ProductSearch Sidebar.js
 CSSファイル ⇒Amazon ProductSearch Sidebar.css

まずは前準備

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

HEADタグ内の記述例

ライブラリに続けてAmazon ProductSearchのJavaScriptファイルを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

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

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

amazon-product-request.php(2011/09/22修正)

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

ウィジェットの設置方法

 それではウィジェットの実装に移っていきます。body要素の終了タグ直線などに次のような短いスクリプトを書きます。

 この例ではウィジェットが初期化された際にドラえもんキャラクターグッズという単語で商品を検索し、 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.js182行目あたりにデフォルトオプションの記述があり、 始めから"ファッション"、"腕時計"、"DVD"、"ゲーム"が登録されているので、この部分は自由に好きな単語に変えてください。

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

アフィリエイトが関係するので利用規約を作りました。
・このウィジェットを利用するには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