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

「Amazon ベストセラー ビューア」の技術解説第2弾です。1回目はこちら。

画面を部分的に書き換えることで、いちいち画面全体が再描画されるのを待たずに利用できるAjaxアプリケーションのデメリットとして、URLの管理が難しい、という点が挙げられます。

URLという点を何も気にせずにAjaxアプリケーションを作ってしまうと、ブラウザのアドレス欄に表示されているURLをコピー（あるいはブックマーク）して、別のブラウザ（ウィンドウ）でそのアドレスを表示したとき、表示されている内容が大きく異なってしまうということがあります。

たとえば、Google Maps で、地図をぐりぐりしながらお店を検索した後、「あ、ここだここだ」とついうっかりアドレス欄のURLをコピーしてしまい、後で、自分がまったく意図しなかった地域のURLをコピーしてしまったという経験はないでしょうか。

Google Mapsでは、この問題を、アプリ中に「このページのリンク」というリンクを配置し、このリンクを押下すると、現在表示している地図の状態が表示されるURLを取得できる、という仕組みにしています。

ここで生成されるURLは、↓こんな感じでGETパラメータに緯度経度、拡大率が指定されています。

http://maps.google.co.jp/?ie=UTF8&ll=35.670127,139.76532&spn=0.105707,0.125313&z=13

このURLをJavaScriptでdocument.location.hrefに代入すれば、ブラウザのアドレス欄が書き換わりますが、当然、ブラウザはURLが変わったと判断してページ全体を読み込んでしまいます。

そこで、ページのリロードは行わずに、URL上に情報を付加するために、#（アンカー）を利用します。

「Amazon ベストセラー ビューア」では、#を使って、カテゴリ（大）、カテゴリ（小）、表示モードの情報を保持しています。

↓以下が、「本」＞「すべて」を表示モード10×10で表示するURLです。

http://www.chrisryu.com/amazon_best_sellers/jp/#books/all/1/

#の後ろが、カテゴリ（大）、/（スラッシュ）で区切って、カテゴリ（小）、表示モードが続きます。

↓以下が、「DVD」＞「アイドル」を表示モード5×5で表示するURLです（微エロ注意）。

http://www.chrisryu.com/amazon_best_sellers/jp/#dvd/562030/2/

ページ表示時に、#の値を取得して、表示すべきカテゴリ（大）（小）と表示モードをURLから取り出しています。

var data = window.location.hash.split('/');

このテクニックはGoogle Readerでも用いられています。

Google Readerのページを見ると、左のカテゴリを変更したりすると、URLの値が書き換わりますが、よく見ると#sream以下の値だけが書き換わっています。#streamの後ろに/があるので最初気がつきませんでした（汗。

この方法にも当然いくつか問題点（デメリット）がありますが、一番のデメリットは、「ページが縦方向にスクロールするページでは、URLのアンカー情報を書き換えた時点でページトップにスクロールしてしまう」ということです。

Google Readerで利用されていると書きましたが、Google Readerのページでは、画面デザインがページ全体が移動する縦方向のスクロールバーが表示されない（個々の要素内では縦スクロールが発生します）ように作られているので問題なく動作しています。

「Amazon ベストセラー ビューア」のような閲覧系のAjaxアプリを作る場合は（例えばPhotoViewerなど）、このような方法で、現在見ているページをURL化しておくと良いかもしれません。

「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なので、ソース見ろって話かもしれませんが。