18回からjQueryを利用したFeedの読み込みや,
Google AJAX Feed API
18回でも少し紹介した通り,
APIキーの取得
キーの取得方法はおなじみGoogle Maps APIと同じで,
Google AJAX Feed APIのサインアップページ
APIの読み込み
APIキーを取得したら,
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAttrn24k4yq5IZa1QwAH1phSX4GPXWjxz58tiRPyf1JSOBmEb7hSWuX3JPNgGyIoMLY00-8tj1ngDKQ"></script>
以上で,
Feed APIの読み込み
// Feed APIのロード
google.load('feeds', '1');
この後にすることのポイントは以下の2点です。
- 取得したいRSSのURLでインスタンスを初期化
- RSSの取得
取得したいRSSのURLでインスタンスを初期化
まずはRSSを読み込むために,
new google.
// 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の取得には.load()メソッドを利用します。
// Feedの取得 / load( callback ) callbackの引数resultでFeedを受け取る
feed.load(function(result) {
// 実行したい処理
});
これで,
取得した情報へのアクセス
取得したデータは,
JSON形式ですので,
デフォルトの設定ではエントリーは4件読み込む設定になっています。後で説明しますが,
result.feed.entries
entriesは配列になっているので,
各entryのタイトルとURLはそれぞれ,
// entries の個数分処理を繰り返す
$(result.feed.entries).each(function() {
console.log('href: ' + this.link + '\n' + 'text: ' + this.title);
});
アクセスできる要素
今回はtitleとlinkしか使いませんが,
プロパティ | 内容 |
---|---|
title | エントリーのタイトル |
link | エントリーのリンク |
content | 記事の本文(HTMLタグありで返される) |
contentSnippet | 120文字未満のcontent(HTMLタグは外れた状態のも) |
publishedDate | 公開日 |
categories | カテゴリー(配列で返される) |