Amazon が提供している売れ筋ランキングや新商品情報の RSS フィードを、ブログや Web ページに表示させる JavaScript を書いてみました。
アフィリエイト (Amazonアソシエイト) 用に、あなたのトラッキングID を入れることができます。
説明は後回しにして、どんな感じかは↓の動作デモを見てください。

Amazon提供のRSSフィードをGoogle AJAX Feed APIで取得して表示

ソース・使いかた
下記ソースをコピーし、表示させたい場所に貼り付けて、
// ▼▼▼ 調整 ▼▼▼
  ……
// ▲▲▲ 調整 ▲▲▲
の間を適当に調整すれば動くはずです。

1行目にある
<div id="jimuguri_ama_rss" style="width:160px;"></div>
この、width:160px の部分を、表示させたい場所の横幅に合わせて調整してください。

それと、冒頭の arrUrlAmaFeed.push('〜〜〜'); には表示させたい RSS フィードの URL を入れるのですが、URL を見つける方法は後述します。
表示させたい RSS フィードが1つだけならば、1行だけあれば OK (↑だと2行あるので片方を削除・またはコメントアウト)

例 : livedoor Blog でのブログパーツとしての利用方法
管理画面に入り、[ブログ設定] - [ブログパーツ] で、[自由なカスタマイズ用] にある [フリーエリア] を配置し、その入力画面に上記のソースをすべてコピー・貼り付けます。
※その際、[改行設定] は [変換しない] を指定

Amazon ランキングの RSS フィードの URL を見つける
RSSフィードは、Amazon の「ランキング」に絞って提供されているようです。(検索結果のRSSフィードは提供されていない)

ベストセラー、Amazonランキング、一番ギフトとして贈られている商品や一番ほしい物リストに追加されている商品では、人気のある商品の最新情報を更新するためにRSSフィードを提供しています。

引用元:Amazon.co.jp ヘルプ > 各種サービス > RSSフィード
んで以下、RSSフィードにたどり着く方法です。(2012年8月時点でのたどり方)

  1. Amazon (日本) を表示し、目的のカテゴリー (本やDVDなど) を開きます。
    次に、ページの上部の「Amazonランキング」・「トップセラー」・「ベストセラー」などをクリックします。(カテゴリによって表現がバラバラ)
    Amazonで「Amazonランキング」を選択
    Amazonで「トップセラー」を選択
    Amazonで「ベストセラー」を選択
  2. 上部にあるタブ「ベストセラー」・「新着ニューリリース」などから目的のものを選びます。
    そこからさらに絞り込みたい場合は、ページ左側にあるリストから目的のカテゴリーを選びます。
    Amazonでランキング情報を絞り込む
  3. ページの下部に「RSSフィード」があると思うので、右クリックなどから URL をコピーし、私が提供するソースの冒頭にある
    arrUrlAmaFeed.push('〜〜〜');
    の 〜〜〜 の部分に入れてください。
    (RSS フィードが提供されていない場合もありますから、その時は諦めましょう)
    AmazonのランキングのRSSフィード

やっていること・仕組み
HTML + CSS + JavaScript です。
JavaScript のライブラリとして jQuery と、Google AJAX Feed API を使っています。
おおまかな流れを書くと…

  1. Google AJAX Feed API に RSS フィードを取得してもらう。
    RSS フィードの内容を解析してくれて、タイトルや日付・解説などが収まったオブジェクトが返される。
  2. このオブジェクトの内容を商品が表示されるよう、JavaScript/jQuery で HTML + CSS を組み立て・加工する。
    大雑把ですが、下記のような HTML 構造が1商品ごとの1セットです。
    複数の商品を表示するときは、この1セットが複数並びます。

    <div class="jimuguri_ama_rss_item">
     <a href="商品のURL" target="_blank">
      <img src="商品画像" alt="商品名">
      <br /><small>商品名</small> (←テキストリンクを表示させるよう設定した場合のみ)
     </a>
    </div>

    なので、"jimuguri_ama_rss_item" という class 名で、CSS による表示の調整が可能です。
  3. 予め記述してある HTML 要素
    <div id="jimuguri_ama_rss" style="width:160px;"></div>
    の中に、組み立て・加工した HTML を入れ、表示される。

問題点・おことわり
以下のような問題が残ってます。

  • 「画像がありません」が表示されてしまう。
    一応、元の小さい画像 よりも見栄えするよう調整してますが……「画像がありません」を表示から除外してもいいんだけど、すべて除外されて 0 件になった時とかどうしようね?
  • 「縦に長い画像」と「横に長いの画像」の混在に弱い。
    縦の高さを揃えているので、横長の画像は過剰に拡大されて荒くなり、大部分が見切れちゃう。
    全体を横幅に揃えればいいのだけれど、そうすると余計な余白が入ったり、Amazonから得られる画像が小さくなってしまう。
    商品ごとに色々なサイズがあるから、アチラを立てればコチラが立たず……
  • Google AJAX Feed API の応答に時間がかかる。
    応答がないと処理を進められないから、何も表示されない。
    (エラーの場合は、API が返すエラーメッセージを表示する仕掛けが入ってます)
    予めローディング画像・テキストを表示させとけばいいかもね。
    <div id="jimuguri_ama_rss" style="width:160px;">Loading...</div>
    みたいなのでも気休めにはなるか?
  • 1ページ内で使える場所は1か所のみ!
    複数の場所への表示には対応していない。ん〜クラス化する?
  • Amazon で「アダルト」カテゴリに分類されている RSS フィードでは、商品の画像を表示できない。 これはしょうがないですね。

それと、付加情報です。

  • アフィリエイト (Amazonアソシエイト) 用に トラッキングID を入れられますが、私 (jimuguri) の収入になるような仕組みが密かに入っている、なんてことは一切ありません。
    例えば 「10% の確率で私 (jimuguri) のトラッキングIDが入る」 みたいなことはやっていません。
  • CSS 部分をソース内にインラインで書いてしまっています。
    なるべく「コピペだけで簡単に使える」ようにしたかったので。
    HTML, CSS, JavaScript を切り離したい方は自分でできるでしょうから、ご自身で修正・改修してください。
  • このスクリプトを使うことで何か事故や問題があっても、当方は一切関知しません。自己責任でお願いします。
    改変・改修も自己責任でご自由にどうぞ。
    「トラッキングIDを入れたのにAmazonでカウントされていない!収入が得られない!」とか、私には応えられません。
    それとこのスクリプトがいつまで使えるか?わかりません。Amazonが仕様変更すればソレまでです。

あとがき
まだまだ改良の余地が残ってますけれども、公開しちゃいます。
同じことをいろいろな方がやってますが、自分で勉強したかったのと、「帯に短し〜」感があったので、自分で作りました。
コンセプトは コピペすれば使える だったんだけど、色々パラメータが必要になっちゃいました (^o^;)

っで、作ってはみたものの、
 はたして 「ランキング上位の物=売れる」 という考えは成り立つのか?
 コンテンツに合った商品を紹介しないと意味が無いんじゃないか?
 アクセス数がバカ高いサイトならクリックされるかもしれないけれど……
と、このスクリプトの存在意義をネガティブに捉えてます。
でもコーディングしている時は楽しかったから、まぁいっか!(゚∀゚)