特定のテーマに関する情報を集めた、ポータル的な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[] | 記事のカテゴリやタグ |
