Amazonのランキングなんかのフィードをサイドバーに表示するやつを書いた。
今右側の方に表示されているやつです。
（遅いのでまだ表示されていないかもしれない）
まとめブログなんかでAmazonの商品の一覧が大きめの画像で、アフィリエイト付きでずらっとサイドバーに並んでいるやつがある。ああいうのが良いなと思った。ただ最初にざっくり調べたところでは、Amazonの検索なんかの機能はAPIの利用申請を出して発行されるキーを利用して、サーバーサイドからリクエストしなきゃならないみたいで、ややハードルが高い。
更に調べて、以下の記事を見つけた。
Amazonで指定したカテゴリのベストセラー商品を表示
これはAmazonのベストセラーなんかの商品のRSSを、Googleのajax feed apiというjavascriptからRSSが読み込めるサービスを利用して読むもの。書いた、と冒頭に書いたけど、実際のところ私のコードはほとんどこれと同じ。
なんせ、非常にシンプルで特に変える必要が無い。
サーバーサイドの仕組みもこちらで用意する必要がない。
上の記事をざっくり読めば、あとはRSSのフィードのURLを拾ってきて、表示部分のコードを自分で実装さえすればJavascript利用可の場所なら商品画像を展開できるようになる。
デザインも含めたコードはGistにあげてあるので、使ってみたい人はそっちからダウンロードしてローカルで実行してみて、自分の好きなように書き換えてみると良いと思う。
Amazon-feed-sidebar-js
元の記事と違うことをしている部分としては、contentに入っているHTMLタグからjQueryで画像のリンクを拾って、サムネイル利用のためのサイズ指定を削っているところと、サイドバーっぽい表示を行うために書いている部分くらい。
Amazonの画像のサイズとかに関しては以下のサイトを参考にした。
あんまり私もよく分かってないです。
Amazon 商品画像のカスタマイズ
サイドバーに納めるためのスタイルとしては、横幅を固定で指定したらはみ出た部分を非表示にする(overflow:hidden)ようにして、商品の画像にネガティブマージンを指定して、画像の真ん中の方が表示されるようにしている。
そんなわけで、ご自由にコピペしてアフィってね！
