カテゴリー内の他の記事

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

フォローする

(Author : Fuji Business International Mamoru Fujinoki)

はじめに

kintoneアプリのイベント・フェアカレンダーを利用して、イベントの日程をGoogleカレンダーに連携して公開します。

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

1. 事前に必要なもの

  • Googleアカウント
  • kintoneアカウント

2. 開発の流れ

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

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

ステップ1

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

gc-01.png

左サイドメニューのマイカレンダーより、新しいカレンダーの作成を選択します。

gc-02.png

カレンダー名を入力し、「このカレンダーを他のユーザーと共有する」をチェックした後、「このカレンダーを一般公開する」をチェックします。「カレンダーを作成」ボタンをクリックし、新しいカレンダーを作成します。

gc-03.png

ステップ2

左サイドメニューより、作成したカレンダーの右側の矢印をクリックし、サイドメニューより、カレンダー設定を選択します。

gc-04.png

カレンダーのアドレス項目にカレンダーIDが表示されるので、メモしておきます。後のプログラミングの際に必要になります。

gc-05.png

ステップ3

次にGoogle APIを利用するためにGoogleカレンダーAPIの認証情報を設定します。
まず、Google APIのデベロッパーコンソールにログインします。
画面が表示されたら、「プロジェクトを選択」をクリックします。

gc-06.png

 右上の「+」アイコンをクリックして、新規プロジェクトを作成します。

gc-27.png

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

gc-28.png

ステップ4

再び、プロジェクト選択の画面を開き、新規作成したプロジェクトを開きます。

gc-07.png

 次に左サイドメニューより、「ライブラリ」を選択し、G Suite APIsカテゴリーより、「Calendar API」を選択します。

gc-08.png

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

gc-09.png

ステップ5

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

gc-11.png

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

gc-010.png

クライアントID名を入力し、「承認済みのJavaScript 生成元」にお使いのkintoneのURLを入力し、「クライアントIDの作成」ボタンをクリックして、クライアントIDを生成します。

gc-12.png

ステップ6

次にOAuth 2.0同意画面の設定をします。メールアドレスを選択し、サービス名を適当に入力して、「次へ」ボタンをクリックします。

gc-13.png

 クライアントIDが作成されますので、メモしておきます。(後のプログラミングで使用します。)

gc-14.png

ステップ7

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

gc-15.png

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

gc-17.png

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

gc-16.png

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

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

ステップ1

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

gc-18.png

 ステップ2

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

gc-19.png

 

ステップ3

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

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

gc-20.png

gc-21.png

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

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

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

サンプルコード

解説

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 モジュール

Google APIのJavaScriptクライアントとOAuth2.0モジュールのライブラリーをロードし、認証後のコールバック関数を設定しています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コードのアップロード

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

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

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

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

gc-30.png

 

6. 動作の確認

kintoneのイベント・フェアカレンダーを開くとGoogleアカウントへの認証画面が表示されるので、メールアドレス、パスワードを入力してGoogleアカウントへログインします。(Googleカレンダーを作成したアカウントを選択してください。)

gc-22.png

イベントのデータを追加し、保存します。

gc-23.png

 保存後、「公開する」ボタンが表示されるのでクリックして登録したイベントをGoogleカレンダーに公開します。

 gc-25.png

公開後、GoogleイベントIDが設定されます。

gc-29.png

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

gc-24.png

gc-26.png

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

7. まとめ

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

8. 参照サイト

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

9. 関連プラグイン

今回はサンプルの紹介ですが、サイボウズのパートナーが販売する有償のプラグインに類似の機能のものがあるため、こちらも紹介します。

できることとしては類似していますが、以下のようなプラスアルファの機能があります。

  • Googleカレンダー風にドラッグ&ドロップで変更が出来る
  • 登録するGoogleユーザーアカウントを選択できる

気になる方は、双方試してみてはいかがでしょうか。

Googleカレンダー™対応連携プラグイン(株式会社ノベルワークス)

このサンプルは、2017年11月版 kintoneで確認したものになります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
Sheldon Chen

サンプルコードの中に間違いを一つ見つけました。 "timezone"ではなく、"timeZone"です。

Avatar
cybozu Development team

Sheldon Chenさま

cybozu developer network運営事務局です。

ご指摘ありがとうございました。記述に誤りがあり、大変申し訳ございませんでした。

修正させていただきました。

ログインしてコメントを残してください。