kintoneのイベント・フェアカレンダーの日程をGoogleカレンダーに公開しよう！

はじめに

kintoneアプリのイベント・フェアカレンダーを利用して、イベントの日程をGoogle WorkspaceのGoogleカレンダーに連携して社内で共有します。

有料のGoogle WorkspaceのGoogleカレンダーですと社内でイベントの日程を管理し、承認後に社内でカレンダー日程をセキュアに共有したい場合などに利用できますし、設定で一般公開すれば、社外にもEメール等でイベントの告知とカレンダー日程の同期が可能になります。

1. 事前に必要なもの

• Google Workspace アカウント（有料アカウント）
• kintoneアカウント

2. 開発の流れ

• Googleカレンダーの作成・設定
• kintoneアプリの設定・変更
• JavaScriptによるプログラムの作成

以上の手順で開発して行きます。

3. Googleカレンダーの作成・設定

ステップ１

Google.comより、ログインし、右上Googleアプリアイコンより、カレンダーを選択します。

左サイドメニューの他のカレンダーの右側の「+」をクリックして、「新しいカレンダーを作成」を選択します。

 カレンダー名を入力し、「カレンダーを作成」ボタンをクリックし、カレンダーを作成します。

次に左メニューより、新しく作成されたカレンダーのオーバーフローメニューより、「設定と共有」を選択します。

「アクセス権限」のセクションにおいて、「{組織名}で利用できるようにする」をチェックします。

ドロップダウンより「予定の表示（全ての予定の詳細）」を選択します。

次に「特定ユーザーとの共有」設定で、「ユーザーを追加」をクリックし、組織内のユーザーのメールアドレスを追加します。

また「権限」のドロップダウンで「予定の変更」を選択します。

「送信」ボタンをクリックすると指定したユーザーに招待状が送信されます。

指定したユーザーが招待状を承認することにより、作成した「イベント・フェアカレンダー」が共有できるようになります。

「設定」において、さらに下の項目にスクロールすると「カレンダーの統合」の項目内に「カレンダー ID」が表示されているので、メモしておきます。後のプログラミングの際に必要になります。

ステップ２

次にGoogle APIを利用するためにGoogleカレンダーAPIの認証情報を設定します。
まず、Google APIのデベロッパーコンソールにログインします。
ダッシュボード画面が表示されたら、下の画像のように右上の「プロジェクト作成」をクリックします。

 プロジェクト名を入力し、「作成」ボタンをクリックすると、新規プロジェクトが作成されます。

 

ステップ３

「APIとサービスの有効化」をクリックして、「APIライブラリ」設定画面へ移行します。

G Suite カテゴリーより、「Google Calendar API」を選択します。

「有効にする」をクリックして、Google Calendar API を有効にします。

ステップ４

右上の「認証情報を作成」をクリックします。

使用するAPIに「Google Calendar API」を選択し、APIを呼び出す場所に「ウェブブラウザ（JavaScript）」、アクセスするデータの種類に「ユーザーデータ」を選択し、「必要な認証情報」をクリックします。

「OAuth同意画面の設定」が表示されるので、「同意画面を設定」をクリックする。

ステップ５

アプリを使用するユーザーのタイプを選択し、「作成」をクリックします。今回は、「内部」を選択しました。尚、このオプションは、有料アカウントの場合のみ選択可能です。

 OAuth同意画面にて、「同意を求めるアプリの名前」を入力し、「ユーザーサポートメール」を選択します。

 「承認済みドメイン」にお使いのkintoneのドメイン名を入力（例：cybozu.com）し、「デベロッパーの連絡先情報」にメールアドレスを入力、「保存して次へ」をクリックします。

スコープに「Google Calendar API」を選択し、「更新」をクリックします。

内容を確認して、「保存して次へ」をクリックします。

アプリ登録の概要を確認し、「ダッシュボードに戻る」をクリックし、「OAuth同意画面」の設定を完了します。

ステップ６

次に認証情報設定の画面に戻り、OAuth 2.0 クライアントに適当な名前を入力し、「承認済みのJavaScript 生成元」にお使いのkintoneのURLを入力（例；https://{サブドメイン}.cybozu.com）、また、「承認済みのリダイレクトURI」には、後に作成するkintoneアプリのURIを入力（例：https://{サブドメイン}.cybozu.com/k/{アプリケーションID}/）します。

最後に「OAuth クライアントIDの作成」ボタンをクリックして、クライアントIDを生成します。

クライアントIDが作成されますので、メモしておきます。（後のカスタマイズのプログラミングで使用します。）

「完了」ボタンをクリックして、終了します。

ステップ７

再び、「認証情報を作成」メニューから、今度は、「APIキー」を選択します。

APIキーが作成されますので、メモしておきます。

左サイドメニューの「認証情報」をクリックすると生成した認証情報が確認できます。

以上でGoogleカレンダー側の設定は終了です。

4. kintoneアプリの設定・変更

ステップ１

