2008/03/27

引っ越し

はてなに引っ越しました。

2008/02/21

Gmailの個別URLとAJAX、またはステートフルURL

AJAXの短所

AJAXではページ遷移をせずにサーバと通信することが可能なため、AJAXを利用しないWebアプリより使いやすいアプリを作成することができる。
ただAJAXにもいくつかの短所がある。その代表的なものが「リンクができない」、「ロボットが読めない」の2つだ。

1.リンクができない。
通常AJAXを利用する場合、ページ遷移がなくなる代償に、表示内容に対するURLの一意性が失われる。つまり、「今現在のブラウザの表示内容」と「今現 在のURL」が一致しなくなる。そのため「今現在のブラウザの表示内容」をブックマークする(URLで指し示す)ことができない。
このような「ブラウザの表示内容」と一致するURLのことをなんと呼ぶのだろうか?
ちょっと調べたところでは分からなかった。
「今現在のブラウザの表示内容」は、アプリケーションの現在の状態と一致する。
そこで、とりあえずここではこのようなURLをステートフルURLと呼ぶことにする。

2.ロボットが読めない。
AJAXを利用するWebアプリの場合、ページの表示内容はJavaScriptなどでコントロールする。そのため、もしステートフルURLがあったとしても検索エンジンのクローラなどではその「今現在の表示内容」を再現できず、読むことができない。

Gmailの個別URL

Gmailではこの短所のうち、少なくとも1を解決している。
現在のGmailでは、AJAXを利用して各メールの詳細を表示したり、あるラベルのついたメールリストを表示したりしているが、そこで表示した「メールの詳細」や「あるラベルのついたメールリスト」をそれぞれ別のURLで表している。

Gmailでinboxにあるメールを開くと、URLに「#inbox/xxxxxxxxx」のような文字列が追加される。この文字列を含んだ「http://mail.google.com/mail/#inbox/xxxxxxxxx」という文字列がそのメール詳細を表示した状態に対応するステートフルURLとなる。
「http://mail.google.com/mail/#inbox」はinbox内のメール一覧、「http://mail.google.com/mail/#hoge」はhogeというラベルのついたメール一覧を表す。

試してみればわかるが、IE, FIrefox, Safariなどのブラウザはlocation.hrefに#xxxxxという文字列が追加されても、#より前の部分のURLが変わらなければ、ページ遷移することはない。#を使えば、JavaScriptなどから自由に「今現在のURL」を変えることができるため、#以降に「今現在の表示」状態を表す文字列を追加すれば「今現在のブラウザの表示内容」と「今現在のURL」を一致させることができるようになる。

検索エンジン対策

ステートフルURLがあれば、短所2「ロボットが読めない」は簡単だ。
サーバ側でURLに含まれる「#」以降の文字列もパースし、それに対応する内容をnoscript要素の中に入れておけばよい。

ブラウザ上での状態遷移とサーバ側での状態復元の2重管理が必要になるが、もしそのWebアプリを検索エンジンから検索できるようにしたいなら、手間をかける価値はあるだろう。