Tips

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

目次

はじめに

固定リンクがコピーされました

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

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

事前に必要なもの

固定リンクがコピーされました

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

開発の流れ

固定リンクがコピーされました

  1. Googleカレンダーの作成・設定
  2. kintoneアプリの設定・変更
  3. JavaScriptによるプログラムの作成
  4. 動作の確認

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

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

固定リンクがコピーされました

ステップ1

固定リンクがコピーされました

Google.com (External link) よりログインし、Googleカレンダーを開きます。

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

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

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

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

ステップ2

固定リンクがコピーされました

次にGoogle APIを利用するためにGoogleカレンダーAPIの認証情報を設定します。
まず、 Google Cloudのデベロッパーコンソール (External link) にログインします。

「選択中のプロジェクト」>「新しいプロジェクト」をクリックします。

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

ステップ3

固定リンクがコピーされました

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

検索ボックスでGoogle Calendar APIと入力し、「Google Calendar API」を選択します。

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

ステップ4

固定リンクがコピーされました

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

続いて、下記を選択します。

  • 使用するAPI：Google Calendar API
  • アクセスするデータの種類：ユーザーデータ

入力したら「次へ」をクリックします。

ステップ5

固定リンクがコピーされました

OAuth同意画面にて、「アプリ名」、「ユーザーサポートメール」、「デベロッパーの連絡先情報」を入力します。
入力したら「保存して次へ」をクリックします。

「スコープを追加または削除」>「Google Calendar API」を選択し、「更新」をクリックします。

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

ステップ6

固定リンクがコピーされました

「OAuthクライアントID」>「アプリケーションの種類」で「ウェブアプリケーション」を選択し、任意の名前を入力します。

続いて、下記を入力します。

  • 承認済みのJavaScript生成元：kintoneのURL（例：https://sample.cybozu.com）
  • 承認済みのリダイレクトURL：kintoneアプリのURL（例：https://sample.cybozu.com/k/{アプリケーションID}/）

kintoneアプリは後で作成します。

最後に「作成」をクリックすると、「クライアントID」が生成されるのでメモしておきます。
後のカスタマイズのプログラミングで使用します。

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

ステップ7

固定リンクがコピーされました

「認証情報」>「認証情報を作成」から、「APIキー」を選択します。

APIキーが作成されるので、メモしておきます。
後のカスタマイズのプログラミングで使用します。

tips
補足

「キーの制限」の設定をすることにより、キーの不正仕様や盗用を防止できます。必要に応じて設定してください。
詳細は、 Google Cloudのドキュメント：APIキーを管理 (External link) を参照してください。

ステップ8

固定リンクがコピーされました

「OAuth同意画面」>「対象」からテストユーザーを追加します。
ちなみに、画面上部の「アプリを公開」をクリックするとGoogleアカウントをもつすべてのユーザーがアプリを使用できるようになります。

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

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

固定リンクがコピーされました

ステップ1

固定リンクがコピーされました

今回は、kintoneアプリの「イベント・フェアカレンダー」を元にアプリを設定・変更します。
kintoneアプリストアより、「イベント・フェアカレンダー」を追加します。

ステップ2

固定リンクがコピーされました

アプリの設定画面から、下記テーブルを参考にしてフィールドを追加・変更します。

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

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

4. 動作の確認

固定リンクがコピーされました

上記で作成したイベント・フェアカレンダーのアプリを開き、イベント情報を入力して、「保存」します。

保存後、「公開する」ボタンをクリックすると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の概要 (External link) を参照してください。

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 (External link) を参照してください。

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

固定リンクがコピーされました

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

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の項目 (External link) を参照してください。

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で管理しているさまざまな業務データを共有できます。

参照サイト

固定リンクがコピーされました

information

このTipsは、2025年7月版kintoneで動作を確認しています。