サイト内検索フォームをつける

Google Co-opでサイト内検索フォームをつける

自分のサイト内を検索するフォームをつけると、閲覧者が目的のページに到達する手段が増え、より便利になります。

サイト内検索機能をつけるには、そのようなCGIを導入する方法もありますが、結構なサーバ負荷があることや、その負荷を軽減するためには検索対象をインデックス化する手間が必要なことから、ここではwebサービスを使う方法をお勧めしたいと思います。

Google Co-opでカスタムサーチエンジンを作る手順

このサービスを使うにはGoogleのアカウントが必要です。GmailやGoogleリーダーなどを使用していて既にアカウントを持っている人はそのアカウントを利用できます。

Google Co-opのCustom Search Engineという部分をクリック
次のページのCreate a Custom Search Engineというボタンをクリック

必要事項を記入していきます

Google Co-op

Basic information …
Search engine name、Search engine descriptionは適当に自分が解りやすいものをつければOK。

Search engine Keywordsも自サイトに関連するものをいくつか。

Search engine languageは、「All language」を選んでおくとブラウザの言語設定を自動的に判断してくれます。
What do you want to search? … 自サイト内を検索するサーチエンジンを作りたいので「Only sites I select.」にチェックを。
Select some sites … 自サイトのURLを記入。
Advertising status …
検索結果ページに広告表示するかどうかを選択しますが、広告非表示が認められるのは非営利団体、大学、および政府機関のwebサイトのみです。

利用規約に同意できるなら「I have read and agree to the Terms of Service.」にチェックを入れてNextボタンをクリック
Finishをクリックして完了

貼り付けコードの作成、表示カスタマイズ

貼り付けコードの作成、表示カスタマイズはControl Panelで行います。

表示方法選択

「code」をクリックすると、いくつかの設定項目と貼り付けコードが表示されます。

Google Co-op

Search results hosting options … 検索結果表示方法をここで選択。
- Host results on a non-Google site using an … 検索結果をGoocleのページ以外で表示します。自サイト内のページに埋め込みたいのでこちらを選択。
  - iframe …
    検索結果をiframeでページに埋め込み表示します。^*1
  - overlay …
    AJAXを使い、検索結果をページ上に表示します。^*2
  *1 … 検索結果表示用ファイルが必要
  *2 … AJAX Search APIを利用、検索結果最初の8項目のみ表示、Adsence利用不可
- On a Google-hosted page … 検索結果をGoogleのページで表示します。
Specify search results details … 検索結果表示用ファイルのアドレスを記入広告表示位置を選択。横幅を調整したい場合は「Top and Bottom」がいいようです。

貼り付け用コード

Search box code … 検索フォーム用コード。

<form action="http://example.com/***.html" id="searchbox_****">
  <input type="hidden" name="cx" value="****" />
  <input type="hidden" name="cof" value="FORID:11" />
  <input type="text" name="q" size="25" />
  <input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_****">
</script>

必要部分（上記でいうと強調されている部分）が重要な部分なのでそこさえ引き継げば自分でformタグを書いてもOK。

Search results code … 検索結果表示用コード。「Specify search results details」で記入したページに貼り付けます。
```
  var googleSearchFrameWidth = 600;
```
の「600」が横幅なのでこの幅を調整してサイトデザインと兼ね合いを図ることが出来ます。

表示カスタマイズ

表示のカスタマイズは「Look and feel」からできます。