knowledge::short

制作を7年ほどやっているはずが、なぜか今まで触れる機会が無く、最近「検索結果ページにガワ部分のデザイン当てて。Googleのカスタム検索みたいにiframeで出来るから」と依頼されて「レスポンシブどうすんの」と思ったので、調べてみた件のメモ。

ざっくり使い方

まずGoogleのカスタム検索のサービスの管理画面？から、JSのコードスニペットを取得。
それをサイト内ページのHTMLソースに追加すると、JSで動的に検索に係るHTMLソースが生成される、という感じのようだ。

スニペットコードの例:

<script>
  (function() {
    var cx = xxxxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

iframe使えない？

公式では次の様に述べられてる。2015年頃からそうなったらしい。

iframe - カスタム検索 ヘルプ（公式）
https://support.google.com/customsearch/answer/70345?hl=ja

他は次を参考とした（__）。

Googleカスタム検索のカスタマイズ方法メモ - Qiita
https://qiita.com/nekoneko-wanwan/items/07550fe8d86e8c563bab

関連するタグ

関連するタグは現在ありません。