サイト内イメージ検索窓の練習

練習がてらにGoogle AJAX SEARCH APIを利用してImage検索の検索ボックスをつくってみました。

以下順をおって記していきます。APIとおよびCode Playgroundについては確認した時点での動作に基づいてますので仕様変更・改良がおこなわれた場合はご容赦ねがいます。

それと前提としてですが、Googleのイメージ検索の結果で（自分のところのサイトが）サムネイル表示できるようになっているというのがあります。

Ⅰ: If you'd like to put an AJAX Search-Box...

Google AJAX SEARCH APIを開始するのにとりあえず以下ページを見にいきます。

追記： developers.google.com への移行などでドキュメントが存在しなくなっています。https://developers.google.com/image-search/v1/reference を参照してみるか、Googleカスタム検索を導入して、画像検索を有効にして運用すればAPIを使うことなく検索結果に画像を含めることができます。

サンプルコードのページです

• サンプル コード - Google AJAX Search API - Google Code

「基本」のセクションにあるサンプルをみにいくと、Code Playgroundに遷移します。ここでPick an APIに並ぶリスト内から自分の希望するものを選ぶとウェブ上でコードを試すことができます。今回はImage Searchを利用します(と、ここまでいってしまえばこの記事に戻ってくる必要はたぶん無いとおもうんですが)。

Ⅰ-ⅰ: About AJAX API Key

APIキーについては以下のページを参照してみてください。キーの使用については任意である等が記載されています。

• AJAX API キーの使用 - Google AJAX Search API - Google Code

ちなみに、「http://www.google.com/jsapi?key=」以下の文字列のことです。

Ⅱ: To make image search-box

Google Code PlaygroundのImage Searchで自分のサイトのイメージ検索ボックスを作ってみます

• Google Code Playground #site_restrict

ここで自分のドメインで試してみます。Edit HTMLのボタンをクリックして編集します（自分が試したときは初期値に"nasa.gov"[米NASA Home]がはいっていました）。setSiteRestriction()の値を自分のドメインに変えてみます。

• [例]imageSearch.setSiteRestriction('markdiary.com');

たいていは、execute()の値も変えないと自分のサイトの結果が出ないとおもいます。なので適当にImage検索でヒットするワードにするか、値をなしにしてみます（あるいはコメントアウト?）。

• [例1] searchControl.execute('nurie');
• [例2] searchControl.execute();

ここまでできたら、Run Codeボタンを押して実行してみます。

Edit Codeのコードをまるまるコピーするか、下向き三角印のメニューからExportするなどしてサンプルをゲットします。

Ⅲ: Completed page

完成したページは以下のようになります。

あとはスタイルなど自分のページにあわせた加工をするなどしてページに組み込みます。

• Google AJAX Search API サイト検索：イメージ