Ogawa::Memoranda

RSS/Atomなどの各種フィードを取得する、Google AJAX Feed APIが公開されていましたね。

Google AJAX Feed API

使い方の説明は上記リンクから辿っていただくとして、GoogleのJavaScript API三兄弟である、Maps・Search・Feedのインタフェースがこっそり統一されつつあることに気がついたので、このエントリーで紹介します。

はじめに、以下のようにGoogleが用意したAPI loaderを読み込みます。

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

3つのAPIのAPI keyは共通なので、上記で指定するのはどのAPIのサインアップページで生成したkeyでも構いません。

Feed APIを利用する場合には、

// API本体を読み込む
google.load('feeds', '1');
// 初期化関数を定義する
function feeds_init() {
  var feed = new google.feeds.Feed('http://b.hatena.ne.jp/hotentry?mode=rss');
  feed.setNumEntries(10);
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById('feed');
      var text = '';
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        text += '<li><a href="' + entry.link + '">' + entry.title + '</a></li>';
      }
      container.innerHTML = '<ul>' + text + '</ul>';
    }
  });
}
// 定義した関数をイベントハンドラとして登録する
google.setOnLoadCallback(feeds_init);

のように書きます。この例ははてなブックマークのhotentryの最初の10件を表示するものです。

…で、ここからが重要。Search APIの場合も同様に、

// API本体を読み込む
google.load('search', '1.0');
// 初期化関数を定義する
function search_init() {
  var searchControl = new GSearchControl();
  searchControl.addSearcher(new GwebSearch());
  searchControl.draw(document.getElementById('searchcontrol'));
}
// 定義した関数をイベントハンドラとして登録する
google.setOnLoadCallback(search_init);

と書けちゃいます。Maps APIの場合もやっぱり、

// API本体を読み込む
google.load('maps', '2');
// 初期化関数を定義する
function maps_init() {
  var map = new GMap2(document.getElementById('map'));
  map.setCenter(new GLatLng(35.658586, 139.745450), 16);
}
// 定義した関数をイベントハンドラとして登録する
google.setOnLoadCallback(maps_init);

と書けちゃいます。

つまりは、script要素で各APIのJavaScriptコードをいちいち読み込む必要はなく(共通のAPI loader部分を読み込むだけで済み)、3つのAPIとも共通の手続きでブートストラップできます。別の言い方をすると、google.load()を含むコード部分をあらかじめモジュールとして分離しておけば、各HTML文書では、API loaderを読み込み、モジュールを必要に応じて追加するという比較的クリーンなマナーを採れる、ということです。

ちなみに、Search APIとMaps APIを上記の手続きで読み込む方法は、まだドキュメント化されていないので、今だけ限定でもれなく知らない人に自慢できます(笑)

以下は使用例。3つのAPIを順次呼び出してレンダリングしています。

Google AJAX API family (Feeds, Search, Maps)

API間で連携する例を作りたかったのですが、時間がないので省略します。

GSearch.setOnLoadCallback()というメソッドも存在していた(いる)ところを見ると、将来的には3つのAPIの共通かつ有用な部分をgoogleクラスが提供するようになるのかもしれません。