Google カスタム検索を設置

2014年2月18日著

標題がすべてというか、当サイトにGoogle カスタム検索を設置しました、以上。みたいな感じの話ではあるのですが、ようやくサイト内検索をGoogle様のお力を借りて設置しましたよと。昨年7月のサイトの大幅改修より前にも設置しようと思っていましたが、ダルくて。というのも、以前はヘッダーやフッターといった共通部分を外部ファイル化していなかったんですね。今のつくりでは、SSIにより外部ファイル化していますので、設置は一瞬でした。当然、覚え書きコンテンツについてもMovable Typeの再構築を待つ必要無し。ちなみに設置場所は各ページのトピックパス（俗称「パンくずナビ」）の下。上から順にコンテンツを読み進めて、お目当ての情報に巡り会えず、トピックパスに並ぶリンクラベルにもめぼしい候補が見当たらなかったタイミングで、サイト内検索のニーズを満たそうという魂胆。しかしこれ、何も考えずに検索ボックスコードを取得すると

<script>
  (function() {
    var cx = '008987560055095104238:ldder5b1h_q';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only></gcse:searchbox-only>

みたいなコードをコピペさせられるのね。これってどうなんでしょう（謎）。一応注意書きはあるけど（JavaScript を無効にする - カスタム検索ヘルプ参照）、さすがにJavaScript無効で使えないのは嫌な感じだったので、

あたりを参考に、HTMLフォームで検索ボックスを設置した次第。見た目は適当ですが、画面解像度を問わず普通に使えるはず。ただ検索結果画面はマルチスクリーンに対応しておらず、がっつりPC相当のスクリーンサイズ前提でつくられてるぽいから、スマートフォンなんかだと使いにくそう（ [ 2014-02-19 追記 ] 後で確認したところ、UA判別でそれなりにスマホでも見やすいように切り替えてるぽい）。カスタム検索の設定で、レイアウトの選択に「結果のみ」を選べば何かしら改善できそうだけど、それはまた時間のできたときにでも。