libro
www.tuyano.com
JavaScript/Ajaxライブラリ入門

Google Feed API (3/8)

作成:2011-06-08 08:21
更新:2011-06-08 08:34

■Google Japan Blogのフィードを利用してみる

では、実際に簡単なサンプルを作ってみましょう。ここでは、Google Japan BlogのRSSを読み込み、内容を表示してみることにします。

ここでは、ブロクの最新記事のタイトルだけを取り出して表示しています。下のリスト欄にサンプルコードを掲載しましたので実際に書いてアクセスしてみましょう。最近アップされた記事のタイトルが一覧表示されます。ここではsetOnLoadCallbackでOnLoad関数を実行していますね。このOnLoadで、Feedオブジェクトを作成し、loadメソッドでフィードの読み込みを行っています。

Ajax通信で受け取ったデータの処理を行っているのは、コールバック関数として用意したfeedLoaded関数内です。ここでは、受け取ったデータが引数のresult変数に渡されます。まず最初に、エラーのチェックを行います。
if (!result.error) {……
resultは、受け取ったXMLデータのテキストがただずらずらと保管されているのではなく、オブジェクトになっています。この中に、必要な情報が整理され保管されているのです。データが正しく受け取れたかどうかは「error」プロパティでチェックできます。!result.errorをチェックすることで、エラーがない場合にのみ処理を実行させることができます。

実行している処理部分では、まずデータを表示する<div>タグのDOMオブジェクトを変数に取り出した後、resultから順にデータを取り出して処理をしています。この部分を見ると、以下のような繰り返しになっていますね。
for (var i = 0; i < result.feed.entries.length; i++) {……}
result内の「feed」というオブジェクトに、取得したフィード情報がまとめられています。個々のデータ（「エントリー」と呼ばれる、各記事の情報をまとめたもの）は「entries」というプロパティに配列として保管されています。ですから、繰り返しを使い、ここから順にエントリーのオブジェクトをとり出し、そこから情報を調べていけばよいわけです。
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.innerText = entry.title;
container.appendChild(div);
それを行っているのが、この部分です。まず、entries配列からエントリーのオブジェクトをとり出しておきます。そしてcreateElementで新たな<div>タグのDOMオブジェクトを作って、エントリーのタイトルをその中に組み込みます。エントリーのタイトルは、「entry.title」というように、エントリーオブジェクトのtitleプロパティで取り出せます。

最後に、作成した<div>タグを、表示用のタグにappendChildで組み込みます。全体の流れがわかれば、そう難しいものではありませんね。


※setOnLoadCallbackを使わない方法

ざっとスクリプトを見ていきましたが、やっぱり「google.loadでロードしてからsetOnLoadCallbackで処理を実行して、そこからコールバック関数で……」というのは、ややこしいことは確かです。せめてもう少しシンプルな書き方ができないか、と思う人に、「google.loadで直接OnLoadを実行させる書き方」を紹介しておきましょう。
google.load("feeds", "1",{"callback":OnLoad});
google.setOnLoadCallback(OnLoad);
　↓
google.load("feeds", "1",{"callback":OnLoad});
こんな具合に、google.loadを実行する際、第３引数として{"callback":OnLoad}という連想配列を渡してやります。これで、ライブラリの読み込みが完了したら自動的にOnLoadを実行させることができます。つまり、setOnLoadCallbackは不要となるのです。

まぁ、たかだが１行減るだけなのでそれほど大きな違いはありませんが、「setOnLoadCallbackするのを忘れて動かない」というポカはよくやってしまいがちですので、こちらの書き方で覚えたほうが確実かも知れませんね。


※Google Japan BlogのRSS
http://feeds.feedburner.com/GoogleJapanBlog

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type"
		content="text/html; charset=utf-8">
	<title>Sample</title>
	<style>
	h1 {font-size: 14pt; font-weight:bold;
		background-color:#DDF; padding:3px;}
	</style>
	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("feeds", "1");
	google.setOnLoadCallback(OnLoad);
	
	function OnLoad() {
		var feed = new google.feeds.Feed
			("http://feeds.feedburner.com/GoogleJapanBlog");
		feed.load(feedLoaded);
	}

	function feedLoaded(result) {
		if (!result.error) {
			var container = document.getElementById("container");
			container.innerHTML = '';
			for (var i = 0; i < result.feed.entries.length; i++) {
				var entry = result.feed.entries[i];
				var div = document.createElement("div");
				div.innerText = entry.title;
				container.appendChild(div);
			}
		}
	}
	</script>
</head>
<body>
	<h1>Google Feed API</h1>
	<p>Google Japan Blogの新着記事</p>
	<div id="container">Loading...</div>
</body>
</html>
※関連コンテンツ

「JavaScript/Ajaxライブラリ入門」に戻る