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