もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第21回 jQueryでAJAX入門:Google AJAX Feed APIを利用したRSSの読み込みとプラグインへの組み込み

この記事を読むのに必要な時間:およそ 9 分

画像

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のサインアップページ

URLはサンプルファイル用のドメインです

URLはサンプルファイル用のドメインです

キーはサンプルファイル用です

キーはサンプルファイル用です

APIの読み込み

APIキーを取得したら,読み込みましょう。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAttrn24k4yq5IZa1QwAH1phSX4GPXWjxz58tiRPyf1JSOBmEb7hSWuX3JPNgGyIoMLY00-8tj1ngDKQ"></script>

以上で,APIが使える状態になりました。実際にFeed APIを使うには,Feed APIをロードする必要があります。

Feed APIの読み込み

// Feed APIのロード
google.load('feeds', '1');

この後にすることのポイントは以下の2点です。

  1. 取得したいRSSのURLでインスタンスを初期化
  2. RSSの取得

取得したいRSSのURLでインスタンスを初期化

まずはRSSを読み込むために,インスタンスを初期化します。
new google.feeds.Feed(RSSのURL)で初期化します。

// Feedインスタンスの生成
var feed = new google.feeds.Feed('http://rss.rssad.jp/rss/gihyo/design/feed/rss2');

渡す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()メソッドを利用します。

// Feedの取得 / load( callback ) callbackの引数resultでFeedを受け取る
feed.load(function(result) {
	// 実行したい処理
});

これで,load()メソッドのresult部分でRSSを受け取ることができます。ポイントは受け取ったFeedはJSON形式で返されるという点です。オプションを使うことで,XML形式で返すこともできますが,JSONのほうがアクセスしやすいので,今回はこのままJSONを利用します。

取得した情報へのアクセス

取得したデータは,実際にはJSONPで返されるので,Firebugのコンソールには表示されず,接続タブで確認することができます。

画像

JSON形式ですので,それぞれはプロパティとしてアクセスすることができます。具体的には,エントリーは以下のように.feed.entriesでアクセスできます。

デフォルトの設定ではエントリーは4件読み込む設定になっています。後で説明しますが,この件数は変更することができます。

result.feed.entries

entriesは配列になっているので,for()や.each()でループさせて処理します。せっかくjQueryを使っているので.each()で例をあげてみます。

各entryのタイトルとURLはそれぞれ,.title, .linkでアクセスすることができます。

// entries の個数分処理を繰り返す
$(result.feed.entries).each(function() {
    console.log('href: ' + this.link + '\n' + 'text: ' + this.title);
});

アクセスできる要素

今回はtitleとlinkしか使いませんが,その他 entries のループ内でアクセスすることができる要素(プロパティ)は以下の通りです。

プロパティ内容
titleエントリーのタイトル
linkエントリーのリンク
content記事の本文(HTMLタグありで返される)
contentSnippet120文字未満のcontent(HTMLタグは外れた状態のも)
publishedDate公開日
categoriesカテゴリー(配列で返される)

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入