Google CalendarをJavaScriptで操作する(基本処理)

前記事で準備が完了したので、’Google APIs Client Library for JavaScript’を使ってGoogle Calendarにアクセスしてみる。操作方法はGoogleの他のライブラリ(例えばGoogle+)と同じで、認証やメソッドの呼び出しなどは流用/共通化できる。

JavaScriptライブラリ自体のドキュメントは、固有の機能(ライブラリ自身のロードや認証)のみなので、個々のメソッドについては各ライブラリのドキュメントを参照する。
・リファレンスはこちら。
・参考になるページはこちら。

• 認証する
  サンプルとして挙がっている流れは以下。
  [HTML]
  (0)Google側が提供する認証ページへの誘導ボタン(リンク)をHTMLで用意しておく
  [JavaScript]
  (1)’Client ID’と’API Key’を使って認証済かを確認する (gapi.auth.authorize())
  (2)認証済の場合は、ライブラリをロードして必要な処理を実施する
  – あわせて誘導ボタンを無効化するなどの処理を行う。
  (3)未認証の場合は、利用者に認証ボタンをクリックしてもらう
  – 認証ページにリダイレクトする。 (gapi.auth.authorize())
  – 完了後もとのページに戻ってくる。
• カレンダーの一覧を取得する – document

  // JavaScript
  // ライブラリをロードする
    gapi.client.load('calendar', 'v3', function(){
      // リクエストメソッド設定(パラメータなし)
      var request = gapi.client.calendar.calendarList.list();
      // リクエスト実行
      request.execute(function(resp){
        console.debug(resp);
        for (var i in resp.items){
          // カレンダーIDとカレンダー名を表示
          console.debug('id:' + resp.items[i].id + ' summary:' + resp.items[i].summary);
        }
      });
  });
  

  個々のカレンダーにアクセスするには、これで得られるカレンダーIDを使う。なお、カレンダーIDは自分のGoogle Calendarのページから手動で調べることもできる。(‘マイカレンダー’で対象カレンダーを選択 → ‘カレンダーの設定’ → カレンダーの詳細ページの’カレンダーのアドレス’に表示されている値。メールアドレス形式になっている。)

• 予定(Event)の一覧を取得する – document

  // JavaScript
  gapi.client.load('calendar', 'v3', function(){
    // リクエストメソッド＆パラメータを設定
    var request = gapi.client.calendar.events.list({  // メソッド
      'calendarId': gcCalenderID  // 取得したカレンダーID(または'primary')
    });
    // リクエスト実行
    request.execute(function(resp){
      console.debug(resp);
      for (var i in resp.items){
        // 予定開始日時/終了日時とイベントIDを表示
        var a = resp.items[i];
        console.debug('start:' + a.start.dateTime + ' end:' + a.end.dateTime + 
          ' summary:' + a.summary + ' eventid:' + a.id);
      }
    });
  });
  

  個々のイベントにアクセスするには、これで得られるイベントIDを使う。
  なお、デフォルトのカレンダーを対象にする場合は、カレンダーIDに固定の文字列’primary’を指定すればOK。

• 予定(Event)を登録(insert)する – document

  // JavaScript
  gapi.client.load('calendar', 'v3', function(){
    var resource = {
      'summary': 'Appointment', // 予定のタイトル
      'start': { // 開始日・時刻
        'dateTime': '2013-04-16T10:00:00.000+09:00'
       },
      'end': { // 終了日・時刻
        'dateTime': '2013-04-16T10:25:00.000+09:00'
       },
      'location': 'Somewhere', // 場所
      'description': 'contents of this event' // 説明	
    };
  
    var request = gapi.client.calendar.events.insert({
      'calendarId': gcCalenderID,// デフォルトカレンダー：'primary'
      'resource': resource
    });
  
    request.execute(function(resp){
      // console.debug(resp);
    });
  });
  

  ドキュメントには明記されていないが、イベント内容のオブジェクトを生成し、’resource’パラメータを指定して登録する。
  開始(終了)日時に’date’を指定すると終日の予定になる。またdateTimeプロパティのフォーマットはISO-8601フォーマットで、新しいブラウザであれば、date.toISOString() で日付(Date)オブジェクトからこの形式に変換できる。
  参考にしたサイトはこちら。

• 個々の予定(Event)を取得(get)する – document

  // JavaScript
  // リクエストメソッド＆パラメータを設定
  var request = gapi.client.calendar.events.get({  // メソッド
    'calendarId': gcCalenderID,  // 対象となるカレンダーのID
    'eventId': 'ncv3g2a5v35pp82jcpsla3k89o' // 取得したイベントID
  });
  // リクエスト実行
  request.execute(function(resp){
    console.debug(resp);
    var a = resp.result;
    console.debug('start:' + a.start.dateTime + ' end:' + a.end.dateTime +
     ' summary:' + a.summary + ' eventid:' + a.id);
  });
  

  一覧取得の結果はresp.item[]として得られたが、get()の結果はresp.resultで得られる。

• 予定を更新(update)する – document

  // JavaScript
  // リクエストメソッド＆パラメータを設定
  sequence++;
  var resource = {
    'sequence': sequence // あらかじめ元のsequenceを1増やしておく！
  }
  var request = gapi.client.calendar.events.update({  // メソッド
    'calendarId': gcCalenderID,  
    'eventId': 'ncv3g2a5v35pp82jcpsla3k89o',
    'resource': resource // 
  });
  // リクエスト実行
  request.execute(function(resp){
  
  });
  

  ドキュメントには記載がないが、get()で得られたイベント内容のプロパティsequenceの値を1増やさないと更新時にエラーになる。(初回更新のみ成功する。)
  参考にしたページはこれ。
  “The docs are really sketchy on this but it seems you have to increment the sequence property each time you do an update. It’s a revision control mechanism.”