Googleからの新たな贈り物、「Google AJAX Feed API」を試そう

Google AJAX Feed APIとは?

Googleは16日、「Google AJAX Feed API」を公開した。Google AJAX Feed APIは、RSS/Atomなどの各種フィードを取得するためのJavaScript APIだ。

これまで、JavaScriptでフィードを取得し、取り扱うには以下のような問題があった。

JavaScriptはセキュリティ制限上、生成元のホストにしかXMLHttpRequestなどを使用したネットワークアクセスを行うことができない(これを同一生成元ポリシーと呼ぶ)。そのため、単純に他のホストからフィードを取得するようなコードを書くことができず、自ホストのサーバにプロキシを置いておき、そのプロキシ経由でフィードを取得するなどの対処が必要であった
フィードの形式が乱立している。これで困るのはJavaScriptに限った話ではないが、ことサイトの更新情報という観点から見れば、どのフィード形式も中身の情報はほとんど変わらないので、それらを統一的に取り扱えると望ましい

Google AJAX Feed APIはこれらの問題を解決し、非常に簡単にフィードを取得し、取り扱うことができるAPIだ。では実際に使用してみよう。

APIキーの取得

Googleアカウントを取得し、ログイン済みの状態でサインアップ用のサイトにアクセスする。

画面1: サインアップページ

このサイトで、APIの使用制限についての認否を意味する画面下部のチェックボックスにチェックを入れた後、ウェブサイトのURLを入力する。ここで入力するサイトは現実に存在していなくてもよい。適当なURLを入力した後、「Generate API Key」をクリックすれば、入力したURLに応じたAPIキーが生成される。

画面2: APIキーの発行結果画面(個人情報に該当する部分をぼかしてある)

この画面に表示されるHTML+JavaScriptのコードは、そのままファイルに貼り付けて実行することが可能だ。ぜひ試してみてほしい。

以下は、自分で試す時間がない方のために、Feed APIを使用した場合にコードがどのようになるかを示しておこう。

APIの使用法

では、生成されたHTML+JavaScriptのコードを基に解説を行う(コードをわかりやすくするため、一部手を入れている)。

サンプルは、単純に特定のURLからフィードを読み込み、その情報を本文中に表示するという単純なものだ。

JavaScriptの読み込み

生成されたコードではまず、HTML内で<script>タグを用い、外部JavaScriptを読み込んでいる。コードは、以下のような形式になる。

<script type="text/javascript"
   src="http://www.google.com/jsapi?key=APIキー"></script>

こうして読み込んだJavaScriptファイルの生成元は、URLが「http://www.google.com/」で始まっていることからGoogleだということがわかる。

Feed APIの読み込み

次に、以下のようなコードにより、Feed APIを読み込んでいる。

<script type="text/javascript">
   google.load("feeds", "1");    ← Feed APIの読み込み
</script>

これによりFeed APIが読み込まれ、「google.feeds」名前空間にあるコードが利用できるようになる。load関数の第2引数はバージョン番号だ。このような引数があるということは、将来的なバージョンアップの可能性を示唆していると言える。

Feed APIの使用

フィードAPIを利用したコードは以下のようになる。

// google.feeds.Feedオブジェクトの生成
var feed = new google.feeds.Feed("http://journal.mycom.co.jp/haishin/rss/index.rdf");

// フィード読み込み。引数には読み込み完了時のコールバック関数を指定する。
feed.load(function(result) {

  // 読み込み成功時
  if (!result.error) {
    var container = document.getElementById("feed");
    for (var i = 0; i < result.feed.entries.length; i++) {

    // フィードのエントリを取得
      var entry = result.feed.entries[i];
      var div = document.createElement("div");

      // フィードエントリの属性を参照
      div.appendChild(
        document.createTextNode(
          "タイトル:[" + entry.title + "] リンク:[" +  entry.link + "]");
      container.appendChild(div);
    }
  }
})

これで大体おわかりだろう。google.feeds.FeedクラスのコンストラクタにフィードのURLを指定し、load関数を呼び出すだけでフィードの読み込みを行える。

読み込みが成功した場合は、結果オブジェクト(ここではresult)のfeed属性によりフィードの情報を取得でき、フィード内の個々のエントリはさらにフィードのentries属性で配列を取得し、アクセスできる。このコードではエントリのタイトルとリンクを参照している。

load関数は、自身の生成元(Googleのサイト)にアクセスしてフィードを取得するので、同一生成元ポリシーに抵触する恐れがない。また、AtomやRSS、その各バージョン間の違いはすべて内部で吸収される。

Google AJAX Feed APIを使用すると簡単にJavaScriptからフィードを取得することができる。他サイトのフィードを利用したWebアプリケーションを作成する場合には一考に値する技術であろう。