Googleカスタム検索をサイトのHTMLフォームに埋め込む方法

Googleカスタム検索をサイトのHTMLフォームに埋め込む方法

Googleカスタム検索をサイトのHTMLフォームに埋め込む方法

簡単に検索機能を実装できて非常に便利なGoogleカスタム検索ですが、発行されたタグをデフォルトのままサイトに埋め込むと横幅が100%になったりと、ちょっと面倒な部分もあります。デザインを思い通りにするには、がっつりCSSをいじる必要が出てきます。

サイト内に設置しているHTMLのフォームをそのままGoogleカスタム検索の検索ボックスとして利用できたら、Googleカスタム検索を導入した後にCSSを調整する必要がなくなります。

そこで今回は、HTMLのフォームにGoogleカスタム検索を埋め込む方法を紹介したいと思います。

ステップ1. Googleカスタム検索で検索エンジンの追加

まずは、Googleカスタム検索にアクセスして、導入したいサイト用に検索エンジンを追加します。[Add]から「検索するサイトのURL」と「検索エンジンの名前」を入力して、[作成]をクリックします。「言語」は日本語を選びましょう。

Googleカスタム検索で検索エンジンの追加

ステップ2. 検索結果を表示するページの作成

検索結果を表示するためのページを作成します。検索結果を表示するページのHTML内に以下を記述します。

<script>
 (function() {
 var cx = '01234567890123456789:abcdefghijk';
 var gcse = document.createElement('script');
 gcse.type = 'text/javascript';
 gcse.async = true;
 gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
 '//cse.google.com/cse.js?cx=' + cx;
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(gcse, s);
 })();
</script>
<gcse:searchresults-only linkTarget="_self"></gcse:searchresults-only>

今回はファイル名をsearch-result.htmlとしました。

「cx」の値は、作成した検索エンジンの編集画面から確認します。編集画面を開くと、URLが以下のようになっているので、「01234567890123456789:abcdefghijk」の部分をcxの値として記述します。

https://cse.google.co.jp/cse/setup/basic?cx=01234567890123456789:abcdefghijk

ステップ3. フォームのマークアップ

フォーム側は、以下のように記述します。

<div class="l-search">
 <form id="cse-search-box" action="search-result.html">
 <input type="text" name="q" class="l-search__text">
 <input type="submit" value="検索" class="l-search__btn">
 </form>
 <script type="text/javascript" src="//www.google.com/cse/brand?form=cse-search-box&lang=ja"></script> <!--透かし表示-->
</div>

actionで検索結果ページのsearch-result.htmlを指定します。

最後のスクリプトはGoogleカスタム検索の透かし表示です。

あとがき

やってみると非常に簡単にGoogleカスタム検索をフォームに埋め込むことができます。

予算を抑えたい時など、クライアントワークでも使えますので、覚えておいて損はないと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です