Googleカスタム検索のアップデート

前回 Googleカスタム検索を色々いじってみましたが、結果ページの方の表示が微妙だったので、アドセンスの方から取れるコードから Googleのカスタム検索の方から取れるコードに変更しました。

検索結果ページ
カスタム検索
Octopressにカスタム検索を導入する
まとめ

検索結果ページ

アドセンスのカスタム検索エンジンを使おうとすると、設定項目に検索結果の項目があって、ここでどの様に結果を表示するかを選べます。

adsensesearchresult

ここで

同じウィンドウの Google ページに表示
新しいウィンドウの Google ページに表示

だと、googleのページにそのまま飛ばされますが、検索ボックスの上か横に自分のロゴを入れる事ができたりします。

一方で、最後の

iframe を使用して自分のウェブサイトに表示

を選ぶと、コードの所に、検索結果のコードという新たなコードが加えられ、これを含んだ適当なページを作って指定することでそのページ内に結果を出すことが出来ます。

こんな感じでsource直下にsearch.htmlと言うファイルを作って使ってみました。

source/search.html

---
layout: default
footer: false

---

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

ここにある800という幅なんですが、最低でも795にしないと許してくれません。

なので、最初サイドバーも付けて他のページと一緒な感じに、と思ったんですが、そうするとちょっと狭くするとサイドバーが被るような形になってしまうので、調整するよりは外してしまえと思って外しました。

search_result_old

それから、色々CSSで弄ぼうと思ったら、この結果の部分は iframeで組み込まれるような形になってその中でcssのファイルなどを呼んでるため？外から変更しようにも上手く行きませんでした。なので背景は白いまま。アドセンスのサイトから変更できる広告の欄についても、文字色とかは反映されてる様ですが、背景部分はなぜか違う色が。。。

と、色々微妙なので何とかしたいと思っていたら、カスタム検索の方から直接コードを取ってくるとまた違った形になるみたいだったのでそっちを試してみました。

カスタム検索

Googleのカスタム検索のページからもGoogleの検索ボックスを作ることが出来ます。

この際、アドセンス側で検索を作っていると、それらが反映されて検索エンジン一覧に表示されてると思うので、上で使った物をそのまま使いまわせます。

レイアウト

layout

使いたい検索エンジンを選んで(初めてなら新しく作って) 設定項目などを適当に変更した後、デザインから基本となるデザインを選んでコードを取ってきます。

まずはレイアウト。検索結果の表示方法です。

ページに埋め込んだり結果だけのページにしたり色々出来ますが、今回はオーバーレイを選びました。

検索結果が現在のページの上にオーバーレイされます。

テーマ

theme

テーマは検索ボックスの見た目と、検索結果の方の色なんかにも影響します。

検索ボックスの見た目の主なものはこんな感じ。

デフォルト
シンプル
シャイニー
クラッシック

デフォルトだとボタンの所の要素がtype="image"となっていて画像が使われています。それからなぜかクラッシックを選ぶと下みたいにpowered by Googleが余計に現れます。 (検索ボックス内にGoogleカスタム検索のロゴがあるのでこれは余計。)

google_custom_search_orig

取り敢えず検索の文字を変更したりもしたいので、シンプルのテーマを基本にしました。

カスタマイズ

customize

カスタマイズの項目で、検索結果のページに表示する文字色や背景等を変更できます。

後からCSSで直接変更するんですが、ここで変更しておくと取得するコードにそのCSSが追加されるので、後で自分で調べて変更するにしてもここである程度変更しておくと後々分かりやすいです。

コードの取得

適当に変更が終わったらコードを取ります。上のデザインの項目を表示していると下に表示される 保存してコードを取得を押してコードのページに移動します。

code

最初に出てくるページにあるコードより、さらに色々変更できる V1コードと言う物が用意されてるので、下にあるリンクからそちらに移動。

v1code

ここで、表示されてるのは

<style type='text/css'>

までですが、実際にこれをコピーしてファイルに貼り付けてみると、下にCSSのコードが追加されてると思います。

先ほどカスタマイズの所で変更したものです。

これらのコードを適当な所に貼り付ければOK。

