ENGINEER BLOG

ENGINEER BLOG

kintoneの機能を紹介します -承認プロセスとSlack連携-

こんにちは。
お初にお目にかかります、インテグレーションサービス本部の たか です。

今回の題材は「kintone」です。

はじめに

先日、あるお客さまから、社内の経費精算について、
申請内容の参照権限と変更権限に課題があるため、
kintoneで何とかならないでしょうか…!というお話をいただき、
「交通費精算アプリ」と「経費精算アプリ」を作成しました。

今回は、その時に使用した、kintoneの機能について紹介したいと思います。

ラインナップは…
承認フローの基本的な機能、以下の3つになります。

  1. 「プロセス管理」 ← アプリ内で承認フローを回したい !
  2. 「アクセス権」 ← 編集や閲覧を、ステータスごとに制限したい !
  3. 「条件通知」 ← 承認完了時、申請者に通知を送りたい !

それでは早速、プロセス管理機能から…!

1. プロセス管理

kintoneではプロセス管理機能を使って、承認プロセスを設定できます。

それでは、今回設定したい承認の流れを確認。
「差し戻し」と「却下」ありの、3段階承認にしたいと思います。

pic_000

流れの確認ができたら、実装に進みます。
アプリの編集画面から 設定 タブを開き、 一般設定 の中の プロセス管理 を選択すると、
下図のような設定画面が開きます。

「1. 有効化」「2. ステータス」「3. プロセス」の順に、
先に確認した承認の流れに従って入力していきます。

pic_001

作業者の設定部分はロールを使用しています。
サイボウズ管理画面では、社員マスタをもち、所属や役職、
それをもとにしたロールを設定することができます。
ロールの設定を、動的にしておけば、社員の異動があったときなども、
変更の必要がないので便利です。

設定が完了すると、作業者となっているメンバーのレコードの詳細画面に、
承認プロセスのアクションボタンが表示されます。
↓ このようになりました!

pic_002

2. アクセス権

次に、アクセス権です。
kintoneでは、アプリ・レコード・フィールドの3段階でアクセス権を設定できます。

今回制限したい操作は、下記の3つです。

  • 承認中の、申請者による編集。
  • 承認完了前の、申請者と承認担当者以外のメンバーによる閲覧。
  • 承認完了後の、全メンバーによる編集・削除。

これらの3条件を満たすよう、各ステータス・アクションについて、
メンバーごとの権限を下の表にまとめました。

pic_003

それでは、実装していきます。
この場合、レコードのステータスごとに制限を行いたいので、
設定 タブを開き、 アクセス権 の中の レコード を選択します。
下図のような画面が開きますので、表に従い設定していきます。

pic_004

アクセス権は、上から順に優先されるので、順番には要注意です。

例えば、一次承認者にも、申請者(氏名)にもなり得るメンバーがいる場合、
承認待ちステータスでは、一次承認者を上に設定、
差し戻しステータスでは、申請者(氏名)を上に設定、
というように権限が強い方を上に置いておきます。

3. 条件通知

次に通知機能です。
kintoneには、以下の場所へ通知を送る機能があります。

  • kintoneのトップページ
  • kintoneの通知ページ
  • 登録したメールアドレス

今回は、承認完了したとき、申請者宛に、
「【交通費精算】申請が承認されました。」と通知を送ります。

設定 タブを開き、 通知 の中の レコードの条件通知 を選択し、
下図のように設定します。

pic_005

これで、kintone内+メールでの承認完了通知は受け取れるようになりました。
ですが、せっかくなら、Slackへも通知を連携したい! ということで、
そちらも設定してみようと思います。

調べてみたところ、、
Slackにはkintoneからの通知を受け取るためのアプリが用意されていました。

では、このアプリをインストールして…と思ったのですが、
なんと、このアプリを使って通知できるのは、作業者になったときのみとのこと。
承認完了通知は送れませんでした…><…

そこで、Webhookを使って通知を送りたいと思います…!

まずは、Slack側の設定から。

  1. kintoneからの通知を受け取るチャンネルを作成します。
    今回は、「#kintone」という名前で作成しました。

  2. Slackのアプリ「Incoming Webhook」をインストールします。

pic_006

  1. 上で作成したチャンネルを指定して、
    Incoming Webhookインテグレーションの追加 をクリックします。

pic_007

  1. 設定画面が開いたら、必要項目を入力し、保存します。
    ※ここで表示されている"WebhookURL"は、次に行うkintone側の設定で使います。

pic_008

Slack側の設定は完了です!
次に、kintone側の設定を行います。

設定タブ の、カスタマイズ/サービス連携 の中から
JavaScript / CSSでカスタマイズ を選択し、次のソースをアップロードします。

  (function() {
        "use strict";

        //プロセス管理のアクション実行時のイベント指定
        kintone.events.on("app.record.detail.process.proceed", function(e) {

            //ステータスが「承認完了」に更新されたとき
            if (e.nextStatus.value == '承認完了') {
        
                var recordUrl = "https://<<ドメイン名>>.cybozu.com/k/" + kintone.app.getId() +
                                "/show#record=" + kintone.app.record.getId();
                var recordNo = kintone.app.record.getId();
                var webhookUrl = '<<IncomingWebhookの設定画面からコピーしたWebhookURL>>';
                var message = { "text" : "【交通費精算】申請が承認されました。(レコード番号:" + recordNo + ")" };
        
                return new kintone.Promise(function(resolve, reject) {
                    kintone.proxy(webhookUrl, 'POST', {}, message, function(body, status, headers) {
                        console.log(status, body);            
                        resolve(e);
                    });
                });
            }
        });
    })();

以上で、設定完了です。

アプリにレコードを登録し、ステータスを承認完了へ更新してみると…
このように通知されました!

pic_009_

今回は、申請者個人への通知で利用しましたが、
kintoneを利用していないメンバーを含むチーム宛に、通知を送りたい場合などに、
Slack連携は大変便利ではないでしょうか…!

おわりに

今回は、kintoneの3機能(プロセス管理・アクセス権・通知)について、簡単に紹介いたしました。
また機会がありましたら、他の機能や、フォームの使い方の工夫なども紹介できたらと思います。

それでは、最後までお付き合いいただきありがとうございました!