【ハウツー】
Googleは16日、「Google AJAX Feed API」を公開した。Google AJAX Feed APIは、RSS/Atomなどの各種フィードを取得するためのJavaScript APIだ。
これまで、JavaScriptでフィードを取得し、取り扱うには以下のような問題があった。
Google AJAX Feed APIはこれらの問題を解決し、非常に簡単にフィードを取得し、取り扱うことができるAPIだ。では実際に使用してみよう。
Googleアカウントを取得し、ログイン済みの状態でサインアップ用のサイトにアクセスする。
このサイトで、APIの使用制限についての認否を意味する画面下部のチェックボックスにチェックを入れた後、ウェブサイトのURLを入力する。ここで入力するサイトは現実に存在していなくてもよい。適当なURLを入力した後、「Generate API Key」をクリックすれば、入力したURLに応じたAPIキーが生成される。
この画面に表示されるHTML+JavaScriptのコードは、そのままファイルに貼り付けて実行することが可能だ。ぜひ試してみてほしい。
以下は、自分で試す時間がない方のために、Feed APIを使用した場合にコードがどのようになるかを示しておこう。
では、生成されたHTML+JavaScriptのコードを基に解説を行う(コードをわかりやすくするため、一部手を入れている)。
サンプルは、単純に特定のURLからフィードを読み込み、その情報を本文中に表示するという単純なものだ。
生成されたコードではまず、HTML内で<script>タグを用い、外部JavaScriptを読み込んでいる。コードは、以下のような形式になる。
<script type="text/javascript"
src="http://www.google.com/jsapi?key=APIキー"></script>
こうして読み込んだJavaScriptファイルの生成元は、URLが「http://www.google.com/」で始まっていることからGoogleだということがわかる。
次に、以下のようなコードにより、Feed APIを読み込んでいる。
<script type="text/javascript">
google.load("feeds", "1"); ← Feed APIの読み込み
</script>
これによりFeed APIが読み込まれ、「google.feeds」名前空間にあるコードが利用できるようになる。load関数の第2引数はバージョン番号だ。このような引数があるということは、将来的なバージョンアップの可能性を示唆していると言える。
フィードAPIを利用したコードは以下のようになる。
// google.feeds.Feedオブジェクトの生成
var feed = new google.feeds.Feed("http://journal.mycom.co.jp/haishin/rss/index.rdf");
// フィード読み込み。引数には読み込み完了時のコールバック関数を指定する。
feed.load(function(result) {
// 読み込み成功時
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
// フィードのエントリを取得
var entry = result.feed.entries[i];
var div = document.createElement("div");
// フィードエントリの属性を参照
div.appendChild(
document.createTextNode(
"タイトル:[" + entry.title + "] リンク:[" + entry.link + "]");
container.appendChild(div);
}
}
})
これで大体おわかりだろう。google.feeds.FeedクラスのコンストラクタにフィードのURLを指定し、load関数を呼び出すだけでフィードの読み込みを行える。
読み込みが成功した場合は、結果オブジェクト(ここではresult)のfeed属性によりフィードの情報を取得でき、フィード内の個々のエントリはさらにフィードのentries属性で配列を取得し、アクセスできる。このコードではエントリのタイトルとリンクを参照している。
load関数は、自身の生成元(Googleのサイト)にアクセスしてフィードを取得するので、同一生成元ポリシーに抵触する恐れがない。また、AtomやRSS、その各バージョン間の違いはすべて内部で吸収される。
Google AJAX Feed APIを使用すると簡単にJavaScriptからフィードを取得することができる。他サイトのフィードを利用したWebアプリケーションを作成する場合には一考に値する技術であろう。
| Twitter、サイト作成用フレームワーク「Bootstrap 2.0」を公開 [16:55 2/7] |
| ネットワールド、業界初のディスクレスVDIを発表 [15:12 2/7] |
| ラリタン、1台で8サーバにノンブロッキングアクセス可能なKVMスイッチ [12:45 2/7] |
| ST、SD 3.0規格に準拠する電圧レベル・トランスレータを発表 [11:28 2/7] |
| Microchipなど、chipKIT向けIDE対応のCerebot Development Boardを発表 [11:01 2/7] |
|
あの腕章やメガネがモチーフに - ペルソナシリーズのシルバーアクセサリー [17:00 2/7] ホビー |
|
卵を割って中身を捨てた……。疲れているなぁと思うエピソード集 [17:00 2/7] キャリア |
|
Twitter、サイト作成用フレームワーク「Bootstrap 2.0」を公開 [16:55 2/7] エンタープライズ |
|
ニコン、圧倒的高画質の3,630万画素フルサイズCMOS搭載「D800」「D800E」 [16:43 2/7] 家電 |
|
「銀魂」キャラ56名の総選挙!上位はフィギュアで商品化 [16:42 2/7] ホビー |