【Garoon JavaScript API】ガルーンのスケジュールをkintoneに連携する

Garoon 開発 Tips

【Garoon JavaScript API】ガルーンのスケジュールをkintoneに連携する

概要

Garoon から外部の API を実行する API を使って、Garoon のスケジュールのデータを kintone のアプリに登録します。

前提条件と注意事項

このカスタマイズには、クラウド版 Garoon またはパッケージ版 Garoon 4.6 以降と kintone のスタンダードコースの契約が必要です。
次の項目については対象外となります。
- 繰り返し予定
- 組織の参加者
- 予定情報：施設、添付ファイル、会社情報、詳細設定
- リモートアクセスモード
- 多言語
- モバイル
- kintone から Garoon へのデータ同期

できること

プロキシAPIの機能(外部APIを実行する仕組み) では、外部サービスへデータを登録/更新する際のアクセストークンをコード上に保持しないで連携できるというメリットがあります。

今回は外部サービス = kintone として連携します。機能は次のとおりです。

Garoon の予定メニュー連携のボタンを押す。
- kintone アプリに未登録の場合 ⇒ 登録
- kintone アプリに登録済みの場合 ⇒ 更新
- Garoon のコメントは kintone アプリのテーブルにコメント数分登録

スケジュールの情報について、Garoon のコメントとは異なり翌日以降も kintone のレコードコメント上でコミュニケーションをとったり、プロセス管理でステータスを設定したりできます。

完成イメージ

Garoon の予定メニュー連携を利用してスケジュール詳細画面にボタンを表示し、ボタンをクリックすると、あらかじめ指定した kintone のアプリにデータが登録されます。
予定メニュー連携については以下のヘルプを参照してください。

Garoon ヘルプ - 予定メニュー連携の設定クラウド版・パッケージ版

今回は kintone のアプリには JavaScript/CSS ファイルの設定は不要です。

Garoon のスケジュールの設定にのみ、JavaScript/CSS を適用しカスタマイズします。
kintone アプリのフィールドコードは利用するため、まず kintone アプリの設定をします。

kintone アプリの設定手順

Garoonの設定手順

今回の要件は Garoon の予定データを kintone に連携したいというものです。
この Tips が書かれた 2017 年 8 月版の環境では、スケジュール JavaScript API は一覧のイベントのみで、また予定データを取得するといった機能が搭載されていませんでした。
そのため Garoon の予定メニュー連携の機能を使って、HTML からファイル管理上の JavaScript ファイルやその他のライブラリを呼び出すという方法で実装する Tips となっています。

1. アプリの作成

最初は kintone のアプリを作成します。
アプリの具体的な作成方法は、以下のヘルプを参照してください。
アプリをはじめから作成する～FAQアプリを作ってみよう～

1-1. フォーム

フィールドは以下のとおり設定してください。
フィールドコードは、Garoon 側に設定する JavaScript コード内でそれぞれのフィールドを指定するための一意の文字列となります。
間違えないように設定してください。

フィールド名	フィールドコード	フィールドタイプ	備考
イベントID	EventId	文字列（一行）
タイトル	Title	文字列（一行）
開始日時	StartDate	日時
終了日時	EndDate	日時
参加者	AttendUser	ユーザー選択
メモ	Memo	文字列（複数行）
コメント日時（テーブル）	CommentDate	日時	「コメント日時」から「コメント内容」まではテーブルとして設定します。
コメント登録者（テーブル）	CommentUser	ユーザー選択
コメント内容（テーブル）	CommentContents	文字列（複数行）
-	CommentTable	テーブル	上記3つのフィールドのテーブルのフィールドコード

1-2. APIトークンの生成

[設定]タブ >「API トークン」に移動し、「生成する」ボタンを押して API トークンを生成します。「レコード追加」「レコード編集」にチェックを入れます。

API トークンはプロキシ API の設定画面で入力しますので、控えておいてください。

最後に、アプリの設定画面に戻って「アプリを公開」を押したら、kintone アプリの設定は完了です！
Garoon 側で設定する JavaScript ファイルの中に kintone のアプリ ID を入力しますので、こちらも控えておいてください。

例）https://sample.cybozu.com/k/{アプリID}/

Garoonの設定手順

