« MASHUP AWARD 4th 開催! | メイン | Google Developer Day 2008 Japan での発表を予測してみる »

Ajaxアプリでアンカーを使ってURLを一意にするテクニック

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化しておくと良いかもしれません。

コメント (1)

ksk:

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

これって、#の後ろが空の場合か、実際にそのアンカーが存在する場合ではないでしょうか。

よく、上にスクロールして欲しくない場合は、
<a href=”#?”>hoge</a>
なんて書き方をしていますが、これじゃダメなんでしょうか。

> 微エロ注意
微どころか、そうとうエロいですw