Google Calendar API (3/6)

では、作成したサンプルのスクリプトを順に解説していきましょう。先に整理した流れにそって説明していきます。それぞれのスクリプト部分は、下のリストにまとめてありますので、それを参照しながら読んでください。


１．ライブラリのロード
Google AJAX APIのロードは、<script>タグで、src="http://www.google.com/jsapi"を指定して読み込みます。これでライブラリをロード後、「google.load」というメソッドを呼び出してライブラリをロードします。ここでは、引数に("gdata","2")と指定をしていますが、これでGData（Googleのデータ）を利用するためのライブラリがロードされます。

その後、「google.setOnLoadCallback」というメソッド呼び出していますね。これは、ライブラリのロードが完了したところで処理を実行するためのものです。Google AJAX APIでは、ライブラリのロードはAjaxを利用して行うため、完了後に何かの処理をしたければ、このgoogle.setOnLoadCallbackにコールバック関数を設定してやる必要があります。


２．CalendarServiceの用意
google.gdata.calendar.CalendarServiceオブジェクトをnewで作成します。引数には、このアプリケーションの名前を指定してやります。これは適当でかまいません。


３．CalendarEventQueryの用意
google.gdata.calendar.CalendarEventQueryオブジェクトを作成します。引数には、アクセス先のアドレスを渡します。これで作成したCalendarEventQueryに、必要な設定を行っていいます。設定は、オブジェクトに用意されているメソッドを呼び出して行います。ここでは、以下のような設定をしています。

setOrderBy
エントリーの並び順を指定するものです。setOrderByはどの値を元に並べ替えるかを示すもので、google.gdata.calendar.CalendarEventQueryに用意されている値で指定をします。ここでは、ORDERBY_START_TIMEを指定し、イベントの開始時間順にしています。

setSortOrder
setSortOrderは、昇順降順を指定するものです。これは、google.gdata.calendar.CalendarEventQueryに用意されているSORTORDER_ASCENDINGまたはSORTORDER_DESCENDINGのいずれかを指定します。

setSingleEvents
シングルイベント（通常のイベントはこれです）を取得する場合、これをtrueに設定します。

setMaxResults
最大項目数を設定します。

setMinimumStartTime/setMaximumStartTime
取得するイベントの開始日時・終了日時をそれぞれ指定します。これらで指定された範囲内のイベントを取り出します。これらは、JavaScriptのDateオブジェクトなどではなく、google.gdata.DateTimeというオブジェクトとして指定してやらなければいけません。ここでは、google.gdata.DateTime.fromIso8601を呼び出しています。このfromIso8601は、ISO-8601形式で表した日時のテキストを元にDateTimeオブジェクトを生成します。

４．データの取得を開始する
準備が整ったら、アクセスを開始します。これは、CalendarServiceの「getEventsFeed」を呼び出します。これは３つの引数を用意します。

[CalendarService].getEventsFeed( [CalendarEventQuery], コールバック関数, 例外関数 )

第１引数には、先ほど作成したCalendarEventQueryオブジェクトを渡します。第２引数には、アクセス完了後に呼び出されるコールバック関数を指定します。第３引数は、例外が発生するなどしてアクセスに失敗した時に実行する関数を指定します。

これで、CalendarServiceへのアクセス実行まではだいたいわかりました。後は、アクセス完了後のコールバック関数での処理についてですね。

(by. SYODA-Tuyano.)

※リストが表示されない場合

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

１．ライブラリのロード
<script type="text/javascript"
	src="http://www.google.com/jsapi"></script>

google.load("gdata","2");
		
google.setOnLoadCallback(getMyFeed);


２．CalendarServiceの用意
service = new google.gdata.calendar.CalendarService("calendar-sample");


３．CalendarEventQueryの用意
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);