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

Google Feed API (5/8)

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

■フィード検索を行う

Google Feed APIには、「フィード検索」と呼ばれる機能があります。これは、いわば「Google検索によるフィードの検索機能」のようなものです。検索テキストを指定することで、その検索文字を含むフィードを探し出します。――つまり、特定のフィードのアドレスを指定してそこから検索をするというのではなく、「こういう内容のフィードを探してくれ」といった要望に答えるためのもの、というわけです。

下のリスト欄に簡単な利用例を掲載しておきました。入力フィールドにテキストを書いて実行すると、その検索テキストを含むフィードを検索してそのエントリーを表示します。タイトルのリンクをクリックすれば、そのエントリー記事に移動し、内容を見ることができます。

フィール検索は、通常のフィードの利用とはスクリプトの書き方が微妙に違っています。まず、フィードを取得するためのメソッドですが、これはloadメソッドは使いません。以下のように行います。
google.feeds.findFeeds(str,feedLoaded);
フィード検索にはgoogle.feeds.Feedオブジェクトを作成する必要はありません。google.feedsオブジェクトに用意されている「findFeeds」メソッドを呼び出すだけです。引数には、検索テキストと、通信完了後に呼び出されるコールバック関数を指定します。

コールバック関数で行っている処理も、微妙に違いがあります。送られてきたデータが引数で渡され、そこから繰り返しなどを使ってエントリーのオブジェクトをとり出し処理していく、という考え方は同じですが、処理部分を見ると、以下のようになっていることがわかります。
for (var i = 0; i < result.entries.length; i++) {
    var entry = result.entries[i];
    container.appendChild(makeEntryData(entry));
}
……何が違うかわかりますか？　resultのデータ構造が微妙に異なっているのです。先程、loadメソッドでロードしたフィードのデータは、result.feed.entriesというように、返されたオブジェクトのfeed.entriesという形でエントリーがまとめられていました。が、ここでは、result.entriesとなっています。feedプロパティはなく、返されたオブジェクト内に直接entriesが用意されているのです。

この「返されたオブジェクトの構造の違い」さえ頭に入れておけば、後は大きな問題はありません。エントリーからDOMオブジェクトを生成しているmakeEntryDataでも、基本的な流れは先に作成したスクリプトとほぼ同じことが分かるでしょう。

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

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");

function find() {
	var str = document.getElementById("text1").value;
	google.feeds.findFeeds(str,feedLoaded);
}

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

function makeEntryData(entry){
	var div = document.createElement("div");
	var title = document.createElement("p");
	title.innerHTML = entry.title;
	var link = document.createElement("a");
	link.href = entry.link;
	link.innerText = entry.link;
	var content = document.createElement("div");
	content.innerHTML = entry.contentSnippet;
	div.appendChild(title);
	div.appendChild(link);
	div.appendChild(content);
	div.appendChild(document.createElement("hr"));
	return div;
}

</script>
</head>
<body>
	<h1>Google Feed API</h1>
	<p>フィード検索</p>
	<input type="text" id="text1" >
	<input type="button" onclick="find();" value="検索">
	<div id="container"></div>
</body>
</html>
※関連コンテンツ

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