Amazonのランキング情報(RSSフィード)を表示するブログパーツ。アフィリエイトで使えます。 : 地潜の日記

■ 追記＠2017/1/23：この記事の内容は使えなくまりました。
残念ながら、この記事の仕組みが大いに依存していた「Google Feed API」、Google がサービスを停止しました。
Google Feed API | Google Developers
前から告知されていたけど、ついに、という感じですね。
来てくれた人、お力になれずスミマセン

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

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

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

<div id="jimuguri_ama_rss" style="width:160px;"></div>

<script type="text/javascript" charset="UTF-8" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
//<![CDATA[

google.setOnLoadCallback( function(){

  // ▼▼▼ 調整 ▼▼▼
  // RSSフィードのURL 複数登録するとランダムにどれか１つが表示される
  var arrUrlAmaFeed = [];
  arrUrlAmaFeed.push('http://www.amazon.co.jp/gp/rss/new-releases/dvd/ref=zg_bsnr_dvd_rsslink');
  arrUrlAmaFeed.push('http://www.amazon.co.jp/gp/rss/bestsellers/books/13384021/ref=zg_bs_13384021_rsslink');
  //arrUrlAmaFeed.push('');

  var numEntriesShow   = 5;      // 表示する数 最高：10
  var bolRandom        = true;   // true：ランダムにする ／ false：ランキング順
  var bolTextLink      = true;   // true：テキストのリンクをつける ／ false：つけない
  var strElmId         = 'jimuguri_ama_rss';  // 表示させたい場所のタグの id
  var numImgHeight     = 300;    // 画像の高さ (px) 最高：500 ※単位は記述不可
  var numDispWidth     = 160;    // 表示させる領域の横幅 (px) ※単位は記述不可
  var numDispHeight    = 350;    // 表示させる領域の高さ (px) ※単位は記述不可
  var cssOffsetWidth   = 'auto'; // 横方向の位置調整    ※ % や px で指定・マイナス値も可能
  var cssOffsetHeight  = '0';    // 縦方向の位置調整    ※ % や px で指定・マイナス値も可能
  var strAmaTrackingId = '●●●●●-22';  // 自身の AmazonトラッキングID
  // ▲▲▲ 調整 ▲▲▲


  // RSSフィードを取得
  var objFeed = new google.feeds.Feed( arrUrlAmaFeed[ Math.floor(Math.random()*arrUrlAmaFeed.length) ] + '&tag=' + strAmaTrackingId );
  objFeed.setNumEntries( 10 );
  objFeed.load( function(objResult) {
    var $elmTarget = $( '#' + strElmId );
    if (objResult.error) {  // RSSフィードを取得できなかった場合
      $elmTarget.html( '<small>' + objResult.error['code'] + '：' + objResult.error['message'] + '<\/small>' );
      return false;
    }

    var strBuf = '';
    var strTmp = '';
    var objEntries = objResult.feed.entries;

    // 取得したRSSフィードを調整・加工
    if (bolRandom) {
      objEntries.shuffle();
    }
    $(objEntries).each(
      function(i) {
        if (i == numEntriesShow) {
          return false;
        }
        this.title = this.title.substring( this.title.indexOf(':')+2, this.title.length );
        strTmp = this.content;
        strTmp = strTmp.substring( strTmp.indexOf('<a'), strTmp.indexOf('\/a>')+3 );
        strTmp = strTmp.replace( /<a/, '<a target="_blank" ' );
        strTmp = strTmp.replace( /<img/, '<img title="' + this.title + '" ' );
        strTmp = strTmp.replace( /_SL160_/, '_SY500_' );
        if ( strTmp.indexOf('no-img') == -1 && strTmp.indexOf('comingsoon') == -1 ) {
          strTmp = strTmp.replace( /<img/, '<img style="margin:' + cssOffsetHeight + ' auto 0 ' + cssOffsetWidth + ';" height="' + numImgHeight + '"' );
        }
        else {
          strTmp = strTmp.replace( /src=\".+\"/, 'src="http://ec1.images-amazon.com/images/G/09/nav2/dp/no-image-no-ciu._AA' + numDispWidth + '_.gif"' );
        }
        if (bolTextLink) {
          strTmp = strTmp.replace( /<\/a>/, '<br \/><small>' + this.title + '<\/small><\/a>' );
        }
        strBuf += '<div class="jimuguri_ama_rss_item" style="margin:0; padding:0; vertical-align:top; width:' + numDispWidth + 'px; height:' + numDispHeight + 'px; overflow:hidden; float:left;">' + strTmp + '<\/div>';
      }
    );

    // 表示
    $elmTarget.html( strBuf + '<br style="clear:both;" \/>' );
  });

});

google.load('feeds', '1');

google.load('jquery', '1'); // ← 他でjQueryを読み込んでいるならこの1行は不要

Array.prototype.shuffle = function() {
  var i = this.length;
  while(i){
    var j = Math.floor(Math.random()*i);
    var t = this[--i];
    this[i] = this[j];
    this[j] = t;
  }
  return this;
}

//]]>
</script>

１行目にある
<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月時点でのたどり方)

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

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

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

