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
スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazonで開始されました。一部の書籍

記事を読む

【jQuery】クリックイベントでマウスホイールクリックを検知する

$("a").click(function(){ … }); によりクリックイベントを関連付け

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

【javascript】正規表現文字抽出簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

【Fireタブレット8G】外付けマイクロSDにどれくらい動画を保存できるか検証

はじめに 最近Fire 8Gを買いました。8Gというとすごい容量少ないと感じますが、マイクロSDカ

記事を読む

【javascript】RSSを読み込んで表示させる【Google Feed API】

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというの

記事を読む

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

Amazonアソシエイトでメールアドレスを変更する

amazonアソシエイトの登録メールアドレスの変更が非常にややこしかったのでメモ。メールアドレスを変

記事を読む

AAアニメーション

javascriptでAAアニメーションしました。AAは以下のところから参照しました。(AAアニメー

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

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