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

Google Feed API (8/8)

作成:2011-06-08 08:30
更新:2011-06-08 08:38

■スライドショーコントロール

こうしたフィードで配信されるのは、テキストばかりではありません。例えば、Googleの画像ライブラリサイト「Picasa」などでは、公開アルバムの情報をフィードで配信しています。

こうしたイメージを配信するフィードを利用するものとして「スライドショー」というコントロールもあります。これは文字通り、配信されるフィード情報を元に、公開されたアルバムのイメージをスライドショー表示するためのものです。

下のリスト欄に簡単な利用例をあげておきました。これは、筆者の公開するアルバムを表示する簡単なサンプルです。単にスライド表示するだけでなく、イメージ上にマウスポインタを持ってくれば、スライドを停止したり、前後に表示イメージを移動していくこともできます。

このコントロールも、API標準のものではありませんので、スクリプトを読み込む必要があります。以下の部分です。（スタイルシートの読み込みは不要です）
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
    type="text/javascript"></script>
コントロールの利用の仕方は、先ほどのダイナミックフィードコントロールと似ています。まず、必要な情報をあらかじめ変数などにまとめておき、それからコントロールのオブジェクトをnewする、という形になります。

用意する値は、まず「フィードのアドレス」です。これは以下のように、ごく普通のテキストとして用意しておきます。ここでは筆者のアルバムを指定していますが、それぞれ表示したいアルバムのアドレスを指定してください。
var feed  = "https://picasaweb.google.com/data/feed/base/user/tuyano/albumid/
    5395938592730364417?alt=rss&kind=photo&hl=ja";
続いて、コントロールの設定情報を連想配列で用意します。これは以下の部分になります。displayは表示時間、transistionTimeは次のイメージに視覚効果で切り替えるのにかかる時間、scaleImagesはイメージのスケールを自動調整するか否か、fullControlPanelは前後に移動する操作パネルを表示するか否か、を示します。時間関係はミリ秒換算した値になります。
var options = {
    displayTime:5000,
    transistionTime:1000,
    scaleImages:true,
    fullControlPanel : true
};
後は、オブジェクトを作成するだけです。スライドショーは「GFslideShow」という名前のオブジェクトとして用意されています。これをnewします。引数には、表示するフィードのアドレス、スライドショーを表示するタグのID、そして設定情報の連想配列を用意します。
var ss = new GFslideShow(feed, "container", options);}


――以上、Feed APIを使ったフィード処理の基本と、APIを利用した各種のフィードコントロールの使い方についてざっと説明をしました。とりあえず、コントロール関係を使えるようになっただけでも、Webページにフィードを利用するのは簡単に行えるようになるでしょう。

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

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/slideshow/gfslideshow.js"
		type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1",{"callback":OnLoad});

function OnLoad() {
	var feed  = "https://picasaweb.google.com/data/feed/base/user/tuyano/albumid/5395938592730364417?alt=rss&kind=photo&hl=ja";
	var options = {
		displayTime:5000,
		transistionTime:1000,
		scaleImages:true,
		fullControlPanel : true
	};
	var ss = new GFslideShow(feed, "container", options);}
</script>
</head>
<body>
	<h1>Google Feed API</h1>
	<p>スライドショーコントロール</p>
	<div id="container" style="width:300px;height:280px;">Loading...</div>
</body>
</html>
※関連コンテンツ

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