kintoneアプリのイベント・フェアカレンダーを利用して、イベントの日程をGoogleカレンダーに連携します。
有料のGoogle WorkspaceのGoogleカレンダーの場合、社内でイベントの日程を管理し、承認後に社内でカレンダー日程をセキュアに共有したい場合などに利用できます。
また、設定で一般公開すれば、社外にもEメール等でイベントの告知とカレンダー日程の同期が可能になります。
-
Googleカレンダーの作成・設定
-
kintoneアプリの設定・変更
-
JavaScriptによるプログラムの作成
-
動作の確認
以上の手順で開発していきます。
1. Googleカレンダーの作成・設定
固定リンクがコピーされました
Google.com
よりログインし、Googleカレンダーを開きます。
左サイドメニューの他のカレンダーの右側の「+」をクリックして、「新しいカレンダーを作成」を選択します。
カレンダー名を入力し、「カレンダーを作成」ボタンをクリックし、カレンダーを作成します。
次に左メニューより、新しく作成されたカレンダーのオーバーフローメニューより、「設定と共有」を選択します。
下にスクロールすると、「カレンダーの統合」の項目内に「カレンダーID」が表示されているので、メモしておきます。
後のプログラミングで必要です。
次にGoogle APIを利用するためにGoogleカレンダーAPIの認証情報を設定します。
まず、
Google Cloudのデベロッパーコンソール
にログインします。
「選択中のプロジェクト」>「新しいプロジェクト」をクリックします。
プロジェクト名を入力し、「作成」ボタンをクリックすると、新規プロジェクトが作成されます。
「APIとサービス」>「APIとサービスを有効にする」をクリックして、「APIライブラリ」設定画面へ移行します。
検索ボックスでGoogle Calendar APIと入力し、「Google Calendar API」を選択します。
「有効にする」をクリックして、Google Calendar APIを有効にします。
「認証情報の作成」をクリックします。
続いて、下記を選択します。
- 使用するAPI:Google Calendar API
- アクセスするデータの種類:ユーザーデータ
入力したら「次へ」をクリックします。
OAuth同意画面にて、「アプリ名」、「ユーザーサポートメール」、「デベロッパーの連絡先情報」を入力します。
入力したら「保存して次へ」をクリックします。
「スコープを追加または削除」>「Google Calendar API」を選択し、「更新」をクリックします。
内容を確認して「保存して次へ」をクリックします。
「OAuthクライアントID」>「アプリケーションの種類」で「ウェブアプリケーション」を選択し、任意の名前を入力します。
続いて、下記を入力します。
- 承認済みのJavaScript生成元:kintoneのURL(例:
https://sample.cybozu.com
)
- 承認済みのリダイレクトURL:kintoneアプリのURL(例:
https://sample.cybozu.com/k/{アプリケーションID}/
)
kintoneアプリは後で作成します。
最後に「作成」をクリックすると、「クライアントID」が生成されるのでメモしておきます。
後のカスタマイズのプログラミングで使用します。
「完了」ボタンをクリックして終了します。
「認証情報」>「認証情報を作成」から、「APIキー」を選択します。
APIキーが作成されるので、メモしておきます。
後のカスタマイズのプログラミングで使用します。
「OAuth同意画面」>「対象」からテストユーザーを追加します。
ちなみに、画面上部の「アプリを公開」をクリックするとGoogleアカウントをもつすべてのユーザーがアプリを使用できるようになります。
以上でGoogleカレンダー側の設定は終了です。
2. kintoneアプリの設定・変更
固定リンクがコピーされました
今回は、kintoneアプリの「イベント・フェアカレンダー」を元にアプリを設定・変更します。
kintoneアプリストアより、「イベント・フェアカレンダー」を追加します。
アプリの設定画面から、下記テーブルを参考にしてフィールドを追加・変更します。
フィールドの種類 |
フィールド名 |
フィールドコード |
日付 |
開催日 |
event_date |
文字列(1行) |
イベント名 |
event_name |
日時 |
開催日時 |
start_datetime |
日時 |
終了日時 |
end_datetime |
文字列(複数行) |
開催場所 |
event_location |
文字列(複数行) |
イベント詳細 |
event_description |
スペース |
− |
publish_button_space |
文字列(1行) |
GoogleイベントID |
event_id |
フィールドの設定・変更後、「フォームを保存」し、最後に「アプリを更新」します。
これで、kintoneアプリの設定は終了です。
3. JavaScriptによるプログラムの作成
固定リンクがコピーされました
サンプルコードを参考にプログラムを作成します。
次の3つの変数には、
Googleカレンダーの作成・設定
で取得した値を入れてください。
api_key
:Google APIキー
client_id
:クライアントID
calendar_id
:カレンダーID
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
/*
* kintone to Google Calender sample program
* Copyright (c) 2025 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/
(() => {
'use strict';
// APIキー
const api_key = 'Your Google API key';
// クライアントID
const client_id = 'Your Google Client ID';
// カレンダーID
const calendar_id = 'Your Google Calendar ID';
// 認証用URL(読み取り/更新)
const scope = 'https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/calendar.events';
// Discovery Docs
const discovery_docs = ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'];
let tokenClient;
// Google APIライブラリの読み込み
gapi.load('client', async () => {
await gapi.client.init({
apiKey: api_key,
discoveryDocs: discovery_docs,
});
// Google認証クライアントの初期化
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: client_id,
scope: scope,
callback: '',
});
});
// レコード詳細画面の表示後イベント
kintone.events.on('app.record.detail.show', (event) => {
// 増殖バグ回避
if (document.getElementById('publish_button') !== null) return event;
// 画面下部にボタンを設置
const publishButton = document.createElement('button');
publishButton.id = 'publish_button';
publishButton.innerHTML = '公開する';
publishButton.className = 'button-simple-cybozu geo-search-btn';
publishButton.style = 'margin-top: 30px; margin-left: 10px;';
publishButton.addEventListener('click', publishEvent);
kintone.app.record.getSpaceElement('publish_button_space').appendChild(publishButton);
return event;
});
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
// フィールドを編集不可へ
event.record.event_id.disabled = true;
return event;
});
const publishEvent = async () => {
const record = kintone.app.record.get().record;
if (!record) return;
// 認証トークン取得
tokenClient.callback = async (resp) => {
if (resp.error) {
alert('Google認証に失敗しました: ' + resp.error);
return;
}
// フィールド値取得関数
const safeValue = (field) => (field && field.value ? field.value : '');
// リクエストパラメータの設定
const params = {
summary: safeValue(record.event_name) || 'タイトル未設定',
start: {
dateTime: safeValue(record.start_datetime) || new Date().toISOString(),
timeZone: 'Asia/Tokyo',
},
end: {
dateTime: safeValue(record.end_datetime) || new Date().toISOString(),
timeZone: 'Asia/Tokyo',
},
location: safeValue(record.event_location),
description: safeValue(record.event_description),
};
let request;
if (record.event_id && record.event_id.value) {
// 公開済みイベントを更新
request = gapi.client.calendar.events.update({
calendarId: calendar_id,
eventId: record.event_id.value,
resource: params,
});
} else {
// 未公開のイベントを追加
request = gapi.client.calendar.events.insert({
calendarId: calendar_id,
resource: params,
});
}
// Googleカレンダーへのイベント登録の実行
request.execute(async (resp) => {
if (resp.error) {
alert('イベントの登録に失敗しました: ' + resp.error.message);
return;
}
const body = {
app: kintone.app.getId(),
id: record.$id.value,
record: {
event_id: {
value: resp.result.id,
},
},
};
try {
await kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body);
alert('カレンダーにイベントを登録しました。');
location.reload();
} catch (error) {
alert('GoogleイベントIDの登録に失敗しました: ' + error.message);
}
});
};
tokenClient.requestAccessToken();
};
})();
|
コードのアップロード
固定リンクがコピーされました
作成したコードに適当な名前をつけ、保存します。(例:googleCalendar.js)
保存したコードを「アプリの設定」から、「JavaScript/CSSでカスタマイズ」を選択し、アップロードします。
また、Googleの認証用ライブラリと、APIクライアントライブラリを以下のURLを指定して参照します。
https://accounts.google.com/gsi/client
https://apis.google.com/js/api.js
設定を「保存」して、「アプリを更新」します。
上記で作成したイベント・フェアカレンダーのアプリを開き、イベント情報を入力して、「保存」します。
保存後、「公開する」ボタンをクリックするとGoogleアカウントへの認証画面が表示されるので、使用するアカウントをクリックします。
認証に成功すると登録したイベントがGoogleカレンダーに公開され、GoogleイベントIDが設定されます。
Googleカレンダーを確認するとイベント情報が登録されています。
Google API認証情報の設定
固定リンクがコピーされました
Googleカレンダーの作成・設定
で取得した値を変数にセットします。
api_key
:Google APIキー
client_id
:クライアントID
calendar_id
:カレンダーID
4
5
6
7
8
9
10
11
12
13
|
// APIキー
const api_key = 'Your Google API key';
// クライアントID
const client_id = 'Your Google Client ID';
// カレンダーID
const calendar_id = 'Your Google Calendar ID';
// 認証用URL(読み取り/更新)
const scope = 'https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/calendar.events';
// Discovery Docs
const discovery_docs = ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'];
|
スコープとディスカバリードックの情報の詳細は
Google Calendar APIの概要
を参照してください。
Google APIクライアントとOAuth2.0ライブラリ
固定リンクがコピーされました
Google APIのJavaScriptクライアントとOAuth 2.0ライブラリを読み込み、ロード完了後に初期化処理を実行しています。
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
let tokenClient;
// Google APIライブラリの読み込み
gapi.load('client', async () => {
await gapi.client.init({
apiKey: api_key,
discoveryDocs: discovery_docs,
});
// Google認証クライアントの初期化
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: client_id,
scope: scope,
callback: '',
});
});
|
JavaScriptクライアントとOAuth 2.0の認証情報の詳細に関しましては、
クライアントサイド ウェブ アプリケーション用の OAuth 2.0
を参照してください。
レコード詳細画面の表示後イベント
固定リンクがコピーされました
レコード詳細画面の表示後イベントは以下の関数内に記述します。
1
|
kintone.events.on('app.record.detail.show', (event) => {});
|
Googleカレンダーにイベントを公開するためのボタンを画面下部スペースに設置します。
36
37
38
39
40
41
42
43
44
|
// 画面下部にボタンを設置
const publishButton = document.createElement('button');
publishButton.id = 'publish_button';
publishButton.innerHTML = '公開する';
publishButton.className = 'button-simple-cybozu geo-search-btn';
publishButton.style = 'margin-top: 30px; margin-left: 10px;';
publishButton.addEventListener('click', publishEvent);
kintone.app.record.getSpaceElement('publish_button_space').appendChild(publishButton);
|
レコード追加時、編集時の表示後イベント
固定リンクがコピーされました
GoogleカレンダーのイベントIDは自動設定されるので、レコード追加時および編集時には編集できないように設定しています。
48
49
50
51
52
|
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
// フィールドを編集不可へ
event.record.event_id.disabled = true;
return event;
});
|
Googleカレンダーへのイベント公開
固定リンクがコピーされました
まずは、イベント・フェアカレンダーで設定したレコードのデータを取得します。
レコード取得後、Googleアカウントへ認証済みかどうかをチェックし、認証済みでない場合は、Google認証画面を呼び出します。
Google APIへの認証は、非同期となるため、非同期関数として宣言し、認証処理を待ちます。
54
55
56
57
58
59
60
61
62
63
64
|
const publishEvent = async () => {
const record = kintone.app.record.get().record;
if (!record) return;
// 認証トークン取得
tokenClient.callback = async (resp) => {
if (resp.error) {
alert('Google認証に失敗しました: ' + resp.error);
return;
}
// ...
|
次にGoogleカレンダーへ送るイベントデータのパラメーターをJSON形式で設定します。
イベントデータのパラメーターの設定は、
Google Calendar API ReferenceのEventの項目
を参照してください。
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
// リクエストパラメータの設定
const params = {
summary: safeValue(record.event_name) || 'タイトル未設定',
start: {
dateTime: safeValue(record.start_datetime) || new Date().toISOString(),
timeZone: 'Asia/Tokyo',
},
end: {
dateTime: safeValue(record.end_datetime) || new Date().toISOString(),
timeZone: 'Asia/Tokyo',
},
location: safeValue(record.event_location),
description: safeValue(record.event_description),
};
|
イベント・フェアカレンダーのデータに、Google Event IDが設定済みかをチェックします。
設定済みならGoogle Event IDをもとにデータを更新し、未設定ならイベントを追加します。
Googleカレンダーの操作に関するドキュメントは、次を参照してください。
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
let request;
if (record.event_id && record.event_id.value) {
// 公開済みイベントを更新
request = gapi.client.calendar.events.update({
calendarId: calendar_id,
eventId: record.event_id.value,
resource: params,
});
} else {
// 未公開のイベントを追加
request = gapi.client.calendar.events.insert({
calendarId: calendar_id,
resource: params,
});
}
|
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
// Googleカレンダーへのイベント登録の実行
request.execute(async (resp) => {
if (resp.error) {
alert('イベントの登録に失敗しました: ' + resp.error.message);
return;
}
const body = {
app: kintone.app.getId(),
id: record.$id.value,
record: {
event_id: {
value: resp.result.id,
},
},
};
try {
await kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body);
alert('カレンダーにイベントを登録しました。');
location.reload();
} catch (error) {
alert('GoogleイベントIDの登録に失敗しました: ' + error.message);
}
});
|
上記で設定したリクエストを実行します。
Googleカレンダーへの登録実行後、生成されたGoogleカレンダー側のイベントIDを取得し、kintone APIを呼び出し、event_id
フィールドを更新しています。
今回は、kintoneのイベント・フェアカレンダーを使って管理しているイベントの情報を、Googleカレンダーへ連携してみました。
他のGoogleのサービスもkintoneと連携して、kintoneで管理しているさまざまな業務データを共有できます。