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

関連記事

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

WordPressの記事内でJavaScriptを動かす

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かない

記事を読む

【jQuery】大量の画像で重くなったページを遅延ロードで軽くする方法【Lazy Load】

画像をふんだんに使っているページでは読み込みの際に非常に時間がかかるという問題点があります。数枚なら

記事を読む

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

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

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

記事を読む

javascriptで画像処理をする【HTML5】

HTML5でjavascriptを使って画像処理をしてみました。このページでは手始めにグレースケール

記事を読む

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

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

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

記事を読む

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

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

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

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

 kindle unlimitedというサービスが8/3からAmazo

→もっと見る

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