このページは Cloud Translation API によって翻訳されました。

検索ボックスの実装

プログラム可能検索エンジンを作成したら、プログラム可能検索要素をサイトに追加できます。そのためには、コードの一部をコピーして、検索エンジンを表示するサイトの HTML 内に貼り付ける必要があります。

コントロールパネルで、使用する検索エンジンをクリックします。
[概要] ページの [基本] セクションで、[コードを取得] をクリックします。コードをコピーし、ページの HTML ソースコード内のプログラム可能検索要素を表示する場所に貼り付けます。

<div class="gcse-search"></div> 要素はプレースホルダです。ここに検索要素（検索ボックスと検索結果の両方）がレンダリングされます。

<script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>

<div class="gcse-search"></div>

さまざまなレイアウトを試す

多くの場合、検索ボックスを検索結果とは別に表示した方が理にかなっています。2 列レイアウトでは、ページの 1 つの領域（サイドバーなど）に検索ボックスをレンダリングし、別の領域（ページのメイン領域など）に検索結果を表示できます。

エンジンのレイアウトを変更するには、コントロールパネルの [デザイン] ページの [レイアウト] セクションに移動します。コントロールパネルで 2 列レイアウトを選択して保存した後、検索要素の HTML コードも変更する必要があります。

<script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>

<div style="border: 1px solid blue;">
    Area 1 (for example a sidebar)
    <div class="gcse-searchbox"></div>
</div>

<div style="border: 1px solid red;">
    Area 2 (for example main area of the page)
    <div class="gcse-searchresults"></div>
</div>

もう 1 つの興味深いレイアウトは、2 ページのオプションです。1 つのページに独自の検索ボックスを実装し、アドレスバーのパラメータを使用して別のページに標準の検索結果をレンダリングできます。

コントロールパネルで [2 ページレイアウト] を選択して保存します。1 つのページにスタンドアロンの検索ボックスを実装し、結果を表示する URL を参照するように resultsUrl 属性を変更します。

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>

試してみる

単独の検索結果ページを実装するには、結果コードスニペットを検索結果ページに貼り付けます。

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>

これで、URL に「q」引数を渡すことで、このページの検索結果をトリガーできるようになりました。

https://my-results-page-url.com/?q=myQuery

アドレスバーの q=myQuery パラメータに注目してください。これは、表示するクエリ結果を <div class="gcse-searchresults-only"></div> 要素が判断するための仕組みです。

試してみる

次のステップ

オートコンプリートを有効にするに進みます。