はじめに
kintoneアプリのイベント・フェアカレンダーを利用して、イベントの日程をGoogle WorkspaceのGoogleカレンダーに連携して社内で共有します。
有料のGoogle WorkspaceのGoogleカレンダーですと社内でイベントの日程を管理し、承認後に社内でカレンダー日程をセキュアに共有したい場合などに利用できますし、設定で一般公開すれば、社外にもEメール等でイベントの告知とカレンダー日程の同期が可能になります。
1. 事前に必要なもの
- Google Workspace アカウント（有料アカウント）
- kintoneアカウント
2. 開発の流れ
以上の手順で開発して行きます。
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で確認したものになります。
サンプルコードの中に間違いを一つ見つけました。 "timezone"ではなく、"timeZone"です。
Sheldon Chenさま
cybozu developer network運営事務局です。
ご指摘ありがとうございました。記述に誤りがあり、大変申し訳ございませんでした。
修正させていただきました。
お世話になっております。
こちら、PC版では活用させていただいているのですが、スマートフォンだとうまく作動しないようです。
https://developer.cybozu.io/hc/ja/articles/202738940-PC-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3-%E6%97%A9%E8%A6%8B%E8%A1%A8
↑の記事を参考にapi呼び出し部分のコードもmobileを含むように書き換えています。
コンソールを見ると、「Failed to load resource: the server responded with a status of 400 (Bad Request)」というエラー表示が出ています。
画面に表示されるエラーも「Google イベントIDの登録に失敗しました」となっていますので、おそらくリクエストに不備があり、googleに受け取ってもらえないのでしょう。コンソールによるとイベントID自体は発行できているようですが、__REQUEST_TOKEN__に問題があるというような表示に見えます。
詳しくは分かっていないのですが、__REQUEST_TOKEN__の問題が原因でリクエストが受け付けられていない、ということでしょうか？同じ案件についてPCで同じ操作をすると成功するようです。なぜモバイルだと問題が発生するのでしょうか？
なにかご教授いただけましたら大変幸いです。
加藤 優志 様
設定の観点から考えられる原因に、「スマートフォン用のJavaScript用ファイル」の欄にファイルがアップロードされていない可能性があります。
以下の記事を参考に、「スマートフォン用のJavaScript用ファイル」欄にもファイルを適用されているか、ご確認をお願いいたします。
https://developer.cybozu.io/hc/ja/articles/360027249311
それで解決しない場合は何らかの技術的な問題がある可能性がありますので、コミュニティの方を活用ください。
コミュニティで質問する際、作成したコードとエラーメッセージと共に投稿いただけると、回答がつきやすくなります。ご参考ください。
お世話になっております。
最近勉強を始めた初心者です。初歩的なことを伺い申し訳ありません。
上記記事を参考にGoogleカレンダーへの連携までは成功しました。
追加の処理として、条件毎に登録するアカウントを変更するように加工しているのですが、なかなかうまくいきません。
具体的には、3つの文字列のフィールドがあり、その3つの中で一つでも条件に合致すれば、api_key、client_id、calendar_idの値を変更し、
登録を行うという風にしたいと思っています。
3つのフィールドの値を配列にして、条件と合致した場合、変数に代入するというところまでできたので、
if文の中にサンプルコード16行目以降を入れ込めばいいのかと思ったのですが、うまくいきません。
コンソールにはこのようなエラーが出ます。
cb=gapi.loaded_0:163 Uncaught TypeError: Cannot read property 'isSignedIn' of null
曖昧な質問で申し訳ございません。ご教授いただければ幸いです。
経理 様
お世話になっております。cybozu developer network 運営事務局でございます。
こちらのコメント欄は記事内容のフィードバック目的となっており、
記事の内容の発展などのご質問は、大変お手数ですがcybozu developer コミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います。
その際、実際のソースコードに変更を加えた部分についても記載すると、
より良い回答が得られるかと思います。
よろしくお願い致します。
お世話になっております。
こちらのサイトを元にKintoneアプリを作成しております。
以下のサイトにあるようにGoogleログインJavaScriptプラットフォームライブラリが2023年3月31日に提供終了となり、
4月以降はGoogle Identity Services ライブラリへの移行が必要となるようですが、
本サンプルアプリにも影響がありますでしょうか？
※現在のGoogle API認証情報の設定方法が記事の内容から変化していることもあり、確認させていただきました。
影響がある場合、お手数ですが改修方法についてご教示いただけないでしょうか。
https://developers-jp.googleblog.com/2022/04/gis-jsweb-authz-migration.html#:~:text=Google%20%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%20JavaScript%20%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%20%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AF%E3%80%812023%20%E5%B9%B4%203%20%E6%9C%88,%E3%82%88%E3%81%86%E3%80%81%E6%94%B9%E3%82%81%E3%81%A6%E3%81%8A%E9%A1%98%E3%81%84%E3%81%97%E3%81%BE%E3%81%99%E3%80%82
ウッドペッカー様
ご担当者様
お世話になっております。
最近、社内でkintoneを導入させていただき、
構築している最中です。
JavaScript / CSSなど初心者のためよく分かっていないのですが
こちらの記事【kintoneのイベント・フェアカレンダーの日程をGoogleカレンダーに公開しよう！】に沿って作業を行ったのですが、うまく起動しません。
以下内容に沿って、連携をいたしましたが、下内容の【6. 動作の確認】にてkintone画面の【公開する】を押しても【Google ID】が記載されず、Googleカレンダーにも予定が表示されていない状況です。
︎kintoneのイベント・フェアカレンダーの日程をGoogleカレンダーに公開しよう！
弊社ではChromeをインポートしており、セキュリテレベルは【標準保護機能】なのですが、うまく起動させる方法はございますでしょうか。
ちなみに、kintoneとGmailの連携は内容に沿って行い、うまく起動いたしました。
︎Gmail連携 - kintoneからGmailの送受信をしよう！！
原因がわからないのですが、どのようにすれば良いでしょうか。
ご教授いただけますと幸甚です。