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

Google Calendar API (2/6)

作成:2010-04-27 11:24
更新:2011-05-01 14:25

■カレンダーから指定範囲のイベントを取り出す

では、今度はJavaScriptのスクリプトを使って、Googleカレンダーにアクセスしてみましょう。カレンダーの情報取得にはいくつかのやり方がありますが、ここではもっとも一般的に利用される「指定範囲のイベントの取得」について説明します。

カレンダーでは、さまざまな予定が「イベント」として組み込まれます。これは、タイトルと開始日時、終了日時といった情報から構成されています。このイベントを取得するためには、一定の手続を踏まえて処理を行っていく必要があります。その流れを整理しておきましょう。

１．Google Calendar APIのロード
まず最初に、APIをロードします。以前は、Googleサイトにアップされているライブラリを直接ロードしていたのですが、現在、Google Calendar APIは「Google AJAX API」という、各種のJavaScriptライブラリを必要に応じてダイナミックにロードできるAPIに統合されています。このため、Google AJAX APIのライブラリをロードし、そこからGoogle Calendar APIを読み込む、といった形になります。

２．CalendarServiceの用意
カレンダーへのアクセスは、google.gdata.calendar.CalendarServiceというオブジェクトを使って行います。これは、カレンダーとのやりとり全般を行うための機能を提供するものです。

３．CalendarEventQueryの用意
続いて、google.gdata.calendar.CalendarEventQueryというオブジェクトを用意します。これは、CalendarServiceを通じて、指定のカレンダーから必要なイベント情報を取得するための設定などを管理するオブジェクトです。これを作成し、アクセスのために必要な設定を行っておきます。

４．データの取得を開始する
CalendarServiceの「getEventsFeed」というメソッドを使い、カレンダーにアクセスを開始します。これは、用意しておいたCalendarEventQueryや、コールバック関数などを引数に指定します。カレンダーへのアクセスはAjaxによる非同期通信を利用するため、通信終了後に処理を行うためのコールバック関数を用意しなければいけません。

※コールバック関数側

５．引数からエントリーを取得する
コールバック関数では、結果のオブジェクトが引数として渡されます。そこから、エントリーと呼ばれるデータを取得します。これは、取り出された個々の情報をまとめたオブジェクトで、要するに各イベント情報が、エントリーとしてまとめられていると考えればよいでしょう。

６．エントリーから必要な値を取り出し処理する
エントリーには、さまざまな値が保管されています。ここから必要に応じて値を取り出し、表示などしていくことになります。


――どうでしょう、全体の流れはわかったでしょうか。細かいことは次に説明をしますから、全体の流れだけ把握しておいてください。

では、実際にカレンダーにアクセスしてイベントを取得し表示するサンプルをあげておきましょう。アクセスすると、指定のカレンダーの2010年度のイベントを最大10個取得し、そのイベント名（タイトル）と開始日時を順に表示します。

なお、このスクリプトは、完成はしていません。この中の《カレンダーのID》というところに、それぞれの公開カレンダーのIDを記述してください。カレンダーIDは、Googleカレンダーで、カレンダーの設定画面にある「カレンダーのアドレス」というところに表示されています。この値をはめ込んで使ってください。

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

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

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
		xml:lang="ja" lang="ja"> 
	<head> 
		<meta http-equiv="Content-Type"
			content="text/html; charset=UTF-8" /> 
		<title>Sample Page</title>
		<script type="text/javascript"
			src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
		<!--
		google.load("gdata","2");

		var service = null;
		var url = "http://www.google.com/calendar/feeds/《カレンダーのID》/public/full";
		
		google.setOnLoadCallback(getMyFeed);

		function getMyFeed(){
			service = new google.gdata.calendar.CalendarService("calendar-sample");
			query = new google.gdata.calendar.CalendarEventQuery(url);
			query.setOrderBy(google.gdata.calendar.CalendarEventQuery.ORDERBY_START_TIME);
			query.setSortOrder(google.gdata.calendar.CalendarEventQuery.SORTORDER_ASCENDING);
			query.setSingleEvents(true);
			query.setMaxResults(10);
			var start = new google.gdata.DateTime.fromIso8601("2010-01-01");
			var end = new google.gdata.DateTime.fromIso8601("2010-12-31"); 
			query.setMinimumStartTime(start);
			query.setMaximumStartTime(end);
			service.getEventsFeed(query, callback, handleError);
		}

		function callback(result) {
			var entries = result.feed.entry;
			var res = "";
			for (var i = 0; i < entries.length; i++) {
				var entry = entries[i];
				var title = entry.getTitle().getText();
				var times = entry.getTimes();
				res += (i + 1) + ": " + title + " (" + times[0].startTime + ")<br />";
			}
			document.getElementById("view").innerHTML = res;
		}

		function handleError(error) {
			document.getElementById("view").innerHTML = error;
		}
		//-->
		</script>
	</head>
	<body>
		<h1>サンプル</h1>
		<div id="view" style="color:#096;"></div>
	</body>
</html>
※関連コンテンツ

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