ホーム > タグ > カスタム検索

カスタム検索

新しく追加した Google カスタム検索エンジンの HTML をカスタマイズする方法。

最近、Google カスタム検索エンジンのコードが変更されたみたいです。それも大幅に。
以前までは HTML ソースを直接貼り付ける方法だったんですが、新しいコードは JavaScript を使って HTML を呼び出しています。

前まではこんな感じ↓だったんですが、

<form action="http://www.google.com/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="検索" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>

新しいコードはこんな感じ↓。

<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'ja'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.enableSearchboxOnly("http://google.com/cse?cx=XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY");    
    customSearchControl.draw('cse-search-form', options);
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

(※「XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY」は検索エンジン ID)

え……。何これ……。
と思わず言いたくなる変わりっぷりですね。
この記事の続きを読む

1 / 11

Home > Tags > カスタム検索

リンク
フィード
メタ情報

このページのトップへ