so-zou.jp

画像検索API

Google AJAX Search APIを使用して、画像を検索する方法について解説します。なおこのAPIでは、動画の検索もできます。

Google Image Search APIは2011/5/26から非推奨となり、以降はCustom Search APIを使用することとされています。Google Image Search API (Deprecated) | Google Developers

画像検索 (ImageSearch)

画像のURLなどの情報を取得して、描画は自前で行います。これにはgoogle.search.ImageSearchを使用します。

このクラスはgoogle.search.Searchクラスを継承しているため、そのクラスのメソッドも使用できます。

実行例

キーワードを変更して検索すると、下の画像情報も更新します。

≫結果プロパティの解説

サンプルコード

<!-- Google AJAX API ローダーのライブラリをインクルードする -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=xx"></script>

<script type="text/javascript">

  function OnLoad()
  {
      var imageSearch = new google.search.ImageSearch();
      imageSearch.setResultSetSize( 1 );

      // 検索完了時に呼び出されるコールバック関数を登録する
      imageSearch.setSearchCompleteCallback( this, SearchComplete, [ imageSearch ] );

      // 検索を実行する
      imageSearch.execute( 'sky' );
  }

  function SearchComplete( searcher )
  {
      // 結果オブジェクトを取得する
      var results = searcher.results;

      if( results && ( 0 < results.length ) )
      {
          var content = document.getElementById( 'content' );

          // 情報を取得する
          for( var i = 0; i < results.length; i++ )
          {
              // 画像のファイル名
              var title = document.createElement( 'p' );
              title.appendChild( document.createTextNode( results[ i ].title ) );

              // サムネイル画像のURL
              var image = document.createElement( 'img' );
              image.src = results[ i ].tbUrl;

              content.appendChild( title );
              content.appendChild( image );
          }
      }
  }


  google.load( 'search', '1' );
  google.setOnLoadCallback( OnLoad );

</script>

<div id="content"></div>

検索条件

• setRestriction … 下表に示すさまざまな制限
• setSiteRestriction … URLによる制限
• setResultSetSize … 結果の取得数 (1～8)

レスポンスが返されるとき、検索結果に含まれるすべてのサムネイル画像がメモリに読み込まれます。よって可能ならば、結果の取得数を明示するようにします。

検索結果に制限 (Restriction) を加えるにはsetRestrictionメソッドを使用します。指定可能な引数については、Image Search Class Referenceに一覧があります。

setRestrictionの引数に指定できる値

制限対象	指定値
google.search.Search. RESTRICT_SAFESEARCH	SAFESEARCH_STRICT
	SAFESEARCH_MODERATE
	SAFESEARCH_OFF
google.search.ImageSearch. RESTRICT_IMAGESIZE	IMAGESIZE_SMALL
	IMAGESIZE_MEDIUM
	IMAGESIZE_LARGE
	IMAGESIZE_EXTRA_LARGE
google.search.ImageSearch. RESTRICT_COLORIZATION	COLORIZATION_GRAYSCALE
	COLORIZATION_COLOR
google.search.ImageSearch. RESTRICT_COLORFILTER	COLOR_BLACK
	COLOR_BLUE
	COLOR_BROWN
	COLOR_GRAY
	COLOR_GREEN
	COLOR_ORANGE
	COLOR_PINK
	COLOR_PURPLE
	COLOR_RED
	COLOR_TEAL
	COLOR_WHITE
	COLOR_YELLOW
google.search.ImageSearch. RESTRICT_FILETYPE	FILETYPE_JPG
	FILETYPE_PNG
	FILETYPE_GIF
	FILETYPE_BMP
google.search.ImageSearch. RESTRICT_IMAGETYPE	IMAGETYPE_FACES
	IMAGETYPE_PHOTO
	IMAGETYPE_CLIPART
	IMAGETYPE_LINEART
google.search.ImageSearch. RESTRICT_RIGHTS	RIGHTS_REUSE
	RIGHTS_COMERCIAL_REUSE
	RIGHTS_MODIFICATION
	RIGHTS_COMMERCIAL_MODIFICATION

サンプルコード

var imageSearch = new google.search.ImageSearch();

imageSearch.setRestriction(
    google.search.ImageSearch.RESTRICT_IMAGETYPE,  // 制限する画像タイプ
    google.search.ImageSearch.IMAGETYPE_FACES      // 画像タイプ(顔)
    );

検索コントロール (Search Control)

検索コントロールを使用すれば、検索から検索結果の描画まで簡単に行えます。

