【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