AmazonのランキングRSSから画像リンクを作る

公開日: : 最終更新日:2014/08/14 Amazon, JavaScript/jQuery

スポンサーリンク

Amazon RSS

Amazonでいい感じのRSSが無いかと探していたのですが実は本家に素晴らしいものがそろっているというのを最近知りました。正直これがあれば他にツールとか何もいらないんじゃないかと思います。

こちらのベストセラーページの左側にある(2013/12/27)カテゴリ別にRSSが用意されており、さらにこのカテゴリは細分化されているため欲しいジャンルのRSSを知ることができます。

さらに上側のメニューバーに「ベストセラー」、「新着ニューリリース」、「ヒット商品」、「一番ほしい物リストに追加されている商品」、「一番ギフトとして贈られている商品」とありますが、各カテゴリにおいてこのそれぞれのRSSの取得も可能となっています。

そして、肝心のRSSですが、各ページの一番下にそのリンクが用意されています。上の画像はDVDのベストセラーの例です。

また、気になることとしてアフィリエイトをやってる方はアソシエイトIDを追加できるかというのがあると思うのですがヘルプには

ベストセラーやAmazonランキングを更新する際には、以下のオプションをご利用ください。オプションのパラメータはRSSフィードのURLに追加できます。(例:http://www.amazon.co.jp/rss/bestsellers/books?tag=assoc-tag)tag – アソシエイト・プログラムの会員の場合、このパラメータをURLの最後に追加すると、アソシエイト・プログラムの紹介料の支払いの対象になります。詳しくはアソシエイト・プログラムをご確認ください。

と記述されており、文末に「?tag=xxxxxxx-22」(xxxxxxx-22はトラッキングID)のパラメータを追加することで自分のIDを付与することが可能です。

画像リンクを作成する

では早速画像リンクを作成しようと思います。段階としては

①欲しいRSSを決める
②RSSを読み込んで、画像とリンクを抜き出す

こんな感じになります。

RSSを選ぶ

まずはRSSをカテゴリから選びます。今回はプログラミングにします。「本」→「コンピュータ・IT」→「プログラミング」と進んでいきます。

ジャンルについては右側のリンクから選択できるようになっている(2013/12/27現在)のでそこから「一番ギフトとして贈られている商品」にしてみます。

このときのRSSはこちらになります。

http://www.amazon.co.jp/gp/rss/most-gifted/books/492352/ref=zg_mg_492352_rsslink

RSSを読み込んで、画像とリンクを抜き出す

前回の記事

に書いたのですがGoogleFeedAPIを利用してRSSを読み込みます。

冒頭に以下の記述をつけ足してGoogleFeedAPIを読み込んでください。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("feeds", "1");
</script>

読み込んだ際に画像とリンクだけ抽出するように変更します。

var readAmazonFeed = function(feedurl,selector,maxlength){
    function initialize(){
        var feed = new google.feeds.Feed(feedurl);
        feed.setNumEntries(maxlength);
        feed.load(function(result) {
            if (!result.error) {
                var dst = $("<ul>");
                for (var i = 0; i < result.feed.entries.length; i++) {
                    var entry = result.feed.entries[i];
                    var title = entry.title;
                    var link = entry.link;
                        
                    var content = entry.content;
                    var matches = content.match(/http[s]?\:\/\/[\w\+\$\;\?\.\%\,\!\#\~\*\/\:\@\&\\\=\_\-]+(jpg|jpeg|

gif|png|bmp)/g);
                    var tmp = '&lt;li&gt;&lt;a href="' + link + '"&gt;&lt;img src="' + matches[0] + 

'"/&gt;&lt;/a&gt;&lt;/li&gt;';
                    dst.append(tmp);
                }
                $(selector).append(dst);
            }
        });
    }
    google.setOnLoadCallback(initialize);
}
readAmazonFeed("http://www.amazon.co.jp/gp/rss/most-gifted/books/492352/ref=zg_mg_492352_rsslink?tag=mementoadd-22","#amazontest",10);

簡単に説明しますと関数の引数はRSSのURL、結果を出力するセレクタの文字列(jQueryを使ってます)、最大記事数となっており、読み込んだデータから画像を正規表現で抽出して、リンクとともにID名がamazontestの要素に結果をUL状にして最大10個出力します。以下にその結果を出力します。




↑多少CSSで整えています。

#amazontest li{
    position:relative;
    list-style-type: none;
    float : left;
    margin: 0px;
    width: 100px;
    height: 150px;
    overflow: hidden;
}
#amazontest a{
    position: relative;
    display: block;
    text-decoration: none;
}
#amazontest img{
    margin: 0px;
    padding: 0px;
    width: 100%;
}
#amazontest img:hover{
    background-color:#FFFFFF;
    filter:alpha(opacity=85);
    -moz-opacity:0.85;
    -khtml-opacity: 0.85;
    opacity:0.85;
}

これで完成です。ちなみにclearfixで回り込みを解除させています。

結構簡単に人気の商品を紹介できるのでぜひ活用してみてください。(※自己責任でお願いします。一応。)

『clearfixでfloatを解除』:http://blog.d-spica.com/entry/070307clearfix.html
スポンサーリンク
  • このエントリーをはてなブックマークに追加

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