ブログ

リステップからのお知らせや、ホームページを活用するためのお役立ち情報などをご案内。

Googleカスタム検索V2で検索結果を別ウィンドウで開く方法（方法のみ知りたい方は一番下までスクロールしてね）

Googleカスタム検索,Web | 2012年9月11日

Googleのカスタム検索を導入し、検索結果を別ウィンドウで開こうと思ったら、いつの間にかコードのバージョンがV2になっていたため色々と手こずってしまいました。

そんなによく使うTIPSではないためすぐ忘れてしまいそうなので、ここにメモしておきます。

 

Googleカスタム検索用コードの取得

まず、カスタム検索の設定画面から「デザイン」を選択し、レイアウトの選択で「Googleがホスト」を選びます。

 

そして同じページ内の「保存してコードを取得」ボタンを押すと、以下のようなコードが表示されます。

<!-- Put the following javascript before the closing </head> tag. -->
<script>
  (function() {
    var cx = '*********************************';
    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>

<!-- Place this tag where you want the search box to render -->
<gcse:searchbox-only></gcse:searchbox-only>

 

上記コードのうち

<script>
  ～
</script>

をHTMLの<head></head>内に挿入し、

<gcse:searchbox-only></gcse:searchbox-only>

は検索ボックスを表示したい箇所に挿入するのですが、このままだと同じウィンドウ内に検索結果が表示されてしまいます。

 

検索結果を別ウィンドウで表示させる方法

どうやらGoogleカスタム検索V2の解説ページはまだ日本語化されていないようで、このページから該当するTIPSを探さなければなりません。（だから私は苦労しました・・・）

で、検索結果を別ウィンドウで開くには、検索ボックス表示位置に挿入するタグを

<gcse:searchbox-only newWindow="true"></gcse:searchbox-only>

とすれば良いみたいです。

 

早速当ブログにも実装してみましたのでお試しください。

 

 

 

・・・と、ここまで書いてて挿入用の画像を準備してたら、

 

 

「…コードいじんなくても出来るじゃんっ!」

 

どうやらレイアウトで「Googleがホスト」を選ぶと上の画像のように対象ウィンドウを選ぶオプションが表示されるようです・・・。

悔しいからこのまま記事を公開しちゃうけどね。