このページの本文へ

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 API
Google AJAX Feed API

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

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

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

  1. http://code.google.com/intl/ja/apis/ajaxfeeds/signup.htmlを開きます。
  2. 「利用規約を読んだ上でこれに同意します」のチェックをオンにします。
  3. 「使用するウェブサイトの URL」に、自分のWebサイトのアドレスを入力します。
  4. 「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[] 記事のカテゴリやタグ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング