Googleカスタム検索

readme.md

見た目をカスタマイズしやすくするため、HTMLのフォーム形式で利用する方法を採用

• 検索フォームを作成
• 検索結果を表示したいページ（htmlなど）を用意
• 上記ページに、検索結果を表示するjsコードを貼り付ける
• 検索フォームに、googleの透かしマークを入れるスクリプトを書くのを忘れずに

result.html

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

search-form.html

<div class="l-search">
  <form id="cse-search-box" action="/result.html">
    <!-- <input type="hidden" name="cx" value="xxxxxxxx:yyyyyyyy" /> result.htmlを用意するのであれば不要か -->
    <!-- <input type="hidden" name="ie" value="UTF-8" /> 同上-->
    <!-- 逆に、//google.com/cse を指定するならば渡すパラメータは当然必要 -->
    <input type="text" name="q" class="l-search__text" />
    <button class="l-search__btn"><img src="/common/img/ic_zoom.png" alt="検索"></button>
  </form>
</div>
<!-- /.l-search -->

<script type="text/javascript" src="//www.google.com/cse/brand?form=cse-search-box&lang=ja"></script><!-- 透かしマーク -->

iframeを使用してページのカスタム検索エンジンをホストすることはできなくなりました

Google公式helpにはこのようにあるが、未だにiframeで結果表示ができているサイトもある模様。

※正確にはjsでiframeを生成しているので、ここで言われている「iframeを利用して...」とは別のものなのかも知れない。

↓検索結果ページに、以下のようなコードを埋め込む

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 680;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="//www.google.com/afsonline/show_afs_search.js"></script>