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というグローバル変数に結果を格納していますが,ここはお望みの情報だけ格納すれば良いかと思います.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中