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

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

更新日：2023年02月01日

概要

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

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

前提条件と注意事項

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

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

完成イメージ

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

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

“日付”フィールドで予定を取得したい日を選択します。
レコード詳細画面上にJavaScriptで配置したボタンを押す。
Garoon REST APIを使って予定を取得します。
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);
})();