実行例

サンプルコード

<!-- Google AJAX API ローダーのライブラリをインクルードする -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=xx"></script>

<script type="text/javascript">

  function OnLoad()
  {
      // 検索コントロールを作成する
      var searchControl = new google.search.SearchControl();

      // 検索コントロールに画像検索のサーチャーを追加する
      searchControl.addSearcher( new google.search.ImageSearch() );

      // 検索コントロールを描画する
      searchControl.draw( document.getElementById( 'content' ) );

      // 検索を実行する
      searchControl.execute( 'sky' );
  }


  // Search APIをロードする
  google.load( 'search', '1' );

  // ドキュメントがロードされた後に呼び出されるハンドラ関数を登録する
  google.setOnLoadCallback( OnLoad );

</script>

<div id="content">Loading...</div>

検索コントロールのカスタマイズ

google.search.DrawOptionsオブジェクトのメソッドにより、検索コントロールの描画を制御できます。

実行例

サンプルコード

var drawOptions = new google.search.DrawOptions();

// 入力に使用する要素を指定する
drawOptions.setInput( document.getElementById( 'originalSeachForm' ) );

// 検索コントロールを描画する
searchControl.draw( document.getElementById( 'search-control' ), drawOptions );

// キー入力から検索開始までの時間を設定する
searchControl.setTimeoutInterval( google.search.SearchControl.TIMEOUT_SHORT );

JavaScriptを使用しない方法

次のようにアクセスすることで、JSON形式のテキストで結果を取得できます。

http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=sky

URLに含めるパラメータはWeb検索を参照してください。

結果プロパティ

プロパティ	説明
GsearchResultClass	結果の種類。画像検索ならば、GimageSearch
width	画像の大きさ	横
height		縦
imageId	画像のID
tbWidth	サムネイル画像の横の大きさ	横
tbHeight		縦
url	画像のURL	エスケープされている
unescapedUrl		エスケープされていない
visibleUrl	画像のドメイン
title	画像のファイル名	HTMLタグを含む
titleNoFormatting		HTMLタグを含まない
originalContextUrl	画像が含まれているページのURL
content	画像に関連付けられているテキスト	HTMLタグを含む
contentNoFormatting		HTMLタグを含まない
tbUrl	サムネイル画像のURL

GimageResult

取得例

{"responseData":
  {"results":[{
      "GsearchResultClass":"GimageSearch",
      "width":"486",
      "height":"323",
      "imageId":"TZCnGuuYYmxifM",
      "tbWidth":"129",
      "tbHeight":"86",
      "unescapedUrl":"http://blog-imgs-17.fc2.com/h/o/p/hopemake/sky.jpg",
      "url":"http://blog-imgs-17.fc2.com/h/o/p/hopemake/sky.jpg",
      "visibleUrl":"hopemake.blog85.fc2.com",
      "title":"\u003cb\u003esky\u003c/b\u003e.jpg",
      "titleNoFormatting":"sky.jpg",
      "originalContextUrl":"http://hopemake.blog85.fc2.com/blog-entry-29.html",
      "content":"Peaceful Japanese \u003cb\u003esky\u003c/b\u003e",
      "contentNoFormatting":"Peaceful Japanese sky",
      "tbUrl":"http://images.google.com/images?q\u003dtbn:TZCnGuuYYmxifM:blog-imgs-17.fc2.com/h/o/p/hopemake/sky.jpg"
    }],
    "cursor":{"pages":[
      {"start":"0","label":1},
      {"start":"4","label":2},
      {"start":"8","label":3},
      {"start":"12","label":4},
      {"start":"16","label":5},
      {"start":"20","label":6},
      {"start":"24","label":7},
      {"start":"28","label":8}],
      "estimatedResultCount":"276000000",
      "currentPageIndex":0,
      "moreResultsUrl":"http://www.google.com/images?"
    }
  },
 "responseDetails": null,
 "responseStatus": 200
}

• 検索
  • Web検索
    • Custom Search
  • 画像検索
  • 動画検索
  • ローカル検索
  • 地図検索
  • ニュース検索
• 翻訳
• チャート
  • Image (静的)
  • Interactive (動的)
    • Table
    • Geomap
• Google マップ
  • Static Maps
  • ジオコーディング
• 位置情報
• Google サジェスト
• Google Analytics
• YouTube
  • Player API (再生)
  • Data API (検索)
• Web Elements
  • YouTube News Element

• お問い合わせ
• プライバシーポリシー
• サイトマップ