2009年10月25日日曜日

Google AJAX Feed APIを使ってAmazonのベストセラー/ニューリリース商品を表示するガジェットを作ってみる

amazonのアソシエイトに参加している方向け。

amazonアソシエイトのサイトでも色々ウィジェットを提供してくれていますが、既成のものだと「見慣れた感」が強くて目に止まりにくいかと思われます。

そういうわけで、シンプル & カスタマイズしやすいものがあれば便利かなと思ってソースコードを公開してみます。

プログラミングとかJavascriptとかよく知らねという方はこちらをどうぞ
iGoogle: amazon.co.jp ベストセラーズ
iGoogle: 新刊本情報



» デモ


商品情報:
amazonが配信しているRSS (本のベストセラーとか)を利用

商品情報の取得:
Google AJAX Feed APIを利用。
これを利用するとサーバーにスクリプトを置かなくてもJavascriptだけでRSSフィードをパースできます。

Google AJAX Feed API
http://code.google.com/intl/ja/apis/ajaxfeeds/


商品を表示したい箇所に次のように書いておきます。
<div id="amazon_items"></div>


実際に商品RSSを取得して表示するJavascript。
head内とかHTMLの一番下(body閉じタグの直前など)に貼付けてみてください。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('feeds', '1');
google.setOnLoadCallback(drawItems);

// フィードの読み込みと描画を行う関数
function drawItems() {
  var
    tracking_id = 'aaaaa-22', // あなたのトラッキングID
    thumb = 75, // サムネイル画像の1辺の長さ(px)
    num = 5, // 表示する商品数
    feed_url = 'http://www.amazon.co.jp/rss/new-releases/books/466280/ref=pd_nr_rss_link', // 表示したいカテゴリーのRSSフィードURL
    feed = new google.feeds.Feed(feed_url + '?tag=' + tracking_id);
  feed.setNumEntries(num);
  feed.load(function(res) {
    if (res.error) {
      return false;
    }
    var h = '';
    for (var i = 0; i < res.feed.entries.length; i++) {
      var
        e = res.feed.entries[i],
        title = e.title.match(/#\d{1,2}:\s(.+)/),
        img = e.content.match(/http:\/\/ecx\.images-amazon\.com\/.+\.jpg/),
        author = e.content.match(/<span>([^<]+)/);
      h += '<div style="clear:left;border-top:solid 1px #ccc;padding:5px 0;">';
      if (img)
        h +=
          '<div style="float:left;">' +
          '<a href="' + e.link + '" style="text-decoration:none;">' +
          '<img src="' + img[0] + '" alt="" height="' + thumb + '" width="' + thumb + '" style="padding:0 12px 6px 0;border:none;" />' +
          '</a>' +
          '</div>';
      h +=
        '<div style="margin-left:' + (thumb+12) + 'px;">' +
        '<a href="' + e.link + '" style="font-weight:bold;">' + ((title) ? title[1]: e.title) + '</a>';
      if (author) h += ' &nbsp; <span>' + author[1] + '</span>';
      h += '</div></div>';
   }
   h += '<div style="clear:left;"></div>';
   document.getElementById('amazon_items').innerHTML = h;
 });
}



GoogleのJavascript系APIを利用したことがない人のために軽く補足しておきます。
(太字がGoogle AJAX Feed APIを利用しているところです。)

最初におまじないをします。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Google AJAX Feed API用のライブラリを読み込みます。
google.load('feeds', '1');

ライブラリの読み込みが完了してから実行するコールバック関数をセットします。
google.setOnLoadCallback(drawItems);

初期化します。引数は読み込みたいフィードのURLです。
feed_url = 'http://feeds.digg.com/digg/popular.rss';
feed = new google.feeds.Feed(feed_url);

デフォルトでは4件しかエントリーを返してくれません。
それ以上のエントリーを取得したい場合は明示的に指定する必要があります。
feed.setNumEntries(num);

feed.loadは実際にフィードの読み込み処理を行い、引数に指定したコールバック関数にフィードを操作する処理を書きます。
feed.load(function(res) {
 // do something.
});



※ このスクリプトを使ってトラブルが発生しても当方は一切関知しません。

0 comments:

コメントを投稿

登録: コメントの投稿 (Atom)