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

Google Calendar API (5/6)

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

■イベントを追加する

続いて、イベントの追加を行ってみましょう。これは、いろいろと注意しなければならない点があります。まずはそれらを整理しておきましょう。

１．フィードのURLが違う！
表示を取得したときには、CalendarServiceでアクセスしたアドレスは「http://www.google.com/calendar/feeds/カレンダーID/public/full」というものでした。最後は、/public/fullとなってました。が、この/public/fullは、公開されたフィードであり、公開データを取り出すためのものです。データの変更などは、/private/fullにアクセスをする必要があります。

２．ログインしないといけない！
/private/fullにアクセスし、データの変更を行うためには、データ変更の権限を持つユーザーとしてログインをしなければいけません。これには、google.accounts.userというオブジェクトにある「login」メソッドを利用します。

３．イメージを用意しないといけない！
ログイン機能は、どういう理由かわかりませんが、ページ内に必ず<img>タグがなければいけません。何でもいいので、適当なイメージを用意し、<img>タグを記述してください。


これらの点は、イベント追加の作業以前の知識として頭に入れておいてください。次に、イベント追加の流れを整理しておきましょう。


１．CalendarServiceを用意する
まずは、CalendarServiceオブジェクトを用意します。これは既に登場していますからおなじみですね。

２．ログインチェックをする
作業に入る前に、ログインされているかどうかをチェックします。これは、google.accounts.userオブジェクトの「checkLogin」というメソッドを使います。ログインしていなければ、そのまま処理を抜けるようにしておきます。

３．CalendarEventEntryオブジェクトを用意する
イベントの情報は、google.gdata.calendar.CalendarEventEntryというオブジェクトとして用意します。このオブジェクトをnewで作成し、タイトルや開始日時などの情報を組み込んでやります。

４．insertEntryでイベントを追加する
CalendarServiceオブジェクトの「insertEntry」メソッドで、作成したCalendarEventEntryを追加します。これで、カレンダーにイベントが追加されます。


――全体の流れはわかりましたか？　では、これも簡単なサンプルを作成し、それを見ながら理解していくことにしましょう。これは、簡単なイベント登録のサンプルです。

まず、カレンダーにアクセス可能なアカウントでログインしてからこのページにアクセスし、それから「Login」ボタンを押してください。このWebページから、Googleカレンダーにアクセスを許可するための表示が現れるので、そのまま許可をしてやります。

続いて、日付（開始日時と終了日時）とイベントのタイトルを入力し、「add」ボタンを押してください。ログインしているアカウントが、カレンダーの変更権限を持っていれば、これでイベントが追加されます。もし追加に失敗すると、エラーメッセージが表示されます。

ここでは、image.pngというイメージを<img>タグで追加していますが、これはそれぞれで好きなように変更してかまいません。また、《カレンダーID》部分には、例によって自分のカレンダーIDを入れてください。

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

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

		google.setOnLoadCallback(getMyFeed);

		function getMyFeed(){
			var service = null;
			var url = "http://www.google.com/calendar/feeds/
				《カレンダーID》/public/full";
			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_DESCENDING);
			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) {
			alert(error);
		}

		function doLogin(){
			var scope = "https://www.google.com/calendar/feeds/";
			var token = google.accounts.user.login(scope);
		}
		
		function doAction(){
			var service = null;
			var url = "http://www.google.com/calendar/feeds/
				《カレンダーID》/private/full";
			service = new google.gdata.calendar.CalendarService
				("calendar-sample");
			
			var scope = "https://www.google.com/calendar/feeds/";
			token = google.accounts.user.checkLogin(scope);
			if (token == ""){
				alert("ログインしてないよ！");
				return;
			}
			var t1 = document.getElementById("time1").value;
			var t2 = document.getElementById("time2").value;
			var title = document.getElementById("title").value;
			var start = new google.gdata.DateTime.fromIso8601(t1);
			var end = new google.gdata.DateTime.fromIso8601(t2); 
			
			var entry = new google.gdata.calendar.CalendarEventEntry();
			entry.setTitle(google.gdata.atom.Text.create(title));
			
			var when = new google.gdata.When();
			when.setStartTime(start);
			when.setEndTime(end);
			entry.addTime(when);

			var func = function(result) {
				alert("イベントを追加しました。");
				getMyFeed();
			}
			service.insertEntry(url,entry,func,handleError,
				google.gdata.calendar.CalendarEventEntry);
		}
		//-->
		</script>
	</head>
	<body>
		<h1>サンプル</h1>
		<img src="image.png">
		<input type="button" value="Login" onclick="doLogin();">
		<hr>
		<input type="text" id="time1" value="2010-01-01"><br>
		<input type="text" id="time2" value="2010-01-01"><br>
		<input type="text" id="title"><br>
		<input type="button" value="add" onclick="doAction();">
		<hr>
		<div id="view" style="color:#096;"></div>
	</body>
</html>
※関連コンテンツ

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