Google AJAX Search API メモ（JS編）

April 22, 2009

サイトリニューアルにあたって導入したGoogle AJAX Search APIについて、デベロッパー ガイドを読んでも不明なことが多々あったので、ここにメモ。最初に申し上げておくと、私はプログラマではないので、間違っている箇所などあるかもしれません。その際はご指摘いただけると幸いです。

本サイトで設定している検索関連のJS。

<script src="http://www.google.com/uds/api?file=uds.js&v=0.1&
  key=取得したキー" type="text/javascript"></script>

//<![CDATA[

//スタイルシート有効
//（スタイルシートを無効にする場合はここをコメントアウト）
google.load("search", "1");

//スタイルシート無効
//（スタイルシートを有効にする場合はここのコメントアウトを外す）
//google.load("search", "1", {"nocss" : true});

function OnLoad() {

  // Create a search control
  var searchControl = new google.search.SearchControl();

  // Create a site search
  var siteSearch = new GwebSearch();

  //検索結果のタイトル
  siteSearch.setUserDefinedLabel("www.modernica73.com");

  //検索対象となるウェブサイトURL
  siteSearch.setSiteRestriction("http://www.modernica73.com");

  //検索結果に表示されるクラス名
  siteSearch.setUserDefinedClassSuffix("siteSearch");

  searchControl.addSearcher(siteSearch);

  //結果表示
  searchControl.draw(document.getElementById("searchcontrol"));

  //検索結果のリンクを同一ウィンドウで遷移
  //（別ウィンドウ表示の場合はここをコメントアウト）
  searchControl.setLinkTarget(google.LINK_TARGET_SELF);

  //初期文字列
  //（予めフォームに文字を入れておきたい場合はコメントアウトを外す）
  //searchControl.execute("modernica");
}

google.setOnLoadCallback(OnLoad);

//]]>

Google AJAX Search API メモ（CSS編）

April 22, 2009

本サイトで設定している検索関連のCSS。

/* 全体のWidthを設定 ※!important必須 */
.gsc-control {
  width:200px !important;
}


/* 結果画面のタイトル,
　　結果画面のテキスト,
　　結果画面のページ送り,
　　結果画面の“その他の結果”表記 */
.gsc-title,
.gs-result,
.gsc-cursor-page,
a.gsc-trailing-more-results {
  font-size:77%;
  color:#333;
  font-size:77%;
  font-family:Verdana,Helvetica,sans-serif;
  line-height:140%;
}


/* ブランド表記,
　　ブランドロゴ */
td.gsc-branding-text,
td.gsc-branding-img {
  display:none;
}

“結果画面のタイトル”というのはJavascriptで設定している以下の箇所のこと。

siteSearch.setUserDefinedLabel("www.modernica73.com");

ブランド表記とブランドロゴは、サイト内のその他の要素と同じ扱い（CSS）にしたかったので、Googleが提供している表記は非表示とし、新たに要素を追加して表示させています。

Powered by Google