スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Google AJAX Search APIで検索窓を設置してみる

 Google AJAX Search APIを利用し検索窓を設置してみます。検索結果はサイト内に表示され、Web検索だけでなくブログ、動画、ニュースなども同時に検索できるので利用する側からしても便利かと思います。
Loading
 まずはCSS。全体の大きさはこちらで自由に変更できます。
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
 .gsc-control { width : 500px; }
</style>
 次にJavaScript。APIkeyについてはSign-up for an AJAX Search API Keyで取得してください。サイトのURLを入力するだけでメール等は不要です。
<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&key=取得したAPI key" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[

function OnLoad() {
      var searchControl = new GSearchControl();

      // 表示する検索の種類(ウェブ、ビデオ、ブログ、ニュース、画像、書籍)でいらない検索は削除可能です。
      searchControl.addSearcher(new GwebSearch());
      searchControl.addSearcher(new GvideoSearch());
      searchControl.addSearcher(new GblogSearch());
      searchControl.addSearcher(new GnewsSearch());
      searchControl.addSearcher(new GimageSearch());
      searchControl.addSearcher(new GbookSearch());

      // 表示するdivのidを指定
      searchControl.draw(document.getElementById("searchcontrol"));

      // 最初に表示する検索結果。空白の場合は初期状態で検索結果は表示されません。
      searchControl.execute("");
    }
    GSearch.setOnLoadCallback(OnLoad);

    //]]>
</script>
 最後にbody部分の表示したい場所に下記を挿入すれば完了です。
<div id="searchcontrol">Loading</div>
 これが基本形で今後これを色々変形していきますのでどうぞご期待ください。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。