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

関連記事

aatextimg

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

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

記事を読む

AMI88_toycameramorigirl500-thumb-500xauto-3709

jThree.jsやThree.jsでcanvasの画面をキャプチャして画像にする方法

WebGLのライブラリであるThree.jsやそのラッパーライブラリのjThree.jsでcanva

記事を読む

lazyimg3

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

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

記事を読む

HTC__03

【Three.js/jThree.js】カメラ内部パラメータを変更して視野などを変える

jThree.jsでカメラの内部パラメータを変更するのに手間取ったのでメモ。参考にしているjThre

記事を読む

PAK23_husentomemo20140313500-thumb-500xauto-4376

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

consoledirimg

【javascript/jQuery】JSON形式のデータの表示確認をする

PHPであれば「var_dump」や「print_r」などでJSON形式のデータの中身が思い通りの者

記事を読む

amazonmail1

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

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

記事を読む

1_129

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

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

記事を読む

nat12_se05500-thumb-500x753-2758

【javascript/jQuery】強制的にページをスクロールさせる方法

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っ

記事を読む

source_php

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

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

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

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

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

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

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

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

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

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

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

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

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

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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