cse.js無しでGoogleカスタム検索（プログラム可能な検索エンジン）を使う方法とCSSでのカスタマイズ【サイト内検索】

わりと既知の情報ですが、Google の「プログラム可能な検索エンジン（旧 Google カスタム検索）」を https://cse.google.com/cse.js を使わず、HTML フォームだけで利用する方法と、CSS での見た目のカスタマイズについてメモしておきます。

サイト内検索とかで使うヤツですな。

公式情報とサンプルコードはこちらになりますが、

• HTML フォームを使用した検索ボックスの作成 - Programmable Search Engine ヘルプ

公式サンプルコードを少し弄ると、こんな感じ。

<form id="cse-search-box" action="https://www.google.com/cse">
<input type="hidden" name="cx" value="ここに検索エンジンID">
<input type="hidden" name="ie" value="UTF-8">
<input type="text" name="q" size="15" placeholder="Google サイト内検索" required>
<input type="submit" name="sa" value="検索">
</form>
<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">Code language: HTML, XML (xml)

input[type="text"] の size はお好みで（表示上の幅）。

自分の「検索エンジンID」は以下から取得。

• Programmable Search - すべての検索エンジン

Flexbox を使った CSS 例は、こんな感じ。

#cse-search-box {
	display: flex;
	height: 2rem;
	justify-content: center;
	align-items: center;
}

#cse-search-box input {
	font-size: .7rem;
	padding: 0.4rem;
	border: #888 solid 1px;
	border-radius: 0;
}

#cse-search-box input[type="text"] {
	border-radius: 5px 0 0 5px;
}

#cse-search-box input[type="submit"] {
	border-left: none;
	border-radius: 0 5px 5px 0;
}
Code language: CSS (css)

ただし Google によると、この HTML フォームを使った検索は、あくまでも利便性のために提供されている、とのこと。

本来的には「プログラム可能な検索エンジン（Programmabel Search）」は、公式提供されている cse.js で使うのが基本で、そちらなら画像検索やセーフサーチの ON・OFF、また、対象地域・複数の検索対象サイトの設定などが管理画面から可能です。

とはいえ、どうしても JavaScript を使いたくないシーンなどでは、HTML フォームの形式もノンサポートですが使える、ということで。

Google Tag Manager もそうですが、基本的には高度な機能をコーディングなしで使える、というのが最近の当たり前なもので。