2005-02-28

JavaScriptで差分リロードなチャット

3年と少し前から作っているチャットのリファクタリングをしています。
http://ma.la/mirrorman/wiki.cgi/%e5%8b%95%e7%9a%84%e3%83%ad%e3%83%bc%e3%83%89
ここに書いてあるチャットのことで、当時はNN4でも動くように、けっこう苦労した覚えがあります。

フレームを使わないスタイルシートでのレイアウトへ変更、
オブジェクト指向化、イベント定義を外部記述へ変更など、大幅に直しています。
ベースの部分は3年前からほとんど変化ありません。
IFRAMEで通信しているので、Ajaxとは違うと思いますが、XMLHTTPを使わなくても昔から動的ロードは出来たよ、ということで。

最近はDHTMLを使ったチャットも多くなっているので、
目新しくはなくなってしまっているかもしれません。
まだ何かと中途半端ですが、とりあえず、動作デモとして設置してみます。
http://chat.ma.la/

普通のチャット、改行を含むテキストの書き込みと保存、それから手書きメッセージの書き込みが可能です。
長文書き込みはタブが残るので、pythonのソースコードが貼れます。
手書きはお絵かきBBSの使い回しです。ボーダーのリサイズでキャンバスを広く出来ます。
IPアドレスは表示されませんが、ログとしては残しています。

サーバーの負荷が高かったり、不具合が見つかったら消すかもしれません。

----
仕組みはログファイルのどこまでを読み込んでいるのかを記録しておき、追加された部分のみを読み込んで追記、という単純なものです。
変更がなかった場合はマイナーですが「HTTP 204 No Content」というレスポンスを返すと、ブラウザは何の処理も行いません。
http://www.studyinghttp.net/status_code#Code204

差分リクエストは、昔XMLHTTPでrange付きリクエストが出来ないかと試行錯誤したことがあるのですが、どうにも無理みたいです。
CGIを使ってログファイルを部分的に切り出してブラウザに送ってやる必要があります。
サーバープッシュとクライアントプルの組み合わせで、ウェブベースでも高レスポンス、低通信量のチャットを作るというのがコンセプトなのですが、
レンタルサーバー上でサーバープッシュをやるとコネクション数を多く使ってしまうので無効にしています。
ブラウザ上で完全リアルタイムに更新するチャットを作るのは、それほど難しいことではありません。

プライベートメッセージ、ローカルファイルのアップロード、httpからファイルのダウンロード
アスキーアートで発言、MSAgentを使った発言読み上げ、mp3ストリーミング、ブラクラ送信機能、
タブまたはMDI表示でマルチルーム同時参加、2ch実況、正規表現での発言フィルタ機能など、
色々あったのですが、かなり意味不明なものになってしまっていたので、いったんばっさりと削りました。

ウェブベースでも、メッセンジャー以上の機能を持った通信手段を作れないものかと考えています。

2005-02-27

[Ajax] location.hashを使ったセッション復元

最近になってようやくJavaScript関係、動的ロードを使ったテクニック等について
話せる相手ができまして、、なかなか充実しています。

Gmail、GoogleMapsのような画面遷移なしの高速なナビゲーションが注目されています。
サイトが特定のタスクに対して特化している場合、JavaScriptを使ったインターフェースの最適化が非常に有用であるのは間違いありません。

ブラウザ上で動作するリッチクライアントとしてはFlashが圧倒的に有名ですが、Flashは、ブックマーク、ブラウザの戻る進む機能、文字の拡大縮小、などのブラウザが本来備えている機能が使えないため、ユーザビリティ研究者の間では嫌われ者です。

http://d.hatena.ne.jp/nazoking/20050226
というわけで、AjaxがFlashのような使い方をされないような実装例を考えてみたいと思います。

一つは、GoogleMapsのように、現在の緯度経度、検索条件を?以降のパラメータ(QUERY_STRING)で渡してやる方法です。マップをスクロールするたびに、リンク用のアドレスが更新されて、ショートカットをコピーできるようになっています。
従来のQUERY_STRINGを使う場合のメリットは、サーバー側が検索クエリを理解できるので、スクリプト無効の環境でもそれなりの表示ができる
ように誘導をすることができる点です。

もう一つは、検索クエリの状態をlocation.hashで保存できるようにするという方法です。

http://la.ma.la/filer/#find=HTA

onload時にlocation.hashの値を元にして、検索条件を復元しています。
また、検索時にリアルタイムで#以降の文字列が変化し、そのままブックマークすることができます。
Flashでもこのような実装は可能なのかもしれませんが、少なくとも自分は今まで見たことがありません。

location.hash、#以降の文字列を使うメリットは、
同じURLとして扱われるためキャッシングとの相性がよいという点がまず考えられますが、さらに大きなメリットはサーバー側にログが残らないという点です。

クライアント側で検索を実行するようにした場合、
location.hashを使った引数の解釈から、検索の実行までが完全にローカルで行われるため、どんな検索語句を使ったのかサーバー側に一切ログを残さないで済みます。

location.hashの変更をタイマーで監視して、変更に応じてデータをロード、画面を更新してやる、という手法をとれば、
画面遷移なし、かつ、ブラウザの戻る進むボタンが使える、という実装も可能でしょう。

----
応用として、
?username#passwordといったリクエストを送ることで

1. サーバーはusernameに対応した、暗号化された状態のデータをXMLHTTPで送る
2. クライアントは#passwordに指定された秘密鍵を使って、元のテキストに復元
3. データの更新時はクライアント側がテキストを暗号化し、サーバーにデータを預ける

これによりサーバー側が元のデータを絶対に知りえない
プライベートデータを保存できるストレージを用意することができる、ということを考えています。
というかかなり前に考えていたのですが、構想の段階で終わっています。

