18回からjQueryを利用したFeedの読み込みや、Twitterのタイムライン読み込みなどを行ってきましたが、今回は少し話を戻して「第18回 jQueryでAJAX入門:RSSをAJAXで取得してリストに表示する」の続きで外部RSSフィードをGoogle AJAX Feed APIを利用して読み込んでみましょう。jQueryとの絡め方も少し説明しています。
Google AJAX Feed API
18回でも少し紹介した通り、Google AJAX Feed APIを使えばクロスドメインの制約を超えて、外部RSSを読み込むことができます。利用するには、Google Maps APIと同じように、Googleアカウントが必要なので、取得していない方はまずGoogleアカウントを取得しておいてください。
APIキーの取得
キーの取得方法はおなじみGoogle Maps APIと同じで、利用したいドメインを入力してキーを取得します。
Google AJAX Feed APIのサインアップページ
APIの読み込み
APIキーを取得したら、読み込みましょう。
以上で、APIが使える状態になりました。実際にFeed APIを使うには、Feed APIをロードする必要があります。
Feed APIの読み込み
この後にすることのポイントは以下の2点です。
- 取得したいRSSのURLでインスタンスを初期化
- RSSの取得
取得したいRSSのURLでインスタンスを初期化
まずはRSSを読み込むために、インスタンスを初期化します。
new google.feeds.Feed(RSSのURL)で初期化します。
渡すRSSの種類はRSS1, RSS2, Atomとどれを渡してもGoogle AJAX Feed API側で処理して返されるため、渡すフィードの種類を気にしなくていい点も便利です。
対応しているフィード形式
公式ドキュメントによれば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
RSSの取得
インスタンスを初期化したら、Feedの読み込みを行います。
Feedの取得には.load()メソッドを利用します。
これで、load()メソッドのresult部分でRSSを受け取ることができます。ポイントは受け取ったFeedはJSON形式で返されるという点です。オプションを使うことで、XML形式で返すこともできますが、JSONのほうがアクセスしやすいので、今回はこのままJSONを利用します。
取得した情報へのアクセス
取得したデータは、実際にはJSONPで返されるので、Firebugのコンソールには表示されず、接続タブで確認することができます。
JSON形式ですので、それぞれはプロパティとしてアクセスすることができます。具体的には、エントリーは以下のように.feed.entriesでアクセスできます。
デフォルトの設定ではエントリーは4件読み込む設定になっています。後で説明しますが、この件数は変更することができます。
entriesは配列になっているので、for()や.each()でループさせて処理します。せっかくjQueryを使っているので.each()で例をあげてみます。
各entryのタイトルとURLはそれぞれ、.title, .linkでアクセスすることができます。
アクセスできる要素
今回はtitleとlinkしか使いませんが、その他 entries のループ内でアクセスすることができる要素(プロパティ)は以下の通りです。
プロパティ | 内容 |
title | エントリーのタイトル |
link | エントリーのリンク |
content | 記事の本文(HTMLタグありで返される) |
contentSnippet | 120文字未満のcontent(HTMLタグは外れた状態のも) |
publishedDate | 公開日 |
categories | カテゴリー(配列で返される) |
Google AJAX Feed APIを使って取得したデータをjQueryを使ってページ内に表示させる
以上をふまえて、第18回で作成したサンプルデータを書き換えてみましょう。
$.ajax()で取得していた部分をfeed.load()に置き換えてその後の処理もGoogle AJAX Feed APIにあわせて書き換えています。
プラグインへの組み込み
18回の2つ目のサンプルと上記のサンプルコードを併せるだけですが、その前に取得するデータの件数の変更方法を確認しておきましょう。
といっても、とても単純で、インスタンスに対して.load()を実行する前に.setNumEntries()で取得数を指定するだけです。
プラグインにする際の留意点
まず、APIがロードされていなければ何もできないため、以下の一文のプラグインの頭に入れておきます。
また、Feed APIが読まれていない場合も何もできないので、前もってロードしておきます。
あとは、前と同じように、オプションでURLと表示件数を渡せるようにしておき、件数を受け取った場合はその件数分表示できるように、さきほどの.setNumEntries()を入れておきます。
プラグインソース
18回で作成した、rss2render.jsと今回のgRSSRender.jsのソースコードを見比べると違いがすぐ分かると思います。
2つ目のサンプルについて
2つ目のサンプルでは、実際にRSSをロードしていることが分かるように、切り替えリンクを用意しました。
あらかじめhrefにRSSのURLを入れてあるので、クリックするとそのURLがgRSSRender()メソッドに渡され、表示領域のデータが更新されます。
まとめ
Google AJAX Feed APIを利用することで、外部のRSSフィードも取得できるようになるので、様々なコンテンツをページに表示することができます。
Google AJAX Feed APIのAPI(メソッド)については以下の公式ドキュメントに記載されているので、興味のある方はご覧になられてはいかがでしょうか。
Google AJAX Feed API クラス リファレンス