静的HTMLでAjaxアプリを構成する

一発なにか実装してから公開しようかと思っていたけど、なかなか暇がないのでネタだけを公開。Ajax使えば、CGIじゃなくてもCGIぽい効果だせるよね、というお話。
もしかしたら常識かもしれないが、僕自身こういうAjaxページを見たことがないので書いてみる。既にあったら教えてください。あー、よく考えてみると気がついてないだけかもな。ちょっと恥ずかしいかもしれないが、まあ、メモとして残しておこう。

Ajaxでは、XMLHttpRequestで非同期に情報を取得するのがミソだ。でも、このとき指定するURLの先は実はCGIでなくてもよい。
通常のHTMLフォームだと動的に接続URLを変更することができないので、入力フォームで取得した値なんかは、パラメータとしてURLに埋めこむしかない。パラメータだけしか変更できないと、リクエストによって異なる情報を受けとるにはパラメータに応じて動的に出力をふりわけるCGIを使うことになる。
一方、XMLHttpRequestを使う場合はそもそもJavascriptコードで接続先のURLを記述する。パラメータだろうがパスだろうがなんでも変更できちゃうわけだ。当然クライアント側の入力によって異なるページがひっぱってこれる。と、いうことはサーバ側には動的なCGIを設置する必要はなく、例えばテキストファイルを複数配置するだけで、クライアントの状態によって異なる情報を受けとれることになる。さらに、AjaxページそのものはCGIで動的に生成する必要もないので、静的なHTMLでOK。
つまりCGIが使えるサイトでなくても、Ajaxアプリは設置できる。

例えば、拙作「流れるはてなブックマーク(http://d.hatena.ne.jp/sshi/20050317/p1)」は、指定したカテゴリのブックマーク情報をランダムに任意個返すCGIと、受けとったブックマーク情報を流すAjaxのハイブリッドで構成されている。これをAjaxと静的なテキストファイルに置き替えることも可能だ。
サーバ側にはCGIの代わりに、カテゴリ別にしておいたブックマーク情報をテキストファイルとして保存しておく。一回の転送量を減らしたければ、あらかじめいくつかに分割しておけばいい。たとえば、web-1.txt,web-2.txtみたいに。
Ajax側では入力されたカテゴリに応じたテキストファイルを読めばいい。ファイル分割したなら通し番号を順番にインクリメントして非同期に読めばそれでOK。ランダムに流すところはクライアントサイドがやればいい。
この仕組みを使うと、一日だけのエントリの表示と一ヶ月間通しての表示を切りかえるような、よくあるblogサイトの動作を完全に静的なWebページ群で再現することができる。一日分のエントリファイル群さえ用意しておけば、5日分だけ表示なんてのもクライアント側で構築して見せることができるはずだ。

よくあるblogサイトの動作は、つっこみやブラウザからの更新をのぞけばほとんどがAjaxによるクライアントサイドのコードで再現できる気がするのだが、どんなもんでしょか。あー、リファラとかトラックバックはなんともならないか。ま、でも完全に静的にしなくても、一部分だけCGI使うようにすれば、サーバサイドでのCGI負荷は下げられるはずだよね。うん。