ZAPAnet総合情報局 > ZAPAブログ2.0 > 早速Google AJAX Feed APIを導入してみました

早速Google AJAX Feed APIを導入してみました

2007年04月20日 プログラミングTIPS
Googleから「Google AJAX Feed API」が公開されました。
このAPIは、他ドメインのRSSやAtomの一般的なフィードを簡単に取得するためのAPIです。

公開APIを利用したサンプルサイトを作っていくよ管理人として、早速「Google AJAX Feed API」のテストを兼ねて、[Z]ZAPAブロ~グ2.0に導入してみました。
各記事の下部に、「この記事に言及していそうなブログを検索する」というリンクを追加してあります。
このリンクをクリックすると、画面遷移することなくAjaxで、リンク元のブログが表示されます。
Googleにキャッシュが生成されるため、クロスドメイン制約を気にすることなく、他のドメインのフィードを表示できます。

[Z]ZAPAブロ~グ2.0:人気記事
はじめてのApolloプログラミング
ニコニコ動画みたいなものを作ってみるテストと問題点
などの記事下部から動作確認してみてください。

以下、「Google AJAX Feed API」導入に関するメモや参考リンクを載せておきます。

Google AJAX Feed APIを利用する手順

まずは、GoogleアカウントでGoogleにログインしておいてください。(アカウントを持っていない場合は、Googleアカウントを作成してください)
次に、Google AJAX Feed APISign Upページで、自サイトのURLを入力し、規約に同意してAPI Keyを発行します。
「Generate API Key」を押すと、以下の情報が表示されます。


Your key is:
API Key
This key is good for all URLs in this directory:
URL
Here is an example web page to get you started:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Feed API - Simple Example</title>
    <script type="text/javascript" src="https://www.google.com/jsapi?key=API Key"></script>
    <script type="text/javascript">
 
    google.load("feeds", "1");
 
    function initialize() {
      var feed = new google.feeds.Feed("https://www.digg.com/rss/index.xml");
      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));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
 
    </script>
  </head>
  <body>
    <div id="feed"></div>
  </body>
</html>


試しに、このexampleをHTMLファイルに記述してからアップロードし、正常に動作するか確かめてみます。
var feed = new google.feeds.Feed("https://www.digg.com/rss/index.xml");
の部分のFeedを自分のブログRSSのURLなどに置き換えると、どのように動作しているかがわかりやすいと思います。

class google.feeds.Feedの初期Feed数は、デフォルトで4になっているので、
setNumEntriesメソッドを使って、
feed.setNumEntries(10);
などとして、読み込む件数を指定しておくと好きな件数だけ表示できます。

読み込んだデータは、
entry.title
entry.link
entry.content
などで表示させることができます。
RSSやAtomのフォーマットに縛られることなく、簡単にデータ処理できるようになっています。

Result Formatは、
JSON Result Format
XML Result Format
Mixed Result Format
を選ぶことができるので、使いたいフォーマットを指定します。

また、The Google AJAX Feed APIがサポートしているフィードフォーマットは、現在
Atom 1.0
Atom 0.3
RSS 2.0
RSS 1.0
RSS 0.94
RSS 0.93
RSS 0.92
RSS 0.91
RSS 0.9
になっているようです。

その他のオプションや使い方などは、Google AJAX Feed API - Developer Guideを読むことで確認できます。

あとは、javascriptコードを自分の好きなように編集することで、自由に他ドメインのフィードが扱えるようになります。

参考リンク

以下のサイトが、このAPIを利用する上で参考になります。
Google AJAX Feed API
基本的な使い方や登録はこちらから。
Google AJAX Feed API - Developer Guide
APIの説明やサンプルコードなどがのっています。
Google AJAX Feed API - Class Reference
クラスの詳細が載っています。
Google AJAX Search API Blog
Google AJAX Feed API - AJAX Tune Barなどもあります。
【ハウツー】Googleからの新たな贈り物、「Google AJAX Feed API」を試そう
補足は、→T-Walker on hatena - Google AJAX Feed API
Google AJAX Feed API でブログの人気エントリーを表示するサンプル
ブログの人気エントリーを表示するサンプルが載っています。
Web2.0の星: Google AJAX Feed APIの使い方
使い方が詳しく載っています。
考えすぎると頭がかゆくなる Google AJAX Feed API テスト
はてなブックマークのhotentryを表示するサンプルが載っています。

最後に

今までは、サーバー側で他ドメインのフィードをキャッシュするか、直接JSON形式でフィードを配信してもらうなどしないと、なかなか他ドメインのフィードが利用できませんでした。
Google AJAX Feed APIを利用することによって、クロスドメイン制約を気にすることなく他ドメインのフィードを利用できます。
また、バージョンによって違いのあるRSSフィードを、Google側で加工してJSONやXMLに変換してくれるという点も見逃せない部分です。

実際に導入してみて、
<script type="text/javascript" src="https://www.google.com/jsapi?key=API Key"></script>
の部分を読み込みに行くときに少しレスポンスが遅くなってしまうと感じました。
対処法として、このブログではHTMLの下部にjavascriptコードを挿入して、ページ表示が遅くならないようにしました。

フィードを表示させるときのスピードは全く問題ありません。
非同期で表示できるAjaxならではの動作だと思います。
しかも、2回目以降のアクセスは、自動的にGoogle側にフィード情報がキャッシュされているため、より高速な動作が可能になっています。
(まだ導入してみたばかりなので、どのくらい時間が経つとキャッシュが更新されるのかは、詳しいことはわかっていません)
リアルタイムに表示させたい場合にはあまり向いていませんが、数時間単位の更新で十分であれば、文句ない動作スピードだと思います。

Google AJAX Feed APIは、他ドメインのフィードを簡単に表示させたいときに便利なAPIですね。

寿司作りに学ぶWebアプリケーション開発
の「3-7. 組み合わせによって新たな味わいが生まれる!」を実現するときにも便利だと思います。

まるごと
JavaScript & Ajax !
基礎 Ajax +
JavaScript
Ajaxライブラリ
リファレンス
 
Ajaxハッカーズ・
プログラミング
サーバサイド
Ajax入門
入門Ajax
増補改訂版