« Movable Type 4.2 RC1 リリース | メイン | jQueryでダミーフォーカスの実装 »

「Amazon ベストセラー ビューア」公開

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 Hotkeys Pluginでフォーカス移動をどういう風に実装したか、とか)。

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

コメント (1)

はじめまして。突然失礼いたします。
Amazonベストセラービューアから飛んできました。
凄いし、便利だな~と思い、コメントをさせていただきました。
さくさく動いて、キーボードで操作が出来るってのがいいですね。あとは、気になる商品を後で一気に開けるのがいいですね。

自分もこんな物を作りたいな~と思っていながらも全然出来ないので、今後の技術解説を参考にさせて頂きたいと思います。

ありがとうございました。