今回は、kintone アプリの「イベント・フェアカレンダー」を元にアプリを設定・変更します。
kintoneアプリストアより、左サイドメニュー上部のアプリストア検索欄に「イベント」と入力し、検索します。「イベント・フェアカレンダー」が表示されますので、「このアプリを追加」をクリックします。

ステップ２

アプリを開いて、右上のギアアイコンをクリックして、アプリの設定画面に移行します。

ステップ３

下記テーブルを参考にフォームにフィールドの追加・変更を行います。

フィールドの種類	フィールド名	フィールドコード
日付	開催日	event_date
文字列（１行）	イベント名	event_name
日時	開催日時	start_datetime
日時	終了日時	end_datetime
文字列（複数行）	開催場所	event_location
文字列（複数行）	イベント詳細	event_description
スペース	−	publish_button_space
文字列（１行）	GoogleイベントID	event_id

フィールドの設定、変更後、「フォームを保存」し、最後に「アプリを更新」します。

これで、kintoneアプリの設定は終了です。

5. JavaScriptによるプログラムの作成

下記サンプルコードを参考にプログラムを作成します。

サンプルコード

コードのアップロード

作成したコードに適当な名前をつけ、保存します。（例：google-calendar.js）

以上のコードを「アプリの設定」から、「JavaScript/CSSでカスタマイズ」を選択し、アップロードします。

また、Google APIのJavaScriptクライアントを以下のURLを指定して参照します。
https://apis.google.com/js/api.js

設定を「保存」して、「アプリを更新」します。

6. 動作の確認

上記で作成したイベント・フェアカレンダーのアプリを開き、新規イベントを追加します。

イベント情報を入力して、「保存」します。

保存後、「公開する」ボタンが表示されるのでクリックするとGoogleアカウントへの認証画面が表示されるので、メールアドレス、パスワードを入力してGoogleアカウントへログインします。

認証が成功すると登録したイベントがGoogleカレンダーに公開され、GoogleイベントIDが設定されます。

Googleカレンダーを確認するとイベント情報が公開されています。

既に公開済みのイベントはイベント・フェアカレンダーでイベント情報を更新し、公開ボタンを再びクリックすれば、Googleカレンダー側も自動で更新できます。（今回は削除機能は作成していません。）

 

プログラムの解説

Google API認証情報の設定

Googleカレンダーの作成・設定で取得した、Google API キー、クライアントID、カレンダーIDの値を変数にセットします。

以下コードの2行目のapi_keyにはGoogle API キー、4行目のclient_idにはクライアントID、6行目のcalendar_idにカレンダーIDの値をセットします。

スコープとディスカバリードックの情報の詳細はGoogle Calendar APIのガイドを参照してください。

Google API クライアントとOAuth2.0ライブラリー

Google APIのJavaScriptクライアントとOAuth2.0モジュールのライブラリーをロードし、ロード完了時に呼び出すコールバック関数を設定しています。

JavaScriptクライアントとOAuth 2.0の認証情報の詳細に関しましては、OAuth 2.0 for Client-side web applicationsを参照してください。

レコード詳細画面の表示後イベント

レコード詳細画面の表示後イベントは以下の関数内に記述します。

Google カレンダーにイベントを公開するためのボタンを画面下部スペースに設置します。また、イベントリスナーにボタンのクリック時に呼び出される関数を設定しています。

レコード追加時、編集時の表示後イベント

Google カレンダーのイベントIDは自動設定されるので、レコード追加時及び編集時には編集できないように設定しています。

Googleカレンダーへのイベント公開

まずは、イベント・フェアカレンダーで設定したレコードのデータの取得を行います。

レコードのデータ取得後、すでにGoogle アカウントへ認証済みかチェックし、もし、認証済みでない場合は、Google認証画面を呼び出します。

Google APIへの認証は、非同期となるため、非同期関数として宣言し、認証処理を待ちます。

次にGoogleカレンダーへ送るイベントデータのパラメーターをJSON形式で設定します。

イベントデータのパラメーターの設定は、Google Calendar API ReferenceのEventの項目を参照してください。

イベント・フェアカレンダーのデータにすでにGoogle Event ID が設定済みかチェックし、すでに設定済みであればGoogle Event IDによりデータを更新し、未設定ならばイベントを追加します。

Google カレンダーへのイベントの追加は、Insertの項目をイベントの更新は、Updateの項目を参照してください。

上記で設定したリクエストを実行します。Googleカレンダーへの登録実行後、生成されたGoogleカレンダー側のイベントIDを取得し、kintone APIを呼び出し、event _idフィールドを更新しています。

7. まとめ

今回は、kintoneのイベント・フェアカレンダーを使って、イベントの情報を社内的に管理し、承認されたイベントを公開して、Google カレンダーで社内で共有できるように連携してみました。他のGoogle Workspaceのサービスもkintoneと連携して、様々な業務データの内部管理と承認済みデータを社内共有することも可能だと思います。

8. 参照サイト

Google Calendar API Guides
Google Identity Platform
Google Calendar API JavaScript Quickstart

このTipsは、2020年12月版 kintoneで確認したものになります。