javascript(jQuery)でGoogle Image Search APIを使う

google image search APIをJavascriptから使う方法のメモ. このAPIはJSONを返してくるので普通にjquery.ajaxを使うというのもありなのですが,javascript用のモジュールが公開されていて使った感じだと そちらの方が早いです.なので今回はその方法を忘れないうちにメモ.

まず,簡単なHTMLを用意します.

<html>
  <head>
    <title>      
      Google Image Search API test
    </title>
  </head>
  <body>
    <input id="keyword" type="text">
    <input id="search" type="button" value="Search">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://www.google.com/jsapi?"></script>
    <script src="search.js"></script> //自分用
  </body>
</html>

jqueryとAPIを読み込んでおきます. これで準備は完了です. search.jsというファイルを作ります.内容はこんな感じです.

google.load("search", "1");
$(function(){
    var pageCounter; // for google image search API
    var results;
    function search(keyword){
        var searcher = new google.search.ImageSearch();
        searcher.setResultSetSize(8);
        searcher.setSearchCompleteCallback(this, afterSearch, [searcher]);
        searcher.execute(keyword);
    }
    function afterSearch(searcher){
        for(var i=0; i<searcher.results.length; i++){
            results.push(searcher.results[i]);
        }
        pageCounter++;
        searcher.gotoPage(pageCounter);
        if(pageCounter == 8){
            // something
        }
    }
    $("#search").bind("click", function(){
        pageCounter = 0;
        results = new Array();
        search($("#keyword").val());
    });
}

こんな感じです.Searchボタンが押されたら入力されたキーワードで検索します. 流れとしては,

  1. search
  2. aftersearch
  3. ページが8ページならsomething, そうでないなら2へ.

この例では,resultsというグローバル変数に結果を格納していますが,ここはお望みの情報だけ格納すれば良いかと思います.

ajaxでjsonを取得しグローバル変数へ格納(javascript ajax jquery)

ajaxでjsonを取得しグローバル変数へ格納する方法のメモです.

$(function(){
    var results;
    $.ajax({
        type: "GET",
        url: url,
        data: data,
        dataType: "json",
        timeout: 120000,
        error: errorHandlier,
        success: function(r){
            results = r.data;
        }
    });
    setTimeout(function(){
        if(results != null){
            /* whatever you want to do using the results */
        }
        else{
            setTimeout(arguments.callee, 100);
        }
    }
});

同期通信を用いた方法も紹介されていました.

var hoge
    function setPreference(){
        $.ajaxSetup({async: false});//同期通信(json取ってくるまで待つ)
        $.getJSON("preference.json", function(data){
            hoge = data.param;
        });
        $.ajaxSetup({async: true});
    }

しかし,setTimeoutを使う方が安定しているように感じます.