読者です 読者をやめる 読者になる 読者になる

FutureInsight.info

AI、ビッグデータ、ライフサイエンス、テクノロジービッグプレイヤーの動向、これからの働き方などの「未来」に注目して考察するブログです。

Google Suggestの動作原理 2

パソコン・インターネット

ではでは、続きを。

こっからは、実装の詳細になります。

ーーー

おれがどういう風に中身を解析したかってことをちょっくらまとめるぜ。

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で検索キー入力箇所の文字を強調するかってこと。

とりあえず、こんなことを学んだよ。

ーーー

そういえば、プログラマーのバイブル『達人プログラマー』に書いていました。

「もっとも恐ろしいことは解決策が一つしかないことだ。」

まぁ、常に複数の解決策を思いつき、そのなかの長所、短所を吟味したうえで実装することを心がけろってことですな。

あと、こんな事も書いていました。

「我々は言語に支配されている。」ルートヴィヒ・ウィトゲンシュタイン

これは、ウィトゲンシュタインの言いたかったことをうまく違う感じで言い回してて笑ってしまったんですが、これを読んで俺はいろいろな言語を勉強して見ようと思いました。でも、Perlは最後になっちゃうかもなー。「達人プログラマー」の作者もPerlはあんまり好きじゃないくさいです。もしくはすげー愛してるかも。あの正規表現の文字の羅列をなんかの叫び声を文字にしてるって書いてました。


まぁ、とりあえず、今日はここまで。次で最後までいきます。最後はお待ちかね関数群の説明です。