<a href="http://www.flickr.com/photos/web-marketing/888472240/" title="Google AJAX Search APIにイメージ検索を追加"><img src="http://farm2.static.flickr.com/1440/888472240_8c7a047153_m.jpg" width="240" height="229" alt="Google Search API Adds Image Results" /></a>

<p>Ajax Searchに新しい機能が追加されたら、とりあえず試しておけっていう信条から、さっそく試してみました。</p>

<!--more-->
<p>せっかくなので、<a href="http://web-marketing.zako.org/google/google-earth/googleearth-3d-sky-dome.html" target="_blank">グーグルアース</a>にちなんで”Blues Brothers”を検索。</p>
<iframe scrolling="no" frameborder="no" width="493" height="500" src="http://web-marketing.zako.org/google-ajax/image-search.html"></iframe>
<p>Google AJAX Searchはサクサク検索できるのが気持ちいいですね。<br />
Ajaxってなんて素晴らしいんでしょう。</p>

<p>このサクサク感に目をつけて、海外のネットショップやネットスーパーが導入しているのも事実。</p>
<p>日本の著名サイトでも最近Ajaxを積極的に使うようになってきましたよね。（例：<a href="http://www.iza.ne.jp/" target="_blank">iza</a>）</p>

<p>話が逸れましたが、Google Ajax Searchを設置するには<a href="http://code.google.com/apis/ajaxsearch/signup.html" target="_blank">API key</a>が必要。</p>
<p>既にGoogle Ajax Searchを利用している人は、下記スクリプトを追加、
<textarea name="code" class="js" cols="60" rows="5" id="code">var searchControl = new GSearchControl();
searchControl.addSearcher(new GimageSearch());</textarea>

もしくは既存ファイルに下記スクリプトを、ベースのスクリプト部分と入れ替えてしまえばOK。</p>
<textarea name="code" class="js" cols="60" rows="5" id="code">&lt;script type="text/javascript"&gt;
function OnLoad() {
var searchControlDiv = document.getElementById("searchControl");
var control = new GSearchControl();
control.setResultSetSize(GSearch.LARGE_RESULTSET);
control.setLinkTarget(GSearch.LINK_TARGET_PARENT);

var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
control.addSearcher( new GimageSearch(), options );
control.draw(searchControlDiv);
control.execute("matt | niniane | larry site:blog.outer-court.com");
}
GSearch.setOnLoadCallback(OnLoad);
&lt;/script&gt;</textarea>

<p>初めてGoogle Ajax Seachに挑戦する人、もしくは敷居が高いと思っているあなた。<br />
そんな方に、スタートアップキット（右クリックでファイルに保存。テキストファイルになっています。）。</p>
<h3 class="tips">Google Ajax Seachスタートアップガイド</h3>
<ol>
<li>スタートアップキットをダウンロード</li>
<li><a href="https://jp.emeditor.com/text-editor-features/history/emeditor-free/" target="_blank">EmEditor</a>などの各種文字コードに対応したテキストエディタで開く</li>
<li>「あなたのAPI key」の部分に取得した<a href="http://code.google.com/apis/ajaxsearch/signup.html" target="_blank">API key</a>をコピペ</li>
<li>HTML形式で保存（文字コードをUTF-8に）</li>
<li>サーバーにアップして、ページを開けば"Blues Brothers"のイメージ検索結果が出てきますｗｗ</li>
</ol>

<p>Ajaxの可能性は、サイトのユーザビリティを向上させてくれること、いろいろなサンプルが無償で配布されていること、これにつきます。</p>
<p>拒否反応を起こしていた人も、是非この機会に試してみては？</p>

<div class="tool"><h2>Google AJAX Search API Image Search</h2>
http://www.google.com/uds/samples/apidocs/image.html<br />
Googleイメージ検索サクサク</div>

<script class="javascript" src="http://web-marketing.zako.org/js/shCore.js"></script>
<script class="javascript" src="http://web-marketing.zako.org/js/shBrushJScript.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>