でぃべろっぱーず・さいど

「Amazon ベストセラー ビューア」を作ってみました。

Amazonの各カテゴリのベストセラーランキングRSSを拾ってきて、表示します。

左側がサムネイル、右側が左でオレンジ色のカーソルがフォーカスされているアイテムの詳細です。

マウスでカーソルを移動し、クリックで下のエリアに一次保存（カートには追加されません）、ダブルクリックでAmazonの商品ページが開きます。

一般の方向けにマウスでの操作を実装しましたが、実はキーボードで操作できるというのが、このビューアのウリになります。

ページに書いていますが、viのように、h,j,k,lでカーソル移動、Enter,v で商品ページポップアップ、s でクリップ、c , x でカテゴリ切り替え、という操作になります。

最初戸惑うかもしれませんが、慣れてくると結構楽しいです。

初期表示が 10 x 10 の100個表示モードになっていますが、キーボードの2（注：テンキーは不可）で 5 x 5の表示モードに切り替わります。

クリップした商品も、i,oで青色のカーソル移動、uで青色で選択されている商品のページを表示する、というインターフェースになります。

気に入った方が多ければ、今後ベストセラーの表示ではなく、商品の検索やカートの追加、クリップしたアイテムの保存などの機能追加を検討していこうかと思います。

技術要素

このページには以下の技術を用いています。

• jQuery
• jQuery Hotkyes Plugin
• AJAX Libraries API
• Amazon.co.jp ベストセラー RSS
• Google AJAX Feed API

この辺の要素をどういう風に使っているのかを、今後解説していこうかと思ってます（例えば、jQuery Hotkeys Pluginでフォーカス移動をどういう風に実装したか、とか）。

あと、実は英語版も同時に作っていて、javascriptファイルは共通で使えるようにしているので、その辺の実装についても書いていこうかと。まあ、しょせんJavaScriptなので、ソース見ろって話かもしれませんが。