SIN@SAPPOROWORKSの覚書

C#を中心に、夜な夜な試行錯誤したコードの記録です。

google検索ボックスのインテリセンス

WebAPI

1 googleのインテリセンスが凄い

googleの検索ボックスに検索文字の入力を始めるとドロップダウンリストが開いて候補が出てくる。
これが、思いのほかトレンディで、また、うる覚えの単語をサポートしてくれると言う意味で、凄いと思います。

001


今回は、このインテリセンスを、自由に取得できないかと試みた記録です。

2 動作確認

検索文字を１文字入れた段階での通信をFiddlerで確認してみると、AJAX通信でJSONが返されているのを確認することができます。


002

検索文字に「a」、「aa」、「aaa」と入力した際のAJAX通信のリクエストを取り出してみると、下記のようになっていました。

http://www.google.co.jp/s?gs_rn=25&gs_ri=psy-ab&cp=1&gs_id=4&xhr=t&q=a&es_nrs=true&pf=p&output=search&sclient=psy-ab&oq=&gs_l=&pbx=1&bav=on.2,or.r_qf.&bvm=bv.50768961,d.aGc&fp=870b36e6959224e1&biw=762&bih=631&tch=1&ech=1&psi=B5wOUoToOqiZiQeZ0oDABA.1376689161566.1
http://www.google.co.jp/s?gs_rn=25&gs_ri=psy-ab&cp=2&gs_id=i&xhr=t&q=aa&es_nrs=true&pf=p&output=search&sclient=psy-ab&oq=&gs_l=&pbx=1&bav=on.2,or.r_qf.&bvm=bv.50768961,d.dGI&fp=870b36e6959224e1&biw=762&bih=631&tch=1&ech=2&psi=rqgOUsqiIIivlQXc24DoBA.1376692400185.1
http://www.google.co.jp/s?gs_rn=25&gs_ri=psy-ab&cp=3&gs_id=my&xhr=t&q=aaa&es_nrs=true&pf=p&output=search&sclient=psy-ab&oq=&gs_l=&pbx=1&bav=on.2,or.r_qf.&bvm=bv.50768961,d.dGI&fp=870b36e6959224e1&biw=762&bih=631&tch=1&ech=3&psi=rqgOUsqiIIivlQXc24DoBA.1376692400185.1

これで、http://www.google.co.jp/s?へのリクエストでq=の部分が検索文字列であることが分かります。色々なパラメータが付いているので、１個づつ削ってみて、動作できる最小構成が下記のものであることが分かりました。


http://www.google.co.jp/s?gs_ri=psy-ab&q=検索文字列

このリクエストをブラウザに送ると、JSON形式のデータがダウンロードできます。
即ち、WebAPIとして利用できるという事です。


003

3 JSONPによるサンプル

WebAPIということで、JSONPでデータを取得する簡単なサンプルを作成してみました

googleインテリセンス取得のサンプル

↓ここに文字を入力してください





インテリセンスの結果



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>googleインテリセンス</title>
</head>
<body>
<script type="text/javascript">
    function callback(data) {
        var textArea1 = document.getElementById("textArea1");
        var str = "";
        for (var i = 0; i < data[1].length; i++) {
            var x = data[1][i][0];
            str = str + x + "\r\n";
        }
        textArea1.value = str;
    }
    function onKeyUp() {
        var textBox1 = document.getElementById("textBox1");
        var target = document.createElement('script');
        target.charset = 'utf-8';
        target.src = "http://www.google.co.jp/s?gs_ri=psy-ab&q=" + textBox1.value + "&callback=callback";
        document.body.appendChild(target);

    }
    
</script>
<h2>googleインテリセンス</h2>
    ↓ここに文字を入力してください
    <br />
    <input type="text" id="textBox1"  onkeyup="onKeyUp()"/>
    <br />
    インテリセンスの結果
    <br />
    <textarea id="textArea1" cols="40" rows="10" readonly></textarea>
</body>
</html>