kintoneからGoogle Calendarにイベントを登録してみる

こんにちは。
Three Hands Worksの小林です。
前回、前々回とkintoneからGoogleのCalendar APIを利用するための準備について述べました。

kintoneのカスタマイズビューにGoogleカレンダーを表示する。
GoogleのクライアントIDを発行する
今回はようやくGoogle Calendar APIを利用して実際にGoogleカレンダーにkintoneからイベントを登録してみたいと思います。

 

今回のポイント

では今回の作業ポイントです。

  • エンドポイントの確認
  • kintone側からのAPI呼び出し実装
  • kintoneアプリの作成

順番に見て行きましょう。

 

エンドポイントの確認

エンドポイントの確認にはAPIリファレンスを利用します。
参照元:Google Calendar API
今回はイベントの登録をするので、「Events: insert」を使います。
参照元: Events: insert
リクエストURLは以下です。

POST https://www.googleapis.com/calendar/v3/calendars/[calendarId]/events

calendarIdはイベントを登録するカレンダーごとに異なります。
Googleカレンダーのヘルプからアドレス取得に関する部分を抜粋しておきます。

1.パソコンで Google カレンダーを開きます。
2.右上にある設定アイコン settings gear button > [設定] をクリックします。
3.[カレンダー] タブを開きます。
4.共有するカレンダーの名前をクリックします。
5.[カレンダーのアドレス] セクションで、カレンダーを共有する方法に応じて [XML]、[ICAL]、または [HTML] ボタンのいずれかをクリックします。詳しくは、上記の「カレンダーのアドレスについて」セクションをご覧ください。
6.カレンダーの一般公開ウェブアドレスが記されたウィンドウが開きます。このリンクをコピーし、カレンダーを共有します。
参照元:一般公開の Google カレンダーを作成、管理する
「カレンダーのアドレスを使用してリンクとして共有する」の項目を御覧ください。

この部分ですね。

カレンダーID確認

 

kintone側からのAPI呼び出し実装

続いて、kintone側に登録するJavaScriptの実装です。
各処理についての説明はソース内のコメントを参照してください。

 

 

kintoneアプリの作成

最後にkintoneアプリの作成ですが、注意すべきはJavaScriptの登録です。
上述のソースをアップデートして登録することと、Googleのclient.jsをURL指定で登録する必要があります。
順番はclient.js→作成したJSファイルです。
登録するURLは以下になります。

https://apis.google.com/js/client.js
このように設定してください。
JavaScriptカスタマイズ画面
アプリ自体は前回作成したアプリを利用しましょう。
前回と異なるのはフォームにカレンダー登録用のフィールドを追加したことです。
以下を参考にフィールドの設定を行ってください。

フィールド名 フィールドコード
開始日時 startdatetime 日時
終了日時 enddatetime 日時
件名 event 文字列(1行)
概要 description 文字列(1行)
場所 location 文字列(1行)
ボタン用スペース g_cal(要素ID) スペース

こんな感じです。

フィールド設定画面

 

動作確認

では動作確認をしてみたいと思います。
kintone側のアプリを開きデータの登録を行ないます。
データ登録画面
入力が済んだら保存して、詳細画面を開きましょう。
スペースの位置に「カレンダー登録」ボタンが表示されているかと思います。
クリックしてみてください。
詳細画面
Googleのログインが表示されますので、ログインを行ってください。
ログイン
一番最初にカレンダーへアクセスする場合は許可のリクエストがされます。
「承認する」をクリックしてください。
許可のリクエスト
アラートの表示を確認してスケジュールの登録が完了します。
スケジュール登録成功
前回作成したカスタムビューを開き、Googleカレンダーに無事スケジュールが登録されているか確認します。
kintoneカスタムビュー

カレンダーに無事表示されていればkintoneとGoogle Calendar APIとの連携は成功です。
お疲れ様でした。