btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

(X)HTML

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

投稿日:

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







-(X)HTML
-,

執筆者:


  1. むぎちゃ より:

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

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

  2. むぎちゃ より:

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

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

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

      ↓

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

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

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

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

HTML で同一階層のパスを指定する方法。

えぇっと、色んなサイトを見ていて「あれ? 意外とみんな知らない?」と思ったことがあるので、サラッと書いておきます。 「んなことくらい知っとるわ!」という方は優しくスルーしてください。 一つ前の階層とル …

no image

今日は裸の日 – CSS Naked Day。

4 月 9 日は「CSS Naked Day」ということなので、便乗してみます。 »CSS Naked Day…公式(?)サイト »そういえば裸の日でした|CSS HappyL …

no image

リスト形式でマークアップした画像の下にできるすき間とその解決法。

よくぶつかる問題の割に忘れがちなので、メモ的エントリー。 画像を ul やら ol やらリスト形式でマークアップする機会って、結構多いんじゃないかと思います。 グローバルナビとか、写真のサムネイルとか …

no image

HTML 文字参照を探すのに Wikipedia はやっぱり便利だった。

Wikipedia には度々お世話になってます。 信頼性とかが問題になることもありますが、大体は大丈夫ですし、やはりあの圧倒的な情報量は魅力ですね。 で、(やっぱり)こんなものまであったのか! という …

no image

yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。

yuga.js という非常に便利な JavaScript があります。 多くの機能が一つにまとまっていて、使い方も簡単で重宝させていただいているのですが、今回はその多機能が故にハマってしまったという例 …