JavaScriptを使った公開鍵暗号の実装は、実際に試せるサイトがいくつかあります。
http://www.faireal.net/demo/PigPGP/0_2_3ja

サービス会社が個人情報を握ることなく実現できる
ソーシャルネットワークサービス、なんていうのを考えているのですが、
ストックしているアイディアの量に対して、圧倒的に時間も作る能力も足りません。

興味のある方は是非やってみてください。

2005-02-19

ソーシャルブックマークの未来予想

自分に出来ることは数限られてるけど、
これからどんな技術が、どう組み合わさって、どう発展していくのかは
大体予想がつく。

これからブラウザの拡張機能として
サイドバーにソーシャルブックマークが組み込まれるだろう。

それは自分が今見ているページから
ドメイン内の人気のあるページをリストアップしてくれたり
どんなタグがついているのか、誰がブックマークしているのか、
関連しているページは何か、関連している本は何か、関連する商品は何か、
ページ内の単語のwikipediaへのリンク、逆リンク、前回の更新箇所(diff)、
同じページを見た人のオンライン状況、ページの評価、などなどを取得してくれる。

ブラウザ本体画面のほうはともかく、サイドバーの方はtorなどのP2P匿名プロキシを経由して、さらにはcoralのような分散キャッシュサーバーを利用して、プライバシーの漏洩を心配することなく、転送量もサーバー負荷も気にすることなく、思う存分メタ情報を受信する。
ページのロードと同時に、あなたが必要としている情報と、もしかしたら必要とするかもしれない情報も勝手に取得する。

----
そうなったときに重要なのは
プライバシーを漏洩せずに問い合わせできるインターフェースを用意することだ。

もし、del.icio.usでGoogle Mapsをブックマークしているユーザーを調べたい場合は、
http://del.icio.us/url?url=http://maps.google.com/

これでもいいのだが、
クライアント側でMD5値に変換してから問い合わせてやることもできる。
http://del.icio.us/url/0706dc411e92332c6c93758cc7b37225

つまり、自分が今見ているページの具体的なURLが何であるかをdel.icio.usに教えなくても、どんなタグがついてるのか、誰がブックマークしているのかを取得できるということだ。
渡されるのがMD5ハッシュ値であれば、それがパスワード付きのURLだろうが、イントラネット内の社外秘のURLだろうが、まるで関係がない。
誰もブックマークしていなければ、del.icio.us側は一体何についての問い合わせであったのかすらわからない。

はてなブックマークは今のところ、これが出来ない。
問い合わせるにはこれだ。
http://b.hatena.ne.jp/entrylist?url=http://maps.google.com/

ユーザーの一覧はここに出る。
http://b.hatena.ne.jp/entry/215

それにしても「215」ってなんだよ。
内部的には別にどうなってても構わないんだけど、オートインクリメントで全然OKなんだけど、
この数字は結局、はてなのデータベースに問い合わせない限り得られない数字なわけで、分散や協調を考えていないんじゃないか。
そもそもURLに対して1から順に番号を割り振っていくという行為にどうしょうもない気持ち悪さを感じるのは俺だけだろうか。

----
未来予想、当たるだろうか。

誰もやらないんなら俺が作るか、
とかなんとか、思うだけなら簡単だ。

2005-02-10

BBSのソース

BBSにコメントとRSS出力をつけてみた。
なんか気付くたびにちょくちょく直してるので最新のソースではないですが、とりあえず置いておきます。
http://la.ma.la/misc/jspaint.zip

仕様とかはここに。
http://ma.la/mirrorman/wiki.cgi/JavaScriptPaint

稼動中のは実験バージョンということで適当に改良でも加えていきます。試し書きはご自由にどうぞ。
http://la.ma.la/bbs/

JavaScriptが複雑なので難しいかもしれませんが、他のBBSやBlogに組み込んだりは勝手にやってもらってかまいません。

今は透過png画像を生成してますが、生データを元に他の形式で出力することもできます。
GD::SVGを使ったSVGの生成をやってみました。アニメーションGIFやFlashも頑張れば出来ると思います。

アクティブデスクトップかサイドバーに表示して手軽に手書きメモを取るツール、
なんてのもいいかなあと思ったが、
チャットとwikiを早いうちに公開できるレベルにしたいので手書き関係はひとまず終了したい。

2005-02-09

Google Maps

http://maps.google.com/maps

あれやこれやと、このサービスについてレビューなどをする人が出てくるだろうが・・・

本当に驚くべきところはFlashを使っていないという点ただ一つだ。

----
少し補足。
http://ma.la/mirrorman/wiki.cgi/GoogleMaps

2005-02-04

JavaScriptで作ったお絵かきBBS

http://la.ma.la/bbs/

コード整形してだいぶ汎用性を高めたつもり。
わかりやすいデモとしてお絵かきBBSを作ってみた。

-IEの場合はVMLの自由曲線を使って描画します。
-他のブラウザの場合は1ドットのspan要素を使って描画します。
-GDを使ってサーバー側でpng画像に変換します。

firefoxかoperaの場合は2GHz以上推奨。書き込むたびにガンガン重くなる。

----
この手のツールはすでにFlashやJAVAアプレットで優れた実装があるわけだけど、なんでわざわざJavaScriptで作るかというと。

まず起動が早いので、思い立ったらすぐに書けるという点。それから、FlashやJAVAアプレットは、表示エリア内にしか書き込めないのに対して、JavaScriptの場合はhtml中のほかの要素の上に書き込むことができるというメリットがある。

とりあえずここまで出来ているので、手書きで付箋メモなんかの実装は簡単にできそうだ。