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

Google Feed API (7/8)

作成:2011-06-08 08:29
更新:2011-06-08 08:37

■ダイナミックフィードコントロール

このフィードコントロールは、ロードしたときにフィードを読み込み表示するというもので、非常に静的なコントロールでした。が、この他にもコントロールは用意されています。

例えば、下のリスト欄にあるサンプルでは、取得したエントリーを次々と一定時間ごとに一番上のエリアに表示していきます。

ここで利用しているのは、「ダイナミックフィードコントロール」と呼ばれるものです。これは、Feed APIには含まれていません。スクリプトとスタイルシートを別途読み込むようにしなければいけません。
<script src="http://www.google.com/uds/solutions/dynamicfeed/
    gfdynamicfeedcontrol.js" type="text/javascript"></script>
 <style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/
    gfdynamicfeedcontrol.css");
</style>
これがそのためのタグです。これで、コントロールが使えるようになります。――コントロールの使い方は、非常に単純です。用意されているオブジェクトをnewで作成するだけです。ただし、読み込むフィードや表示スタイル、表示するタグのIDなどの情報を引数に用意してやらなければいけません。

では、OnLoad関数を見てみましょう。まず、読み込むフィードに関する情報を配列にまとめたものを用意します。
var feeds = [
    {
        title: 'Google',
        url: "http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&
            output=atom&q=Google"
    },
    {
        title: 'Android',
        url: "http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&
            output=atom&q=Android"
    },
    {
        title: 'iPhone',
        url: "http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&
            output=atom&q=iPhone"
    }
];
フィード情報は、「title」「url」といった項目からなる連想配列を配列にまとめた形をしています。続いて、コントロールの設定に関する情報を用意します。
var options = {
    stacked : true,
    horizontal : false,
    title : "Google News"
};
こちらは、連想配列として用意をしておきます。stackedは、各フィードの新着をスタック（積み重ね）して表示するかどうかを示すものです。falseにすると、複数のフィードからまとめて一番新しいものをいくつか読み込み表示します。horizontalは水平（横）方向にエントリーを表示するかどうかを示すものです。titleは、コントロールのタイトルになります。――こうして必要な情報を用意したら、コントロールのオブジェクトを作成します。
new GFdynamicFeedControl(feeds, 'container', options);
コントロールは、GFdynamicFeedControlというオブジェクトとして用意されています。引数には、先ほど用意したフィード情報、コントロールを表示するタグのID、コントロールの設定情報といったものを用意します。newしてオブジェクトを作ったら、後は何も操作する必要はありません。

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

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 src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
	<style type="text/css">
	@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
	</style>
<script type="text/javascript">
google.load("feeds", "1",{"callback":OnLoad});

function OnLoad() {
	var feeds = [
		{
			title: 'Google',
			url: "http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=atom&q=Google"
		},
		{
			title: 'Android',
			url: "http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=atom&q=Android"
		},
		{
			title: 'iPhone',
			url: "http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=atom&q=iPhone"
		}
	];
	var options = {
		stacked : true,
		horizontal : false,
		title : "Google News"
	};
	new GFdynamicFeedControl(feeds, 'container', options);
}
</script>
</head>
<body>
	<h1>Google Feed API</h1>
	<p>フィードコントロール</p>
	<div id="container" style="width:300px;">Loading...</div>
</body>
</html>
※関連コンテンツ

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