【Garoon REST API】Garoon REST API を使って最強の kintone 日報アプリを作ってみる

目次

概要

Garoon REST API を使うと、Garoon と多くの他システム連携が可能性になります。
今回は例として、kintone アプリと連携し最強の日報アプリを作ってみたいと思います。

前提条件と注意事項

この機能は、クラウド版 Garoon またはパッケージ版 Garoon 4.10 以降の環境が必要です。

完成イメージ

今回は kintone 側のみカスタマイズし、完成イメージは、以下のような形になります。
まず、日報を作る流れとしては以下です。

  1. “日付”フィールドで予定を取得したい日を選択します。
  2. レコード詳細画面上に JavaScript で配置したボタンを押す。
  3. Garoon REST API を使って予定を取得します。
  4. kintone のテーブルに取得した予定情報を格納します。

といった感じで、Garoon のスケジュール情報を起点にサクッと日報が書ける最強の日報アプリを目指します。
ちなみに今回は、予定データを取得するのみを想定しているので登録/更新は別の機会にしたいと思います。

こちらがスペースフィールドに配置したボタンです。

こちらが取得する Garoon の予定です。

ボタンを押すと Garoon から指定した日付の予定を取得してテーブルに値を入れます。

また kintone のグラフ機能を使うと、予定タイプごとに時間を集計できます。
集計の設定は、たとえば以下のように設定できます。

グラフで見ると「会議」が多くなっています。

時間集計することで、どのタイプの業務に時間がかかっているのか振り返ることができ、業務改善できそうです。
Garoon のスケジュール機能と kintone のグラフ機能でお互いを補完し合う、まさに最強の kintone 日報アプリではないでしょうか。

kintone日報アプリの作成

以下のフィールドを配置します。なお、カスタマイズに必要なフィールドのみ紹介しています。

フィールドコード フィールドタイプ 備考
kin_date 日付 Garoonのスケジュール検索する日付
my_btn スペース 検索ボタンを配置用
my_table テーブル -
event_type ドロップダウン テーブル内フィールド
event_title 文字列(1行) テーブル内フィールド
event_time_range 文字列(1行) テーブル内フィールド
event_time 数値 テーブル内フィールド
sum_working_time 計算 計算式: SUM(event_time)
day_link リンク スケジュールリンク用フィールド

kintone JavaScript カスタマイズから Garoon REST API をたたく

今回のポイントは、kintone の JavaScript カスタマイズで kintone から Garoon REST API を実行する部分です。
Garoon REST API の”予定の一覧取得”を使って予定一覧を取得していきます。
Garoon の”予定の一覧取得”では、パラメーター指定でいろいろな絞り込みができます。今回は以下を使用しました。

  • rangeStart: 検索開始日時
  • rangeEnd: 検索終了日時
  • orderBy: ソート順

これらを使って送るリクエストがこちらです。

1
GET https://{subdomain}.cybozu.com/g/api/v1/schedule/events?rangeStart=YYYY-MM-DDThh:mm:ss+09:00&rangeEnd=YYYY-MM-DDThh:mm:ss+09:00&orderBy=start asc

実際には、日付は開いているレコードの日付フィールドから取得して整形して指定します。

サンプルコード

以下のサンプルコードをコピーし、15 行目のサブドメイン名を環境に応じて書き換え、任意の名前で保存してください。(例: myGaroonRequest.js)

 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
/*
 * A sample program of Garoon REST API using from kintone app
 * Copyright (c) 2018 Cybozu
 *
 * Licensed under the MIT License
*/
(function() {
  'use strict';
  const myJQuery = jQuery.noConflict(true);
  (function($) {
    const eventsArray = [
      'app.record.create.show',
      'app.record.edit.show'
    ];
    const myEnv = 'https://{subdomain}.cybozu.com'; // 環境に合わせて書き換えてください
    // 日時整形用関数
    function timeCalc(start, end) {
      const myStartTime = start.slice(11, 13);
      const myEndTime = end.slice(11, 13);
      return parseInt(myEndTime, 10) - parseInt(myStartTime, 10);
    }
    // 時刻用整形関数
    function trimTime(start, end) {
      const myStart = start.slice(11, 16);
      const myEnd = end.slice(11, 16);
      return myStart + ' - ' + myEnd;
    }
    // GaroonへのGETリクエスト
    function getGaroonEvents(recData) {
      const searchDate = recData.record.kin_date.value;
      const myStart = searchDate + encodeURIComponent('T00:00:00+09:00');
      const myEnd = searchDate + encodeURIComponent('T23:59:00+09:00');
      const requestParams = {
        type: 'GET',
        url: '/g/api/v1/schedule/events?rangeStart=' + myStart + '&rangeEnd=' + myEnd + '&orderBy=start asc'
      };
      // Garoonにリクエストを送る
      $.ajax(requestParams).done((resp) => {
        const myEvents = resp.events;
        recData.record.my_table.value = [];
        if (resp.events.length === 0) {
          alert('指定した日付の予定がありません');
        }
        // set kintone table
        for (let i = 0; i < resp.events.length; i++) {
          const newRow = {
            value: {
              event_time: {
                type: 'NUMBER',
                value: timeCalc(myEvents[i].start.dateTime, myEvents[i].end.dateTime)
              },
              event_type: {
                type: 'DROP_DOWN',
                value: myEvents[i].eventMenu
              },
              event_time_range: {
                type: 'SINGLE_LINE_TEXT',
                value: trimTime(myEvents[i].start.dateTime, myEvents[i].end.dateTime)
              },
              event_title: {
                type: 'SINGLE_LINE_TEXT',
                value: myEvents[i].subject
              }
            }
          };
          recData.record.my_table.value.push(newRow);
        }
        recData.record.day_link.value = myEnv + '/g/schedule/personal_day.csp?event=' + searchDate;
        kintone.app.record.set(recData);
      });
    }
    kintone.events.on(eventsArray, (event) => {
      const record = event.record;
      const mySpace = kintone.app.record.getSpaceElement('my_btn');
      const $myButton = $('<input>', {
        type: 'button',
        value: 'Garoonの予定を取得',
        class: 'square_btn'
      }).click(() => {
        const recordData = kintone.app.record.get();
        getGaroonEvents(recordData);
      });
      $myButton.appendTo(mySpace);
      record.day_link.disabled = true;
      record.overtime_sum.disabled = true;
      record.mtg_sum.disabled = true;
      return event;
    });
  })(myJQuery);
})();

今回はこのサンプルと一緒に Cybozu CDN の jQuery を読み込ませました。

  • jQuery
    https://js.cybozu.com/jquery/3.3.1/jquery.min.js

JavaScript / CSS でのカスタマイズの画面では、以下のように jQuery をサンプルプログラムの上に設定してください。

おわりに

kintone ではプラグインを作るしくみがあるため、Garoon REST API を使った Garoon 連携プラグインなど可能性が広がります。
今後 Garoon REST API は機能強化していくのでご期待ください。

information

この Tips は、2018 年 5 月版 Garoon および kintone で動作を確認しています。