今回は Garoon の予定データを kintone に連携します。
Garoon の予定メニュー連携の機能を使って、HTML からファイル管理上の JavaScript ファイルやその他のライブラリを呼び出すという方法で実装しました。

1. プロキシAPIの設定

管理画面の「API」>「プロキシ API の設定」で、次の 3 つのプロキシコードの設定を追加します。
管理画面の使用方法については、Garoon ヘルプクラウド版・パッケージ版も参照してください。

getkintoneRecord
registerkintoneRecord
updatekintoneRecord

それぞれ、次の表と画面を参考にして設定してください。
画面では Basic 認証を利用した環境のため、キーに「Authorization」、値に「Basic」と「Basic 認証のユーザー名:Basic 認証のパスワード を Base64 エンコードした値」を設定しています。

プロキシAPIの設定画面の主な項目

プロキシコード	ステータス	メソッド	ヘッダー（キー:値）	説明
getkintoneRecord	有効	GET	X-Cybozu-API-Token: kintoneで生成したAPIトークン	kintoneデータ取得用プロキシコード。登録か更新かの判別のために必要です。
registerkintoneRecord	有効	POST	X-Cybozu-API-Token: kintoneで生成したAPIトークン Content-Type:application/json	kintoneデータ登録用プロキシコード。該当イベントIDがない場合、kintoneに登録します。
updatekintoneRecord	有効	PUT	X-Cybozu-API-Token: kintoneで生成したAPIトークン Content-Type:application/json	kintoneデータ更新用プロキシコード。該当イベントIDがある場合、kintoneを更新します。

getkintoneRecordの詳細画面

registerkintoneRecordの詳細画面

updatekintoneRecordの詳細画面

2. サンプルコード

次のサンプルコードをエディタにコピーして、ファイル名を「grkin_common.js」、文字コードを「UTF-8」で保存します。
ファイル名は任意ですが、ファイルの拡張子は「.js」にしてください。
14 行目の kintone アプリ 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


