カテゴリー内の他の記事

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

Index

概要

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

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

前提条件と注意事項

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

完成イメージ

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

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

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

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

__________2018-04-16_11.17.01.png

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

re_capture_1.PNG

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

re_capture_2.png

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

集計の設定は、たとえば以下のように設定できます。

kintone_graph1.PNG

グラフで見ると会議が多いことが分かります。

kintone_graph2.PNG

時間集計することで、どれだけどのタイプの業務に時間がかかっているのか振り返ることができて業務改善できそうです。

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で確認したものになります。

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

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

Avatar
fitataka0606

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

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

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

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

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

fitataka0606により編集されました
Avatar
cybozu Development team

fitataka0606様

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

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

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

//日時整形用関数
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;
}

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

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