翻訳のまとめです。翻訳してみたのはこのblogのこの記事です。Slashdot、Slashdot-jpで記事になってました。
あと、本文はこんなにファンキーじゃありません。
読み始める前に一度、Google Suggestを試してみると話がわかりやすいと思います。
-
-
- 翻訳はじめ---
-
解読!!Google Suggest。
結構多くの人が「Google Suggestがどんな風に動くか」ってことには意見を交わしているけど、俺はこのものすげー凝り固まったJava Scriptを解体してやったぜ。
んなわけで、ちょっとしたweb developperならどんな風にGoogle Suggestが動いているか一目瞭然ってわけだ、、、そのソースの最終バージョンはここに置いといた。
俺はMozilla グループがwsdl-enabled SOAP clientをMozillaにぶち込んだ以来のクールなものを見ちまったよ。Google Suggestはあんたがなんか打ち込んだ文字に従ってその後の推測結果を返すんだけど、これがまたものすげーんだ。まぁ、大きく分けるとその理由は二つだ。
1、推測がめちゃくちゃはえーんだ。俺が、相当早く打ってみても、その一文字、一文字ごとにきっちり反応しやがる。
2、インターフェースもクールだ。俺は昔はサーバー側でのweb更新処理に賛成派で、JavaScriptなんてものには見向きもしなかったんだけどよ、gmailといい、Google Suggestといい、そいつらのスゲーインターフェースを見ちまったら、一気にクライアント処理側にお蔵替えしたよ。
おめーらみんなも、きっと、これみたらそうなるよ。俺はこのナイスなインターフェースの奥義を見てさらにぶっ飛んだんだぜ。
1、予測ワード達が検索ワードを入れるフィールドにきっちりおさまりやがる。
2、推測した部分をきっちり強調しやがる。(俺が"fa"っていれたら、こいつは"fast bugtrack"を推測するんだけど、この"st bugtrack"の部分が強調されてるんだ。っで、俺が次のワードを入れたらこいつらは消えやがる。、、すげーよ)
3、キーボード操作に対してもスゲー反応を返すしよ。
4、こいつらは、もし、おめーがバックスケープおしてもわざわざGoogleのサーバに戻らねーんだ、ちゃんとJavaScriptがキャッシュしてるわけよ。
5、あんたが結果をどのくらい早くゲットできるかってことに根ざしたメイン・ドリブン・ループをそのコードは動的に適応するんだぜ。
だからさー、おれはこのインターフェースがどうなってんのかしりたいわけよ。Googleの中のすげー人たちが書いたものを、みんなで今夜調べようぜ、で、俺はまだ書いてないけどよ、あんたと少しずつ理解してーんだ。んで、その結果が俺達みーんなの理解の助けになるってわけだ。
じゃぁ、まず、おれがどういう風に中身を解析したかってことをちょっくらまとめるぜ。
1、まず、おれはGoogle SuggestのhtmlとJavaScriptを保存し、、、で、なんとかそれを俺のコンピュータ上でも動くようにした。次に、わかりにくい変数名とか関数名を改名し、それがちゃんとはじめと同じように動いているかどうかを調べるため、いくつかalartを組み込んだんだ。
2、Google Suggestのコードでは、Googleにコールバックをかけるときに、XMLHttpオブジェクトを使って、結果を取得してるんだけどよ、完全にこのコードを理解するためには、俺はGoogleがコールバックをかけたときに一体何をを送り返してくるのか、理解する必要があったんだ。
だけどだ、おれが、コールバックをかけてくれるはずのurlを直接打ち込んでも、Googleは何にも返してくんねえ、あの404が返ってくるだけだ。(まぁ、これは後で俺が間違ったurlを打ってたってことがわかったんだけど、、、)で、俺は愛用のブラウザーをProxyを通して、アクセスをするように設定しなおした。でも、XMLHttpオブジェクトはプロキシーを通してる場合はつかえーねーこともわかった。(でもこれは、おまえらがプロキシーを通していても、Google Suggestが働かなくなるってことだろ、、、この話、本当にあってんのか?)まぁ、結局、俺はパケットをモニターするなんてことを始める前にurlのスペルミスに気づいたってわけだ。
じゃ、まぁ、とりあえず、Google Suggestのメインコードを見てくれ、、、そうすりゃ、このソースコードの最後らへんにあのダイナミックなインターフェースを提供してるJavaScriptの場所がわかるだろう(まぁ、これだよ)。
まったくGoogleのなかの素敵なやつらは、このコードを、それが自分たちの仕事かのようにくそったれに圧縮してくれたので、、、まず、最初にそれを理解するため、俺はこんな感じでインデントを入れたわけだ。そっから、何のためのグローバル変数なのか、それぞれ関数は何をしてんのかを解明するっていう、おもしれー作業を初めて、、、んで、そいつらをもっとわかりやすい名前に変えたわけだ。おれは、なんとかそいつらをプリチーにしてやったぜ。書き換えた、最終バージョンがこれだ。
この課程を通して、俺は以前には知らなかったいくつかのことを学んだよ:
1、俺らはブラウザの自動補完機能をautocomplete="off"こんな感じで、検索キーを打ち込む領域のautocomplete属性をoffにしてやれば、切ることができるんだ、、、まぁ、これをどうやってこの作業する前に知るかって話だけどよ。
2、通信のためのXMLHTTP,XMLHttpRequestオブジェクトは、サーバーに戻って、その後で、新しい情報とかを取得してくるんだけど、これはページを更新しなくてもできるんだぜ、、、まぁ、Web開発の基本だけどよ、、、これに関しては、いくらでも情報はころがってるよ。
3、どうやってこのパワフルなキーハンドリングを実現してるかってこと(keyup/keydownとかeventsとかcursor key eventsの状態変化とかを補足してるんだけどよ。)
4、んで、例のどうやってJavaScriptで検索キー入力箇所の文字を強調するかってこと。
最後にどういう風に動いてるのかをみてみよう。
まずhtmlがInstallAC関数を呼び、システムを初期化する、、、これは興味深いコードだぜ、
var Jb="zh-CN|zh-TW|ja|ko|vi|";
Google SuggestはEnglishしかサポートしないっていってる一方で、しっかりJapanとかKoreaとかChinaとかを認識し、リクエストをハンドルしてるんだ。
installAC関数はもう一つのinstallACPart2って俺が名付けた関数を呼ぶ。この関数は俺たちが使っているブラウザがXMLHttpをサポートしているかを確認し、俺が"_completeDiv"って呼んでる変数を作るんだ。こいつは俺らがgoogleからデータを取得したときの、その推測した結果を持ってるんだけど、こいつは検索キー入力フィールドに完璧に収まる形でそいつらを並べるんだ、最初は表示されないけどな。
installACPart2関数はいくつかのKey downとかresizeとかのイベントハンドラもセットする。こいつが、動的にGooglに対してリクエストを行い、URLが生成されるってわけだ。
俺がmainLoopって呼んでる関数は、繰り返しJavaScriptで書かれたsetTimeout関数を呼ぶんだ、おもしれーことに、設計者はキーボードのイベントをハンドルするよりも、タイムアウトを設定する機構を組み込んだ。これがおせー通信環境でも、はえータイプを何とかするメカニズムってワケよ。(例えばよ、おれがタイムアウトが起きることなく、すばやく3文字を打ち込んだら、その後で、一回だけ、googleからデータを取得するわけよ。)
このmainLoopは検索キー入力フィールドが何か書き込まれたかどうかを常にチェックしてる、んで、もし書き込みがあったらまずそこに同じ文字が書き込まれていないか結果を調べて、そのあと、googleからデータを取得するわけだ。Google Suggestのコードでは、XMLHttpオブジェクトをサポートしていない古いブラウザでもクッキーとフレームレローディングを駆使して、このへんのことをうまくやるらしいぜ。(このへんはおれもまだ試してないけどな、、、)
callGoogle関数の実装は率直で簡単だ。俺でも、その流れを書けるぜ。
(例えば、俺がEnglish圏で、"fast bug"ってタイプしてたらよ)
http://www.google.com/complete/search?hl=en&js=true&qu=fast%20bug
その時、URLはこうなるだろ。で、イベント駆動型のcallback _xmlHttp.onchangeファンクションを呼ばれて、こいつは、googleからデータを取得するために、最初から最後までJavaScriptでかけちまうような単純な処理をする、で、こんな感じのものをよぶわけだ。
sendRPCDone(frameElement, "fast bug", new Array("fast bug track", "fast bugs", "fast bug", "fast bugtrack"), new Array("793,000 results", "2,040,000 results", "6,000,000 results", "7,910 results"), new Array(""));
このsendRPCDoneって関数はac.jsのファイルの中で定義されてるんだけどよ、こいつがmainLoopの中でうまく同期を行い、受け取った結果をキャッシュにぶち込み、_completeDivを作る、、、DIVは結果の配列であり、最終的に表示されるものなわけだ。
displaySuggestedList関数は、その結果を受け取って、表示のためのワンセットのDOM構造のDIVとSPANを動的に生成する、で、こいつが推測結果を表示する最終的な形ってわけだ。さっき場合だと、listの要素やデータ構造はこんな感じになる。(ここでは(x)がコード内での変数な。)
bug tracking
500,000 results
んで、最後にPa関数(こいつは満足できる名前じゃねーな)は推測結果をうけとったり、なんかキーが押されたりしたら(たぶんマウス関連のイベントも補足してると思うよ)まだ、打たれてねー文字に対して強調をかけるってわけだ。
いままで書いたものをみたら、あんたらは自分自身で完璧にコードを解読しようと思うかもしんない、、、そん時に、なんか質問でもコメントでもあったら教えてくれ。俺がタイプミスをなおしたり、変数とか関数の名前を変えるいい機会になるからよ。
-
-
- 翻訳終わり---
-
インターフェース的にはおもしろい内容でしたが、リクエストに対してどんな形でGoogleの中の人がデータベースを処理しているかの内部的な実装も知りたいです。でもGoogle Suggestの内部は公開されないだろうなぁ。