Google AJAX Feed API公開、サンプル「AJAX Tune Bar」の作り方

Googleは、Google AJAX Feed APIを公開した。乱立するフィード形式をGoogle側で吸収し、JavaScriptで扱うことができる。

　Googleは、Google AJAX Feed APIを公開した。乱立するフィード形式をGoogle側で吸収し、JavaScriptで扱うことができる。

　Google AJAX Feed APIはGoogleサーバがさまざまなソースからフィードを取得。ユーザーはGoogleサーバを介して外部フィードを取得するため、セキュリティ制約を気にすることなく利用できる。フィードフォーマットもAtom、RSSの各バージョンに対応しており、これらの違いはGoogle側で吸収するため、意識する必要がない。データはXMLまたはJSON形式で取得可能。そのため、他のJavaScript APIとのマッシュアップも行うことができる。

　GoogleではサンプルとしてITunesのRSS情報を取得し、ジャケットを表示させる「AJAX Tune Bar」を公開している。以下、簡単な作り方を見てみよう。

Loading...

ステップ1：Keyの取得

　Sign up for the Google AJAX Feed APIにアクセスし、設置するサイトのURLを登録する。次画面で表示されるKeyを確認しよう。

ステップ2：実装

　Keyを取得したら実装に入る。取得したKeyを元に以下の記述を行う。

<script type="text/javascript" 
 src="http://www.google.com/jsapi?key=取得したKey"></script>

　続けて以下を記述する。

<script src="http://www.google.com/uds/solutions/tunebar/gftunebar.js" 
      type="text/javascript"></script>
<style type="text/css">
  @import url("http://www.google.com/uds/solutions/tunebar/gftunebar.css");
</style>
<div id="tuneBar">Loading...</div>
<script type="text/javascript">
  function LoadTuneBar() {
    var options = {
      numResults : 6,
      horizontal : true,
      autoExecuteList : {
        executeList : [
          GFtuneBar.FEED_NEW_RELEASES,
          GFtuneBar.FEED_TOP_SONGS,
          GFtuneBar.FEED_TOP_ALBUMS
          ]
      }
    }
    var tb = new GFtuneBar(document.getElementById("tuneBar"), options);
  }
  /**
   * Use google.load() to load the AJAX Feeds API
   * Use google.setOnLoadCallback() to call LoadTuneBar once the page loads
   */
  google.load("feeds", "1");
  google.setOnLoadCallback(LoadTuneBar);
</script>

　Googleの示したサンプルコードとほぼ同じだが、Googleのリファレンスでは<div id="tuneBar">Loading...</div>のセミコロンが抜けているので補っておく。また、水平表示をさせるため、horizontal : true,を追記した。

　このように簡単な実装でフィードを利用したコンテンツを作成できる。他のフィードやGoogle Map APIなどと組み合わせることで、マッシュアップサイトを容易に作ることが可能だ。

Google AJAX Search API Blog: Announcing the Google AJAX Feed API