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

2014/08/12 2014/08/12

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

サイト内検索エンジンとして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>