<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 による表示の調整が可能です。
予め記述してある 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が仕様変更すればソレまでです。

アフィリエイターのための
Web APIプログラミング入門

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

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

タグ：: #JavaScript; #プログラム; #スクリプト; #RSS; #アフィリエイト; #ブログパーツ

コメント一覧 (10)

- 10. 地潜 (管理人)
- 2017年01月23日 21:46
- ＞　佐久間
  残念ながら無料で使える代案は無いみたい。
  
  "Feednami" という代替サービスがあるけど、↓の通り有料でして。
  https://toolkit.sekando.com/
  アフィリエイトで使うとなると「Development/testです！」で通すワケにもいかないですから。
- 9. 佐久間
- 2017年01月17日 19:34
- google feedが昨年使用停止になりましたが、
  何か代案はありませんか？
- 8. 地潜 (管理人)
- 2014年02月27日 22:27
- ＞　がてん
  ありがとごじゃります！
  ご活用ください！
- 7. がてん
- 2014年02月27日 02:00
- 最高デス！ありがとうございます。活用させていただきます。そのシェアの精神は素敵です。
- 6. 地潜 (管理人)
- 2012年10月18日 23:46
- ＞オールジャンルのオージャン
  
  表示できてよかった ε-(´∀｀*)ﾎｯ
  お役に立てたようで嬉しいです。
- 5. オールジャンルのオージャン
- 2012年10月18日 18:41
- >Amazon からの RSS 提供に「１つの RSS に 10 件の情報」という上限があるためです。
  
  なるほど、Amazonの仕様でしたか・・・。
  
  無事表示できまして、誠に有難うございます！
  
  今後共、宜しくお願い致します。
- 4. 地潜 (管理人)
- 2012年10月18日 00:13
- ＞オールジャンルのオージャン
  
  リンク、お気遣いありがとうございます。
  なんかすみません(；´∀｀)
  
  10件以上の表示、現状できません。
  Amazon からの RSS 提供に「１つの RSS に 10 件の情報」という上限があるためです。
  
  複数の RSS を合成して 10 件以上にすることは、技術的には可能です。
  ただ、表示されるのに時間がかかってしまうと考え、そういう機能を持たせていません。
- 3. オールジャンルのオージャン
- 2012年10月17日 17:37
- 地潜様
  
  有難うございます！
  お陰様で表示できました！
  感謝感謝です^^
  厚かましいお願いで申し訳ないのですが、10件以上表示することは出来ないのでしょうか？
  
  自分に出来ることはこれくらいしか出来ませんので、リンクを貼らせて頂きます。
  
  オールジャンルのオージャン
- 2. 地潜 (管理人)
- 2012年10月16日 23:40
- ＞オールジャンルのオージャン
  どうも、お使いいただきアリガトウございます。
  
  表示されないページ (http://blog.livedoor.jp/ogenre/)、
  余計な文字が入っているのようです。
  
  「// 表示」と書かれている行の下を、下記の通り変更して下さい。
  function amazon() = $elmTarget.html( strBuf + '<br style="clear:both;" \/>' );
  　　　↓↓↓
  $elmTarget.html( strBuf + '<br style="clear:both;" \/>' );
  
  それと、トラッキングID を書くところも
  var strAmaTrackingId = 'http://www.amazon.co.jp/exec/～～～～-22/";
  と余計な文字が入ってしまっているので、修正してください。
  (http://righitwing.doorblog.jp/～～　での書き方が正解)
- 1. オールジャンルのオージャン
- 2012年10月16日 18:32
- こんにちは、初めてコメントさせて頂きます。
  オールジャンルのオージャンと申します。
  こちらのプログラムを使用させて頂いたのですが、なぜか使用出来ません。
  こちらでは表示できているのですが
  http://righitwing.doorblog.jp/archives/18702807.html
  
  こちらでは出ません。
  http://blog.livedoor.jp/ogenre/
  
  ほかのjavascriptとぶつかってしまっているのでしょうか？