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

Google Feed API (6/8)

作成:2011-06-08 08:27
更新:2011-06-08 08:35

■フィードコントロールについて

ここまでの説明を読んで、Google Feed APIを使ってフィード情報を受け取り表示するのは、意外に面倒くさいもんだな、もっと簡単にぱぱっと表示したりできないんだろうか……なんて思った人。実は、あるんです。もっと簡単なものが。

Googleは、Feed APIの他に、APIを使って作成した、「完成した部品」も提供しています。「フィードコントロール」と呼ばれるもので、APIと同様にライブラリをロードして使います。こんとろーるといっても、ただタグを書くだけで動く、というわけではありません。やはり、簡単ですがスクリプトも書かなければいけません。ただし、その処理は以上に単純です。

では、下のリスト欄に簡単な利用例をあげておきましょう。ページにアクセスすると、Google Japan Blogと、Googleニュースの「Google」で検索した新着情報が表示されます。タイトルと日時、要約がまとめられ表示されるというシンプルなものですが、これがフィードコントロールのもっとも基本的な表示です。

では、スクリプトを見てみましょう。フィードコントロールも、Feed APIと同様、「load("feeds", "1");」でロードすることができます。Feed APIと同じライブラリに既に組み込み済みとなっているのですね。

ライブラリをロードしたら、まずはコントロールのオブジェクトを作成します。これは、google.feeds.FeedControlというものとして用意されています。
var feedControl = new google.feeds.FeedControl();
オブジェクトを作成したら、これに読み込むフィードのアドレスを追加していきます。これは「addFeed」というメソッドとして用意されています。フィードのアドレスとタイトルを引数に指定することで、そのフィードを読み込ませることができます。
feedControl.addFeed("http://feeds.feedburner.com/GoogleJapanBlog",
    "Google Japan");
feedControl.addFeed("http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&
    oe=UTF-8&output=atom&q=Google", "Googleニュース");
このaddFeedは、何度でも呼び出してフィードを追加することができます。ここでは２つだけ追加していますが、３つでも４つでもOKです。またここではGoogleニュースのフィードを追加していますが、これは以下のような形でアドレスにパラメータを用意しています。
http://news.google.com/news?hl=言語&ned=国&ie=入力エンコード&
    oe=出力エンコード&output=出力データ形式&q=検索テキスト
まぁ、基本的に「q=」のテキスト部分だけを変更すれば、Googleニュースから検索したい内容だけをとり出し表示するためのフィードが得られる、と考えてよいでしょう。これは覚えておくと便利です。
feedControl.draw(document.getElementById("container"));
最後に、フィードコントロールを指定のタグ内に組み込み表示します。引数には、コントロールを表示するタグのDOMオブジェクトを指定します。――全体の流れがわかれば、使うのはそう難しくはありませんね。なにより、手作業でフィードからエントリーをとり出し必要なデータを加工し……といった作業を行わないで済むのですから。

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

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",{"callback":OnLoad});
	
	function OnLoad() {
		var feedControl = new google.feeds.FeedControl();
		feedControl.addFeed("http://feeds.feedburner.com/GoogleJapanBlog", "Google Japan");
		feedControl.addFeed("http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=atom&q=Google", "Googleニュース");
		feedControl.draw(document.getElementById("container"));
	}
	</script>
</head>
<body>
	<h1>Google Feed API</h1>
	<p>フィードコントロール</p>
	<div id="container"></div>
</body>
</html>
※関連コンテンツ

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