Google AJAX Search API - News Bar をカスタマイズ

　2008-03-23

　かなり前に「Google AJAX Search APIでGoogle Newsを表示」ということで紹介しました。同じようなものでビデオ検索、ブログ検索、ブック検索もありどれも簡単に設置できます。で、今回は一歩進んでニュース検索をカスタマイズしてみます。

　まずは外部ファイルを読み込みます。API keyはいつものようにSign-up for an AJAX Search API Keyで取得してください。

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=取得したAPI key"type="text/javascript"></script>
<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet"type="text/css"/>
<script src="http://www.google.com/uds/solutions/newsbar/gsnewsbar.js"type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/newsbar/gsnewsbar.css"rel="stylesheet" type="text/css"/>

そしてJavaScriptを記述します。

  <script type="text/javascript">
    function LoadNewsBar() {
      var root = document.getElementById("newsBar");

      options = {
          largeResultSet : false,
          resultStyle : GSnewsBar.RESULT_STYLE_EXPANDED,
          title : "ニュース",
          autoExecuteList : {
            executeList : [ "SEO", "Google", "Yahoo" ]
            }
          };

      var newsBar = new GSnewsBar(root, options);
    }
    GSearch.setOnLoadCallback(LoadNewsBar);
  </script>

　で、body内の表示したいところに下記のソースを挿入します。

<div id="newsBar">Loading...</div>

　表示する枠の大きさや文字の色はCSSで調整できます。

<style type="text/css">
    #newsBar {
      margin : 1em;
      width : 400px;
    }
</style>

　カスタマイズのポイントは赤字で表示しているoptionsの中身となります。赤字のところがポイントですのでご自由にカスタマイズしてみてください。

largeResultSet : false　//検索結果を4件表示
largeResultSet : true　//検索結果を8件表示

resultStyle : GSnewsBar.RESULT_STYLE_EXPANDED
　//記事の内容を表示
resultStyle : GSnewsBar.RESULT_STYLE_COMPRESSED
　//タイトルの未表示

title : "ここにタイトルを記述します"

autoExecuteList : {
cycleMode : GSnewsBar.CYCLE_MODE_RANDOM,
　　　　// これを記述すると最初に表示されるニュースがランダムになります
executeList : ["キーワード1", "キーワード2", "キーワード3" ]
　　　　// キーワードを入力します。数は自由に増減できます。
}

　サンプルを実際表示すると次のようになります。