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

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

[読了時間の目安:約 14 分]

最近、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)

え……。何これ……。
と思わず言いたくなる変わりっぷりですね。

こうなると、直接 HTML を編集することができないので、「検索」ボタンを自作の画像に差し替えたり、細々とデザインを調整したりすることが非常に難しくなってしまいました。

ただ、コードが新しくなったのは後から追加した検索エンジンだけですから、以前に設定した検索エンジンは、もちろん以前のコードのままでちゃんと動作してるんですよね。
という訳で、新しく追加した検索エンジンについても、実は以前のコードをベースにすれば、新しいコードは使わなくても検索エンジンは動作してくれます

具体的な方法としては、コードの中にある「検索エンジン ID」を変更するだけ
上記コードの「value=”XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY”」の値を、設定したい検索エンジンの ID にすれば、それだけで問題なく動作します
(恐らく「name=”cx”」が検索エンジンを特定するためのデータなんでしょうね)

あとは、input タグの name 属性と value 属性にだけ気を付ければ、自由に HTML を編集できます。
(もちろん form タグの値も変えないように)

ちなみに、検索エンジン ID は「マイ検索エンジン」から、設定したい検索エンジンの「コントロールパネル」にアクセスすれば確認できます(「基本」タブ内)。

但し、あくまで「以前の」コードであることは認識しておいた方がいいと思います。
いつ使えなくなるか分かりませんからね。
まぁいきなり「ハイ終わり!」ってことはないと思いますが、「新しく追加した検索エンジンは、新しいコードじゃないと使えないよ!」なんて言われたら終わりですし。

新しいコードを使う場合の対応も、考えておきましょう。
考えます。考えますとも。

新しい方のコードについてもちょっとだけ試してみた

という訳で、新しいコードについても少し触ってみました。
が、結論から言うと、良さげな方法は見付けられていません。

呼び出された HTML を Firebug でコピペしてきて編集……ということも試してみたんですが、どうやらそれも無視されて、後から JavaScript で呼び出された HTML で上書きされてしまうっぽい感じ。
「<div id=”cse-search-form”>」がキー(トリガー?)になっていて、その中身が強制的に書き替えられてしまうんですね。
しかもこの id は検索のキーにもなっているため、削除することもできません(削除すると検索できない)。
うわぁ、八方ふさがり。

そんな訳なので、もし HTML をいじりたければ、生成されたソースを更に JavaScript で書き替えたりする必要がありそうです。
まだそこまでは試してないので、本当にできるかどうか分かりませんが。

また、CSS でもいろいろとスタイルが設定されているようなので、ボックスのサイズやらボタンの色やらを設定・変更するだけでも一苦労しそうな予感。
「!important」の山にならなければ良いなぁ……。

いずれにしても、かなりややこしいというかメンドくさいことになりそうです。

(っていうか、どちらのコードを使うか選べるようにしてくれたら良いのに!)

念のため、Firebug で拾ってきた HTML も残しておきます。長いですけど。
あまりにもわかりづらかったので、適当に改行を追加してます。
class 名などのご参考にどうぞ。

<div style="width: 100%;" id="cse-search-form">
<div class="gsc-control-searchbox-only gsc-control-searchbox-only-ja" dir="ltr">
<form class="gsc-search-box" accept-charset="utf-8">
<table cellspacing="0" cellpadding="0" class="gsc-search-box">
<tbody>
<tr>
<td class="gsc-input">
<input type="text" autocomplete="off" size="10" class=" gsc-input" name="search" title="検索" style="background: url("http://www.google.com/cse/intl/ja/images/google_custom_search_watermark.gif") no-repeat scroll left center rgb(255, 255, 255);">
</td>
<td class="gsc-search-button">
<input type="submit" value="検索" class="gsc-search-button" title="検索">
</td>
<td class="gsc-clear-button">
<div class="gsc-clear-button" title="結果をクリア"> </div>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" class="gsc-branding">
<tbody>
<tr>
<td class="gsc-branding-user-defined">
</td>
<td class="gsc-branding-text">
<div class="gsc-branding-text">powered by</div>
</td>
<td class="gsc-branding-img">
<img src="http://www.google.com/uds/css/small-logo.png" class="gsc-branding-img">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<script type="text/javascript" src="http://www.google.com/jsapi">
</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>
<script type="text/javascript" src="http://www.google.com/uds/?file=search&v=1&hl=ja">
</script>
<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/api/search/1.0/2371ff5421fb183209ed1396775bee26/default+ja.css">
<script type="text/javascript" src="http://www.google.com/uds/api/search/1.0/2371ff5421fb183209ed1396775bee26/default+ja.I.js">
</script>
<link type="text/css" href="http://www.google.com/cse/style/look/default.css" rel="stylesheet">

Comments:2

むぎちゃ 11-08-17 (水) 15:03

コードが変更される以前のサイトでは
IEでGoogleカスタム検索をするとランタイムエラーが出ました。
(iframeによって独自のページに検索結果を表示させる場合です。)
そこで、この記事を拝見して とても参考になりました。

取り急ぎ、以前のコードの検索フォームと
新しいコードの検索結果の組み合わせであれば
IEでエラーは出なくなるようでした。
いつまでこの対応で可能なのか、
今までのサイトについてすべてコードを入れ換えなければ
ならない日が来るかもしれませんね。

むぎちゃ 11-08-17 (水) 15:08

すみません。文章を修正させてください。

————————————————————————————-

コードが変更される以前のサイトでは
IEでGoogleカスタム検索をするとランタイムエラーが出ました。

  ↓

今回Googleがコードを変更したことによって、
コードが変更される以前に実装していたサイトでは
IEでGoogleカスタム検索をすると
ランタイムエラーが出るようになってしまいました。

Comment Form
Remember personal info

Trackbacks:2

Trackback URL for this entry
http://blog.btmup.com/xhtml/google-custom-search-engine-html-customize.html/trackback
Listed below are links to weblogs that reference
新しく追加した Google カスタム検索エンジンの HTML をカスタマイズする方法。 from btmup Blog
pingback from Google カスタム検索の埋め込みコードの変更 | ヒソカメモ 11-08-22 (月) 4:00

[...] 新しく追加した Google カスタム検索エンジンの HTML をカスタマイズする方法。 ? btmup Blog [ボトムアップ ブログ] カテゴリー: 未分類   作成者: KH パーマリンク [...]

pingback from Google検索窓導入時に窓枠の下部が消えた場合はCSSで対処|ウェブシュフ 12-11-21 (水) 15:27

[...] 今回を参考にしましたのは…。 新しく追加した Google カスタム検索エンジンの HTML をカスタマイズする方法。 | btmup Blog 最後に載せてくれてあるコードがとても役に立ちました。 [...]

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

リンク
フィード
メタ情報

このページのトップへ