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

Google Feed API (4/8)

作成:2011-06-08 08:23
更新:2011-06-08 08:23

■エントリーに含まれる各種の情報

基本がわかったところで、より深くフィード情報を利用していきましょう。先に作成したサンプルのスクリプト部分を以下のリスト欄のように書き換えてみてください。今度は、更に詳しくフィードの情報が表示されます。

ここでは、それぞれのフィードから「タイトル」「更新日時」「フィードのURL」「内容（コンテンツ）」といった情報をとり出し、それをまとめて表示しています。また、表示するエントリーは10個に拡大してあります。

では、順にスクリプトを見ていきましょう。まず、OnLoadでfeedオブジェクトを作成したところに注目！　こんな文が追加されていますね。
feed.setNumEntries(10);
これは、読み込むエントリーの数を設定するものです。setNumEntriesで数字を指定することで、その数だけエントリーを読み込むようになります。

読み込んだフィードの処理を行なっているfeedLoaded関数では、エントリーの情報を取り出してDOMを生成する部分を別関数に切り分けることにしました。繰り返し部分では、
container.appendChild(makeEntryData(entry));
こんな具合に、makeEntryData関数にエントリーオブジェクトを渡して呼び出し、その返値を組み込むようにしてあります。つまりmakeEntryDataでは、「引数で渡されたエントリーオブジェクトから必要な情報をとり出し、表示するためのDOMオブジェクトを作成して返す」といった処理を用意すればいいわけですね。


■エントリーオブジェクトのプロパティ

さて、makeEntryData関数ですが、ここではdocument.createElementでDOMオブジェクトを作成し、これにエントリーのさまざまな値を設定しています。エントリーの値をDOMに設定している部分だけを抜き出してみると以下のようになります。
title.innerText =  entry.title;
date.innerText = entry.publishedDate;
link.href = entry.link;
link.innerText = entry.link;
content.innerText = entry.contentSnippet;

※プロパティの内容
title――タイトル
publishedDate――公開日時
link――エントリーのアドレス
contentSnippet――エントリーのコンテンツ

ざっとこれらのプロパティが使えるようになれば、エントリーの基本情報はほぼ取り出せるでしょう。後は、これらを一つの<div>タグに組み込んでreturnするだけです。

なお、エントリーの内容（コンテンツ）は、ここではcontentSnippetというプロパティを使いましたが、これは「コンテンツの最初から120文字だけ」を取り出すためのものです。コンテンツ全体をまるごと取得したい場合は「content」プロパティを使うとよいでしょう。

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

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

●プログラム・リスト●

<script type="text/javascript">
google.load("feeds", "1",{"callback":OnLoad});

function OnLoad() {
	var feed = new google.feeds.Feed
		("http://feeds.feedburner.com/GoogleJapanBlog");
	feed.setNumEntries(10);
	feed.load(feedLoaded);
}

function feedLoaded(result) {
	if (!result.error) {
		var container = document.getElementById("container");
		container.innerText = "";
		for (var i = 0; i < result.feed.entries.length; i++) {
			var entry = result.feed.entries[i];
			container.appendChild(makeEntryData(entry));
		}
	}
}

function makeEntryData(entry){
	var div = document.createElement("div");
	var title = document.createElement("h3");
	title.innerText =  entry.title;
	var date = document.createElement("div");
	date.innerText = entry.publishedDate;
	var link = document.createElement("a");
	link.href = entry.link;
	link.innerText = entry.link;
	var content = document.createElement("div");
	content.innerText = entry.contentSnippet;
	div.appendChild(title);
	div.appendChild(date);
	div.appendChild(link);
	div.appendChild(content);
	div.appendChild(document.createElement("hr"));
	return div;
}
</script>
※関連コンテンツ

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