/ programing

Google カスタム検索の検索ボックスの見た目を独自デザインに変更する

サイト内検索ネタその3。

Google カスタム検索をさらにカスタマイズする。つまりカスタム Google カスタム検索！

kwLabs Google Custom Search

Google カスタム検索は結構イケてる。http://www.google.co.jp/coop/cse/

Google カスタム検索でGoogle AJAX Search APIを使ってAjaxな検索機能をサイトに置くこともできる。むろん技術的な知識はあまり必要なく、設定をいろいろするだけでhtmlをはき出してくれる。

kwLabs Google Custom Search

デフォルトでは検索ボックスはほとんどデザインされておらず、サイトのテイストと合わないことがあるかもしれない。ただcssでstyleを設定しようにもGoogle カスタム検索で出力されたhtmlではjavascriptでstyleを上書きしているため変更することができなかった。なのでデフォルトのhtmlを書き換えてみた。

まず、カスタム検索のことは忘れてデザインをつくる。今回はHOWTO: spruce up your search box with CSS and a background imageを参考にさせてもらった。

Fireworksで背景画像とサーチボタンの画像を作る。背景は長方形に丸みをつける(160×24、丸み80%)。

検索ボタンは２つ丸のパスを交差してドーナッツをつくり、さらに長方形を45°傾けたものをパス合成する。合成したパスに対して軽くドロップシャドウをかける。色をサイトのテイストに合わせばそれらしくなる。

ここでポイントをあげるとするとエディットボックスの背景画像に

を使う場合、この画像の高さが16pxあるのでこれが入りきるサイズでデザインしておく必要がある。

さてここからカスタム検索で出力されたhtmlをいじっていく。今回はカスタム検索で、[検索結果のホスティング オプション] > 自サイトで検索結果をホスト: > オーバーレイ – 1 ページですがモーダル オーバーレイで結果を表示しますで作成されたコードをベースにした。

デフォルトだとこんな感じ。

<form action="" id="searchbox_003122074834180947232:omul0da14we" onsubmit="return false;">
  <div>
    <input type="text" name="q" size="40"/>
    <input type="submit" value="Search"/>
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_003122074834180947232%3Aomul0da14we&lang=ja"></script>
<div id="results_003122074834180947232:omul0da14we" style="display:none">
  <div class="cse-closeResults">
    <a>&times; 閉じる</a>
  </div>
  <div class="cse-resultsContainer"></div>
</div>
<style type="text/css">
@import url(http://www.google.co.jp/cse/api/overlay.css);
</style>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAJeJU0o6FZh4wCRoY2rR1hBSMcL7SouxgcRP3eM7gifYIAxifSRRui72u-FxNMVGc5XOm17HJdpuoTw&hl=ja" type="text/javascript"></script>
<script src="http://www.google.co.jp/cse/api/overlay.js" type="text/javascript"></script>
<script type="text/javascript">
function OnLoad() {
  new CSEOverlay("003122074834180947232:omul0da14we",
    document.getElementById("searchbox_003122074834180947232:omul0da14we"),                 
    document.getElementById("results_003122074834180947232:omul0da14we"));
}
GSearch.setOnLoadCallback(OnLoad);
</script>

HOWTO: spruce up your search box with CSS and a background imageに沿ってフォームをいじる。具体的にはsubmitボタンを画像にする。

before:

<form action="" id="searchbox_003122074834180947232:omul0da14we" onsubmit="return false;">
  <div>
    <input type="text" name="q" size="40"/>
    <input type="submit" value="Search"/>
  </div>
</form>

after:

<div id="search-box">
  <form action="" id="searchbox_003122074834180947232:omul0da14we" onsubmit="return false;">
    <div>
      <input class="search-text" type="text" name="q"/>
      <input type="image" src="/css/img/layout/search-go.png" width="19" height="18" class="search-go" alt="Search" title="Search" />
    </div>
  </form>
</div>

なんということで(ry

で検索ボックスにcssを適応する。

search-box { position:absolute; top:6px; right:4px; display:block; width:160px; height: 24px; background: url(./img/layout/search-bg.png); }
#search-box input.search-text { float:left; margin: 2px 0 1px 6px; padding:0; border:0; width: 120px; }
#search-box input.search-go { float: right; margin: 3px 4px 0 0; }

しかし、前述の通りinputのcssはjavascriptによるstyleの上書きにより適応されない。そこでjavascript部分に手を加える。

styleに手を入れているのはformの次にある

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_003122074834180947232%3Aomul0da14we&lang=ja"></script>

である。これを次に置き換える。

<script type="text/javascript">
(function() { var f = document.getElementById('searchbox_003122074834180947232:omul0da14we'); if (!f) { f = document.getElementById('searchbox_demo'); } if (f && f.q) { var q = f.q; var n = navigator; var l = location; if (n.platform == 'Win32') { q.style.cssText = ''; } var b = function() { if (q.value == '') { q.style.background = 'transparent url(http:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fja\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat'; } }; var f = function() { q.style.background = 'none'; }; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) { b(); } } })();
</script>

なんという(ry
minifyされているのでわかりにくけどだいたい以下のような変更をしている。

 (function() {
  var f = document.getElementById('searchbox_003122074834180947232:omul0da14we');
  if (!f) { f = document.getElementById('searchbox_demo'); }
  if (f && f.q) {
    var q = f.q; var n = navigator; var l = location;
    if (n.platform == 'Win32') { 
      q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;';
    }
    var b = function() {
      if (q.value == '') {
        q.style.background = '#FFFFFF url(http:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fja\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat';
        q.style.background = 'transparent url(http:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fja\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat'; 
      }
    };
    var f = function() {
      q.style.background = '#ffffff';
      q.style.background = 'none'
    };

    q.onfocus = f; q.onblur = b;
    if (!/[&?]q=[^&]/.test(l.search)) { b(); }
  }
})();

（流用する場合は’searchbox_003122074834180947232:omul0da14we’のところを置き換えてください）

これでcssが適応されデザインされた検索ボックスが表示されるはず。

before
kwLabs Google Custom Search

after
kwLabs Google Custom Search

なんということでしょう。匠の手によって味気なかった検索ボックスが見事にサイトに溶け込みました!!