プラカンブログSTAFF BLOG

2017.05.23

Googleカスタム検索ボックスの作り方【HTMLフォーム実装版】

【HTML版】 Googleカスタム検索 (サイト内検索)の作り方

Webデザイナーの嶋津です。自社のWebサイトにサイト内検索(検索ボックス)を作成したい場合、皆さんはどうしていますか?

今回は、「Googleカスタム検索」の設置方法と、ユーザービリティー(処理速度向上)を考慮した実装方法(HTML版)について、紹介したいと思います。

Googleアカウントを用意!

まずはじめに、Googleカスタム検索を作成するためには、Googleアカウントが必要になりますので、用意しておきましょう。

Googleカスタム検索でオリジナルの検索ボックスを作成!

Googleカスタム検索

Googleカスタム検索は、上記のリンク先から作成することができます。

 

Googleカスタム検索

このページで「Add」をクリックすると、オリジナルの検索エンジンを登録することができます。

Googleカスタム検索の作成フロー

Googleカスタム検索

「検索するサイト」「言語」「検索エンジンの名前」を指定し、「作成」をクリックします。

 

Googleカスタム検索

「カスタム検索エンジンの作成が完了しました。」というコメントとともに、Googleカスタム検索のコードを取得できるボタンが表示されるので、クリックします。

【script】コードを取得

Googleカスタム検索

表示イメージ

<script>
  (function() {
    var cx = 'YOUR SEARCH ENGINE ID goes here';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

‘YOUR SEARCH ENGINE ID goes here’は「検索エンジンID」が記述されており、各々で違います。あとはこのコードを表示したい箇所へコピペすればいいだけです。

Googleカスタム検索の注意点 その1

しかし、ここで問題が生じます。Googleカスタム検索を設置したページを表示する際に、ページが「カクッ」となるのです。これではなんだか気持ち悪いですよね。

原因は恐らくGoogleカスタム検索の記述がscriptで記載されていることで、どうしても読み込みに時間が掛かってしまうみたいです。

Googleカスタム検索をHTMLフォームの記述に変更!

【HTML】コードを取得

Googleカスタム検索

表示イメージ

<form id="cse-search-box" action="http://google.com/cse">
<input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</form>
<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

参考:HTML フォームを使用した検索ボックスの作成

そこでHTMLフォームの記述に書き換えましょう。‘YOUR SEARCH ENGINE ID goes here’の部分は上述した通り、各々の「検索エンジンID」を記述します。これでGoogleカスタム検索が実装されているサイトの読み込み時に、「カクッ」となることがなくなりました。

Googleカスタム検索の注意点 その2

しかしここでもまた問題が生じます。それは、このままではGoogleのロゴが検索ボックスの下に表示されてしまうことです。これはデザイン上、表示してほしくない場合が多いかと思います。

Googleカスタム検索を使用する上でGoogleのロゴを消すことは、Googleの規約違反になるためできません。しかしこれにも解決策があります!

GoogleのロゴをJavascriptで検索ボックス内に表示しよう

Googleカスタム検索

表示イメージ

<form id="cse-search-box" action="http://google.com/cse">
<input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa"  value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>

それはGoogleのロゴを表示している記述をscriptでの記述に変更するだけです。こうすることで、Googleのロゴを検索ボックス内に表示することができます。

Googleカスタム検索の注意点 その3

しかしこれまた問題が生じます。それは「Search」ボタンです。デザイン上、よろしくない場合が多いかと思います。しかしこれにもまた解決策があります!

Googleの検索ボタンをカスタマイズしよう

Googleカスタム検索

表示イメージ

<form id="cse-search-box" action="http://google.com/cse">
<input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa"  value="Search" id="search_btn" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>

そこで<input type=”submit” />にID名を付けました。こうすることで、検索ボタンをCSSにてカスタマイズすることができるわけです。参考までにCSSの記述を下記に載せておきます。

#search_btn {
    border: 0px;
    width: 49px;
    height: 22px;
    background: url(../img/search_btn.png) no-repeat;
    position: absolute;
    right: 10px;
}

まとめ

サイト内検索ボックスの設置は、Googleカスタム検索を利用することで驚くほど簡単に実装できることが理解できたと思います。

素晴らしいGoogleの検索機能が、無料で、しかも比較的容易に実装できるので、自社サイトに検索ボックスを実装したい場合は、ぜひGoogleカスタム検索をお試しください。

この記事は1年以上前の記事で内容が古くなっている場合があります。

+dc(嶋)

この記事は、SHIMAZU が書きました。