JavaScriptで外部フィードを手軽に取り込める

Google Feed APIで3分マッシュアップ

2009年04月08日 08時00分更新

藤本壱

ツイートする

　特定のテーマに関する情報を集めた、ポータル的なWebサイトを作りたい――。そんなとき、JavaScriptを使って、他のWebサイトのフィードから情報を得て、そのサイトの最新情報を表示できると便利です。

　しかし、普通の方法ではできません。というのも、JavaScriptでフィードを読み込むのに使う「XMLHttpRequest」オブジェクトでは、セキュリティ上、異なるドメイン（クロスドメイン）とのやり取りが制限されているためです。そこで、「Google AJAX Feed API」を使いましょう。

　Google AJAX Feed APIは、指定したフィードをGoogleのサーバー側で取得し、JSON（JavaScript Object Notation）と呼ばれるJavaScript専用のデータ形式に変換します。変換されたデータは、JSONP（JavaScript Object Notation with Padding：HTMLのscriptタグを使ってデータを読み込む方法）で読み込むため、クロスドメインの制限を回避できます。しかも、フィードを取得するのもGoogleのサーバーですから、どこの誰がフィードを取りに来るのか、元の情報を持つサーバーからは分かりません。

　今回は、このGoogle AJAX Feed APIを使って、フィードの情報を手軽に表示する方法を紹介します。

フィードを手軽に読み込める「Google AJAX Feed API」

　「Google AJAX Feed API」は、RSSやAtomのフィードを提供している他のWebサイトからフィードを読み込み、自分のWebサイトに表示できるAPIです。JavaScriptのライブラリの形で提供されています。


Google AJAX Feed API

　読み込んだフィードの情報は、Google AJAX Feed APIによってJSONまたはXML形式に変換されます。JSON形式にした場合は、フィードの情報が要約された形になり、どのサイトのフィードでも一律の方法でアクセスできます。通常はこちらの方法を使うとよいでしょう。

　一方、XML形式の場合は、元のフィードの情報をそのまま得ることができますが、元のフィードの形式（RSS／Atom）によって、情報にアクセスする方法が異なります。XML形式は、オリジナル情報のままで扱いたい場合に使うとよいでしょう。

　Google AJAX Feed APIを使うには、始めにAPI Keyを得る必要があります。手順は以下の通りです。

http://code.google.com/intl/ja/apis/ajaxfeeds/signup.htmlを開きます。
「利用規約を読んだ上でこれに同意します」のチェックをオンにします。
「使用するウェブサイトの URL」に、自分のWebサイトのアドレスを入力します。
「APIキーを生成」のボタンをクリックします。

Google AJAX Feed APIの使い方

　Google AJAX Feed APIを使ってフィードの情報を自分のWebページに表示するには、次のような手順で作業します。

●HTMLヘッダー部分の書き換え

　HTMLのヘッダー部分に、以下のscriptタグを追加して、Google AJAX Feed APIのJavaScriptを読み込みます。「APIキー」の箇所は、自分で取得したAPIキーに置き換えてください。


<script type="text/javascript" src="http://www.google.com/jsapi?key=APIキー"></script>
<script type="text/javascript">
google.load("feeds", "1");
</script>

●フィードを読み込んで出力する

　次に、フィードを読み込んで出力するために、以下のようなJavaScriptをHTMLに追加します。


<script type="text/javascript">
function loadFeed() {
    var feed = new google.feeds.Feed("フィードのURL");
    feed.setNumEntries(読み込む記事の最大数);
    feed.load(function(result) {
        if (!result.error) {
            フィード全体の情報（サイトのタイトル等）を出力
            for (var i = 0; i < result.feed.entries.length; i++) {
                個々の記事の情報を出力
            }
        }
    });
    google.setOnLoadCallback(loadFeed);
}
</script>

　これで読み込まれたフィード全体の情報は、以下のプロパティで得られます。

プロパティ	内容
result.feed.title	サイトのタイトル
result.feed.link	サイトのアドレス
result.feed.description	サイトの概要
result.feed.author	サイトの著者

　記事（エントリ）は「result.feed.entries」という配列で表され、以下のプロパティで個々の記事の情報を得られます。これらのプロパティを順次出力することで、Webページ上にフィードの情報を表示できます。

プロパティ	内容
result.feed.entries[…].title	記事のタイトル
result.feed.entries[…].link	記事のアドレス
result.feed.entries[…].content	記事の内容（HTMLのタグも含む）
result.feed.entries[…].contentSnippet	記事の概要（HTMLのタグは含まない）
result.feed.entries[…].publishedDate	記事が公開された日付
result.feed.entries[…].categories[]	記事のカテゴリやタグ