google カスタム検索コードを外部ファイルへ移す方法

外部ファイルへ移すためのコードの変更

2011年から変更された google カスタム検索のコードは、まず google から jsapi を読み込み、それを基にリクエストを行って id="cse-search-form" の部分に検索ボックスを表示する形式になっています。

下の例は、2ページ表示でデザインがデフォルトの場合での検索ボックスコードです。

変更前
  • <div id="cse-search-form" style="width: 100%;">Loading</div>
  • <script src="https://www.google.com/jsapi" type="text/javascript"></script>
  • <script type="text/javascript">
    • google.load('search', '1', {language : 'ja'});
    • google.setOnLoadCallback(function() {
      • var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl(
        • 検索エンジンID, customSearchOptions);
      • customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
      • var options = new google.search.DrawOptions();
      • options.enableSearchboxOnly("結果表示URL");
      • customSearchControl.draw('cse-search-form', options);
    • }, true);
  • </script>
  • <link rel="stylesheet" href="https://www.google.com/cse/style/look/default.css" type="text/css" />

で、こういうコードを貼り付けることになるんですが、そのまま貼り付けると link 要素が body 内に置かれることになりますし、コードを変更する際にそれぞれ書き換える手間もあるので、コードの位置を変更して外部ファイルに移してみました。

変更点

head 内へ
  • <script src="https://www.google.com/jsapi" type="text/javascript"></script>
  • <script src="外部ファイル" type="text/javascript></script>"
設置したい位置へ
  • <div id="cse-search-form" style="width: 100%;">Loading</div>
外部のjsファイル内へ
  • google.load('search', '1', {language : 'ja'});
  • google.setOnLoadCallback(function() {
    • var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl(
      • 検索エンジンID, customSearchOptions);
    • customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    • var options = new google.search.DrawOptions();
    • options.enableSearchboxOnly("結果表示URL");
    • customSearchControl.draw('cse-search-form', options);
  • }, true);
  • var ls = document.getElementsByTagName('link')[0],df = document.createElement('link');
  • df.rel = 'stylesheet'; df.href = 'https://www.google.com/cse/style/look/default.css'; df.type = 'text/css';
  • ls.parentNode.insertBefore(df,ls);

上の記述では jsapi をそのまま読み込んでいますが、この読み込みがページの描画をブロックする場合があるようなので、自サーバーから読み込んだ方がいいかもしれません。

コードをうまく動かすためには必ず jsapi が先に読み込まれていることが必要なので、これだけHTML上で読み込み、その後に google.load 以下の記述を外部ファイルから読み込むようにしています。

google.load 以下の記述は、<script></script> を外してコードを外部ファイル内にそのまま移すだけです。

最後に default.css を読み込む link 要素を作成して、最初の link 要素の前に追加するようにしています。(他のデザインを選択している場合は必要ないです。)

default.css を省略すると、デザインをデフォルト以外に設定していない限り検索ボックスの下に google のロゴが追加されます。

これで外部ファイルから読み込むこと自体はできるので、後はCSSでレイアウトを変更したり、検索ボックスの設定を変えたりいろいろやってみて下さい。

同じように Analytics のコードも script タグを外すだけで外部に移動可能です。

スポンサードリンク

inserted by FC2 system