【ハウツー】
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アプリケーションを作成する場合には一考に値する技術であろう。
| マイナビ、3月より書籍連動型のクリエイティブ・デザイン系セミナー開講 [12:00 2/10] |
| Linux Mint 12 KDE登場 [10:26 2/10] |
| Dell、重複排除により最大98%のデータ削減が可能なバックアップストレージを発売 [09:44 2/10] |
| 北大、「ポジトロン断層撮影法」による脳腫瘍の性質を診断する手法を開発 [09:40 2/10] |
| NICTなど、手術支援ロボット「da Vinci」の3D裸眼映像伝送実証実験を計画 [09:36 2/10] |
|
カシオ、子供の入園/入学にぴったりな[お名前・似顔絵シール]印刷サービス [17:38 2/10] 家電 |
|
TVウォッチャーの芸能まるごと1週間 - メイサ&赤西結婚、花子妊娠に沸いた [17:10 2/10] エンタメ |
|
竹達彩奈、デビューシングル「Sinfonia! Sinfonia!!!」を4/11にリリース [17:02 2/10] ホビー |
|
一緒に住むのをためらってしまう相手のクセとは? [17:00 2/10] キャリア |
|
日産、スカイラインクーペ特別仕様車「55th Limited」を55台限定発売 [16:54 2/10] ライフ |