超軽量♪Googleカスタム検索はJavaScript外すと改造し放題

Googleのサイト内検索(カスタムサーチ)機能を、JavaScript使わずに実装する方法です。Jsで呼び出す方式と比べてCSSの上書きがないため体感的に早くなります。

超軽量♪Googleカスタム検索はJavaScript外すと改造し放題

サイト内検索エンジンとしてGoogleカスタムサーチを導入したら思いのほか描画に時間が掛かって戸惑いました。正確に言うと、読み込み時間は大したことないんだけどレンダリングがカクカクします。コードが展開される過程でCSSが上書きされてるようです。こう言うのすごく気になる…。(´・ω・`)

そこで発行されたウィジェットコードを眺めながら、「このJavaScriptが邪魔なんだよなぁ…」と勝手にタグを書き換えていたら出来てしまいました。何がって、HTMLだけでリクエストできるサイト内検索フォームです。

FORMタグのみ!JavaScript不要のGoogleカスタム検索

Googleカスタム検索のカスタマイズ

HTMLだけで余計な物を読み込んでませんから、適切な位置にクラスを付与すれば CSSで見た目を変え放題です。 !important 指定で無理やり優先権を奪う必要もありません。

…とまぁ、良いことずくめに見えますが問題はここからですよ。

コードスニペットからJavaScript抜いても大丈夫なの?

世の中「出来る」ことと「やっていい」ことは違います。特にGoogle先生はそのへん厳しいですし。

調子こいてアカウント剥奪されたら困りますから、コード改変が許されるかカスタムサーチの仕様を検索しまくります。

HTMLだけでサーチリクエストしても良いらしい

結論から言うとOKでした。

JavaScriptが設置できないレガシーなシステムのため、HTMLだけのリクエストも依然として受け付けてるようです。
HTML フォームを使用した検索ボックスの作成 – カスタム検索 ヘルプ

「古い技術なのでサポートはしない」との旨が明言されてますけど、そもそも個人ページのサイト内検索なんて滅多にされませんから大した問題はありません。「サイト内検索は必要だけど、重くて邪魔」はイヤなのです。

我ながらワガママですけど、どのコードを使ってリクエストしても検索結果が同じなら表示が軽いの大事です!

Googleカスタム検索 実装編

このページにたどり着いた方は既にお持ちだと思いますが、あらかじめGoogleのカスタム検索コードを取得しといて下さい。

検索エンジンIDを取得する

以下のページからGoogleにログインして、自分に割り当てられたIDを確認します。
カスタム検索 – 検索エンジンの編集

新しい検索エンジン > 設定 > 基本 > 検索エンジンID

なお、自サイトに既存ウィジェットがあれば埋め込まれてる数字がそのまま使えます。”partner-pub-xxxxxxx” なる文字列があるかどうかチェックして下さい。

HTMLのコード例

【HTML】
<form id="cse-search-box" action="http://google.com/cse">
<input type="hidden" name="cx" value="カスタム検索コード" />
<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">

最終行はGoogleのロゴマークです。いくつか用意されてるので好きなの選びます。
Google カスタム検索

次にカスタム検索コードを書き換えてサイト内検索エンジンとして動くことを確認して下さい。そしたら後は心ゆくまでCSSで改造しまくりましょう。ひゃっほぅ。

今回の目的とは相反しますが、フォーム内部にウォーターマークを読み込みたい場合は画像の代わりに以下のコードを添えます。

<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>

仕様補足

実際に検索すると別窓にて結果が開きます。現在推奨されてるJavaScript主体のコードなら今開いてるページに直接結果が出ますから、UXとしては多少下がることをご理解下さい。

【裏技】同一ページに複数検索欄つけるとロゴが出ない

裏技というかバグですね。

ロゴをJavaScriptで表示してる場合、同一ページ2個目のフォームではウォーターマークが出ません。フォーム全体のデザインもサイト側のCSSが適用されます。同一ページ内に同じコードを複数張っても初回しか読み込まれないためです。

それでもフォームとしてのリクエストは通るので、2個目のフォームをオリジナルっぽく見せることは可能でしょう。でも利用規約に抵触するんじゃないかと思うのでオススメはしません。

まとめ

そんなわけで おち研内記事の曖昧検索が可能になりました。いつか読んだはずのうろ覚えのネタもGoogle先生に聞けばバッチリ教えて下さいます。どうぞ ご活用下さいませ~。