Octopressにカスタム検索を導入する

スクリプトの設置

source/_includes/custom/google_searchというフォルダを作って、その中に overlay_simple.htmlと言うファイルを作って、で取ったコードのstyleより上の部分を書き込みました。

このフォルダに、overlay_default.htmlや result_only_simple.htmlの様に、レイアウトとテーマの違うものをいくつか入れておいて後で簡単に変更できる様にしました。 (実際にはcssでの変更が特定の物様なので特にテーマが違うものは注意が必要ですが。)

source/_includes/navigation.htmlへ

source/_includes/navigation.html

  {% if site.google_custom_search == 'overlay_simple' %}
  {% include custom/google_search/overlay_simple.html %}
  {% elsif site.google_custom_search == 'overlay_default' %}
  {% include custom/google_search/overlay_default.html %}
  {% elsif site.google_custom_search == 'result_only_simple' %}
  {% include custom/google_search/result_only_simple.html %}
  {% endif %}

と言った感じのコードを入れて、_config.ymlで

google_custom_search: overlay_simple

と指定しておきます。

スクリプトの設置: 検索ボタンの表示を変更

overlay_simple.htmlの内容はこんな感じ

overlay_simple.html

<div id='cse' style='width: 100%;'>Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'ja', style: google.loader.themes.MINIMALIST});
google.setOnLoadCallback(function() {
  var customSearchOptions = {};
  customSearchOptions['overlayResults'] = true;
  var customSearchControl =   new google.search.CustomSearchControl('partner-pub-XXXXXXXXXXXXXXXX:XXXXXXXXXX', customSearchOptions);
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  var options = new google.search.DrawOptions();
  customSearchControl.draw('cse', options);
  $(".gsc-search-button .gsc-search-button").val(eval("'\\uf00e'"));
}, true);
</script>

テーマを変えるとMINIMALISTの部分がV2_DEFAULTになったりします ¹。

レイアウトの方を変えると

customSearchOptions['overlayResults'] = true;

の周りが変更されたり。

最後に、

$(".gsc-search-button .gsc-search-button").val(eval("'\\uf00e'"));

と言う行がありますが、これは付け足した部分です。

カスタム検索の方からこの様にコードを取ってくると、検索ボックスはテーブル組になっていて、シンプルのテーマの場合だとしたみたいなテーブルになっています。

<table class="gsc-search-box" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="gsc-input">
        <input id="gsc-i-id1" class=" gsc-input " type="text" autocomplete="off" size="10" name="search" title="検索" dir="ltr" spellcheck="false" style="outline: medium none; background: url("http://www.google.com…rmark.gif") no-repeat scroll left center rgb(255, 255, 255);"></input>
      </td>
      <td class="gsc-search-button">
        <input class="gsc-search-button" type="button" value="検索" title="検索"></input>
      </td>
      <td class="gsc-clear-button">
        <div class="gsc-clear-button" title="結果をクリア"></div>
      </td>
    </tr>
  </tbody>
</table>

ここでgsc-search-buttonのところにあるvalueの値:検索を変更して、前回みたくFont Awesomeの虫眼鏡にしたいわけですが、上のhtmlはスクリプトで取ってこられるので直接変更は出来ません。

最初、JavaScriptで後から無理やり上書きしようかと思ったんですが何とか出来るはずだと思って色々試してたらこんなページを見つけて、真似していじってみたら上のコードで上手く行きました。

$(...).val()で、対応する要素のvalueの値を設定出来るわけですが、 Unicodeを渡したいので、evalを使って渡しています。

普通に文字をけんさくとかにしたい場合はval("けんさく")でOK。

後は、CSSで前回変更したものを参考にしながら、 ID/クラス名を調整してあげます。

スクリプトの設置: CSSの調整

下にあるのはsass/particals/_navigation.scssに入れた SCSSのコードですが、大体前回と同じです。

/*search box*/
form.gsc-search-box {
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
  height: 28px !important;
  width: 220px !important;
  border-radius: 10px !important;
  border: solid 2px darken($nav-bg, 15) !important;
  background-color: #ffffff !important;
}