/**
 * Garoon JavaScript APIを使ったサンプルプログラム
 * 「grkin_common.js」ファイル
 * Copyright (c) 2017 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(function() {
  'use strict';
  window.garoonScheduleKintone = {
    kintone: {
    // kintoneアプリID
      appId: 17256,
      fieldCode: {
      // タイトルのフィールドコード
        title: 'Title',
        // 開始日時のフィールドコード
        startDate: 'StartDate',
        // 終了日時のフィールドコード
        endDate: 'EndDate',
        // 参加者のフィールドコード
        attendees: 'AttendUser',
        // メモのフィールドドコード
        memo: 'Memo',
        // コメントテーブルのフィールドコード
        commentTable: 'CommentTable',
        // コメント日時のフィールドコード
        commentDate: 'CommentDate',
        // コメント登録者のフィールドコード
        commentUser: 'CommentUser',
        // コメント内容のフィールドコード
        commentContents: 'CommentContents',
        // イベントIDのフィールドコード
        eventId: 'EventId'
      }
    },
    garoon: {
    // 登録のプロキシコード
      registerForProxyCode: 'registerKintoneRecord',
      // 更新のプロキシコード
      updateForProxyCode: 'updateKintoneRecord',
      // 取得のプロキシコード
      getForProxyCode: 'getKintoneRecord'
    }
  };
})();

次の JavaScript ファイルをダウンロードしてください。
文字化けする可能性があるため、右クリックし、直接ダウンロードしてください。
こちらのファイルは修正せず、そのまま使用してください。

grkin_schedule.js ファイル

ポイント

プロキシ API を使って kintone API を実行している箇所を抜粋します。

GET

387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403


        // Execute the kintone API(GET)
        garoon.base.proxy.send(
          GAROON_PROXY_CODE_FOR_GET,
          KintoneCtl.createKintoneApiUrl('/k/v1/records', params),
          'GET',
          {},
          {},
          function(data, status, headers) {
            if (status !== 200) {
              // 略
            }
            resolve(data);
          },
          function(error) {
            // 略
          }
        );

POST

478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499


        // Execute the kintone API(POST)
        garoon.base.proxy.send(
          GAROON_PROXY_CODE_FOR_REGISTER,
          KintoneCtl.createKintoneApiUrl('/k/v1/record'),
          'POST',
          {},

          JSON.stringify(postParam),
          function(resp, status, headers) {
            Spin.hideSpinner();

            if (status !== 200) {
              swal('Error!', ERROR_MESSAGE_REGISTRATION_FAILURE, 'error');
            } else {
              swal('SUCCESS!', INFO_MESSAGE_REGISTRATION_SUCCESS, 'success');
            }
          },
          function(error) {
            Spin.hideSpinner();
            swal('Error!', ERROR_MESSAGE_REGISTRATION_FAILURE, 'error');
          }
        );

PUT

571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592


        // Execute the kintone API(PUT)
        garoon.base.proxy.send(
          GAROON_PROXY_CODE_FOR_UPDATE,
          KintoneCtl.createKintoneApiUrl('/k/v1/record'),
          'PUT',
          {},

          JSON.stringify(putParam),
          function(resp, status, headers) {
            Spin.hideSpinner();

            if (status !== 200) {
              swal('Error!', ERROR_MESSAGE_UPDATE_FAILURE, 'error');
            } else {
              swal('SUCCESS!', INFO_MESSAGE_UPDATE_SUCCESS, 'success');
            }
          },
          function(error) {
            Spin.hideSpinner();
            swal('Error!', ERROR_MESSAGE_UPDATE_FAILURE, 'error');
          }
        );

3. JavaScriptとCSSファイルのアップロード

grkin_common.js と grkin_schedule.js をファイル管理に保存します。
sweetalert_button_grn.css をファイル管理に保存します。
sweetalert_button_grn.css は SweetAlert の表示崩れを防ぐ css です。詳細はこちらを参照してください。
sweetalert_button_grn.css の入手方法：
1. https://github.com/garoon/css-for-SweetAlert にアクセスします。
2. [Clone or download]ボタンをクリックして、[Download ZIP]を選択します。
3. ダウンロードした zip ファイルを解凍します。
4. 解凍したファイルの「css」フォルダー以下の「sweetalert_button_grn.css」を利用します。

このとき、それぞれのファイルのダウンロードリンクをのちほどメニュー連携で使うので控えておいてください。

ファイルの詳細から「ファイル右クリック→リンクのアドレスをコピー」でダウンロードリンクが生成できます。

管理画面の「スケジュール」>「予定メニュー連携」>「予定メニュー連携を追加する」で、既存または新規の予定メニューの項目に、以下の HTML コードを記述します。

6～8 行目の grkin_common.js と grkin_schedule.js、sweetalert_button_grn.css のダウンロードリンクについては、ご使用の環境に合わせて修正ください。
また、grkin_common.js と grkin_schedule.js の順番を間違えないよう、ご注意ください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<script src="https://js.cybozu.com/jquery/3.2.0/jquery.min.js"></script>
<script src="https://js.cybozu.com/spinjs/2.3.2/spin.min.js"></script>
<script src="https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.min.js"></script>
<script type="text/javascript" src="https://js.cybozu.com/momentjs/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://js.cybozu.com/moment-timezone/0.5.13/moment-timezone-with-data.min.js"></script>
<script src="/g/cabinet/download.csp/-/grkin_common.js?fid=28&ticket=&hid=10&.js"></script>
<script src="/g/cabinet/download.csp/-/grkin_schedule.js?fid=29&ticket=&hid=10&.js"></script>
<link rel="stylesheet" href="/g/cabinet/download.csp/-/sweetalert_button_grn.css?fid=30&ticket=&hid=10&.css">
<link rel="stylesheet" href="https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.css">

<input type="button" onClick="garoonScheduleKintone.registerKintoneRecord();" value="kintone登録">

「往訪」メニューに連携させるよう記述した例が以下の画面です。

以上で設定は完了です。
完成イメージのとおりに動けば成功です。
お疲れさまでした。

おわりに

Garoon のスケジュールと kintone を連携し、議事録管理や案件管理に使うことができそうです。フィードバックをお待ちしています。

変更履歴

2020/02/13
- sweetalert_button_grn.css 適用方法の追記
- grkin_common.js と grkin_schedule.js の記載順番に関する注意事項の追記

Garoon 開発 Tips