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

関連記事

AAアニメーション

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

記事を読む

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

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

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

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

記事を読む

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

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

記事を読む

チェスボード画像自動生成ツール

1マスのサイズ(ピクセル) マスの数× 左上が白 枠をつけるか 枠の色白黒

記事を読む

【jquery】iframe内のスクロールイベント設定とスクロール量取得

ページ内に設置したiframeのスクロールイベントおよびスクロール量を取得したかったのでメモ

記事を読む

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

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

記事を読む

【javascript】正規表現文字置換簡易ツール

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

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

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

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

→もっと見る

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