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

Index

概要
前提条件と注意事項
完成イメージ
kintone日報アプリの作成
サンプルコード
おわりに

概要

Garoon 2018年5月にリリースされるREST APIによって、Garoonと多くの他システム連携が可能性になります。

今回は例として、kintoneアプリと連携し最強の日報アプリを作ってみたいと思います。

前提条件と注意事項

この機能は、クラウド版 Garoon またはパッケージ版 Garoon 4.10以降の環境が必要です。
サンプルプログラムは、その動作を保証するものではありません。
サンプルプログラムの技術的なサポート等は行っていません。

完成イメージ

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

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

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

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

__________2018-04-16_11.17.01.png

こちらが取得する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: ソート順

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

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）

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

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

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

__________2018-04-16_11.10.18.png

おわりに

kintoneではプラグインを作る仕組みがあるので、GaroonのREST APIを使ったGaroon連携プラグインなど可能性が広がります。

まだまだ、今後Garoon REST APIは機能強化していくのでご期待ください。

このTipsは、2018年5月版 Garoon/kintoneで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

//日時整形用関数
function timeCalc(start, end) {
var myStartTimeHour = start.slice(11, 13);
var myEndTimeHour = end.slice(11, 13);

//分単位で計算する処理を追加
var myStartTimeMin = start.slice(14, 16);
var myEndTimeMin = end.slice(14, 16);
var mins = parseInt(myEndTimeMin, 10) - parseInt(myStartTimeMin, 10);
var hours = parseInt(myEndTimeHour, 10) - parseInt(myStartTimeHour, 10);
var time = hours + mins/60;
return time;
}

fitataka0606 2020年05月21日 15:02

■時間を集計したいのですがお助けください。

サンプルスクリプトの時間集計では、

時間は　10:30 - 11:00 の場合も　1　となっており「分」の計算ができませんでした。

Garoon上、15分、30分といった単位の場合、 0.25、0.5　といった値にして稼働を集計したかったのですがどうすればよいのか分からない状況です。

データの扱い自体が「15:00 - 15:15」ではなくフィールドが分かれて「15:00」「15:15」と入ればkintoneの標準機能で計算できるんじゃないかと思っているのですができていません。

fitataka0606により編集されました 2020年05月23日 13:15

cybozu Development team 2020年05月26日 08:59

fitataka0606様

いつもお世話になっております。 developer network事務局です。

>「分」の計算ができませんでした。

ご質問ありがとうございます。
おっしゃる通り、こちらのサンプルコードでは１時間単位での計算になっており、
分単位での計算が必要な場合、一例ですが、
下記のようなイメージで、分単位計算の処理を追加する必要があります。ご参考になれば幸いです。

また、カスタマイズ部分で不明点があった際は、是非コミュニティをご活用ください。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います。

サインインしてコメントを残してください。