.cse table.gsc-search-box td.gsc-input, table.gsc-search-box td.gsc-input {
  padding-right: 0px !important;
}
.cse input.gsc-input, input.gsc-input {
  border: none !important;
  font-size: 14px !important;
  width: 190px !important;
  height: 20px !important;
  padding: 0 !important;
  margin: 3px 0 0 5px !important;
  &:focus {
    outline: 0 !important;
  }
}
.cse input.gsc-search-button, input.gsc-search-button {
  /*display: none !important;*/
  font-family: FontAwesome !important;
  font-size: 14px !important;
  font-weight: normal !important;
  color: darken($nav-bg, 20) !important;
  border: none !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  /*text-indent: -9999px !important;*/
  width: 20px !important;
  min-width: 0px !important;
  position: relative !important;
  background-color: #ffffff !important;
  &:hover {
    cursor: pointer !important;
  }
}
div.gsc-clear-button {
  display: none !important;
}

/*search results*/
.gsc-results-wrapper-overlay {
  background: $nav-bg !important;
}
.gsc-table-result {
  tr, th, td {
    background-color: $nav-bg;
  }
  tr {
    border: darken($nav-bg, 20);
  }
  th, td {
    border-color: none;
  }
}

今回はformの中に直接テーブルがあってdiv要素が挟まれないので、 formを直接全体の形にしてしまいました。

後は#cse-search-boxだったのが.gsc-search-boxになってたり名前の変更など。また、.gsc-search-buttonとこなどで、デフォルトでpadding指定などがあったりしたので、追加で0にしたり調整してあります。

div.gsc-clear-buttonは入力をクリアするバツ印ボタンですが今回はいらないので見えないようにしてあります。検索ボタン(虫眼鏡)の方を消してこちらを表示したい場合は display: noneのコメントを交換すればOK。

その下にあるのは検索結果の表示についてで、 .gsc-results-wrapper-overlay は全体の背景色について。

下のテーブルの部分は、この結果もテーブルとして載るので、背景色を指定しないとこのサイトでのテーブルの色指定になってしまって背景色と違う色になるので調整してあるだけです。

全て載せるとダダ長くなってしまうので載せてませんが、これに加えて、上で取得した文字色等についてのコードも同じ所に追加して適当に微調整しました。

まとめ

そんな感じで上に見れる検索ボックス(前回とほぼ変わってない)と、検索結果ページがオーバーレイされる形になりました。

適当に検索してもらうと分かりますが、こんな感じで今のページの上に出てきます。

search_result

あと、直接関係ないんですが、色々要素とかを調べるのに、未だにFireBugで、とか思ってたんですが、 Firefoxに標準でついてる(11くらいから？)要素を調査機能に今更ながら気付いて使ってみたらそれで十分でした。むしろ使いやすいかも。

どちらにも出来なかったり出来たりするようなことが合ったりするんでしょうが、取り敢えず簡単な要素調べだけならFirefoxの機能だけで十分な感じです。

investigate

追記: 2015/01/25

Google Analyticsで検索をトラックしようとした所、オーバーレイのものだと新たなページを作ったりしないのでトラック出来ない事に気づきました。

検索を調査するには、2ページもしくは結果のみ、を使って別ページに移動して検索結果を表示するようなものにしないとダメみたいです。

これらのデザインでは検索結果の詳細の言うボタンが上のコードを取得 の場面でHTMLの例を表示の左側に出てきます。

その中で、検索結果のページを表示するページを Adsenseバージョンの様に指定したり、 URL に埋めこまれているクエリパラメータ名を指定してください: という欄でクエリパラメータを指定できます。(デフォルトはq)

このパラメーターは検索結果ページにおいて

http://rcmdnk.github.io/search.html?q=searchword

の様に検索文字列を指定するのに使われるパラメータで、 Analyticsで検索結果をトラックするときに指定すると時にも使います。

デフォルトはqなんですが、qはキャッシュページにも使う事があるので、別の文字列に指定しなおした方が良いかもしれません。 (V1コードを取ってくると2ページ等ではコード内でこのパラメータを変更することも可能です。)

追記ここまで