カレンダーPlus・プロセス管理のステータス表示カレンダーを作りたい！

2024年10月5日 15:20

こんにちは、かりんこラボの坂本です。

kintoneのプロセス管理はワークフローのような使い方や、タスク管理のような使い方など、便利に使える機能です。
たとえば、進捗・スケジュール管理にも使えるのですが、こういった用途では、カレンダー表示で見たい場合がよくあります。
ただ、kintone標準カレンダーはシンプルすぎるので、「カレンダーPlus」を導入すると、素敵なカレンダー機能を追加することができます。

今回は、このプロセス管理＋カレンダーPlusプラグインのTipsです。

進捗をカレンダーで確認するアプリ

さて、こんなアプリがあったとします。
アプリ：プロジェクト管理
目的：プロジェクト内容、スケジュール、担当、進捗状況を把握する
アプリ構成：
・進捗をプロセス管理のステータスで設定（未着手→対応中→完了）
・担当チームはドロップダウン（東京チーム、大阪チーム、名古屋チーム）

このアプリでカレンダーPlusプラグインを使うと、このようなリソース別表示ができます。プラグイン設定（抜粋）は下記。（リソースはPro機能です）

表示用タイトルのフィールド・・・プロジェクト名
開始日時のフィールド・・・開始日
終了日時のフィールド・・・終了予定日
色分けのフィールド・・・担当チーム
リソースとして利用するフィールド (1) ・・・担当チーム

担当チーム別リソース表示のカレンダーはこのようになります。
どの期間でどういったプロジェクトが動いているのか、どのチームが担当なのかが、パッとわかりやすくなりました。

ここでさらに必要なのは、進捗状況（ステータス）です。着手しているのか？完了しているのか？知りたいですよね。
では、プロセス管理のステータスを、カレンダーPlusの「色分けのフィールド」に設定する、もしくは「リソース」に追加しようと考え、設定画面を開くと、なんと、どちらも「ステータス」は選べません！！

ステータスはフォーム内のフィールドではなく、プロセス管理で設定されるものです。プロセス管理のアクション操作は、レコードの編集とは別もので、基本的には作業者しか操作できなかったり、レコードの条件によってアクションが変わったりするため、カレンダーPlus側で更新制御ができずステータスが選べないようになっているのかな？と個人的には考えています。

解決策

さて、ではどうしたら進捗状況をカレンダー表示できるか、ということを考えてみます。

カレンダーPlusプラグインは色分け、リソースともにドロップダウンフィールドが指定可能なので、プロセス管理を使わずに、フォーム上に「進捗状況」といったドロップダウンを置き、それで進捗状況（ステータス）を管理するのが、シンプルな解決策だと思います。

ただ、承認処理が絡む使い方など、プロセス管理も諦められない場合は、ちょっとしたカスタマイズを入れることで解決ができます。

ステップ0：カスタマイズの考え方

カレンダーPlusプラグインは色分け、リソースともに選択系のフィールドが設定可能。
　↓
プロセス管理のステータスと同じ値が、別途フォーム上に配置した選択系フィールド（ラジオボタンもしくはドロップダウン）に自動でセットされれば、そのフィールドをカレンダーPlusプラグインで色分けまたはリソースに設定できる！
　↓
別途フォーム上に配置した選択系フィールド（ラジオボタンもしくはドロップダウン）は勝手にユーザーに値を編集されてしまうと、プロセス管理のステータスと整合性が取れなくなってしまう。ユーザーが編集できないようにしなければ・・・

ステップ１：フォームを変更・ドロップダウンの追加

選択系フィールド（ラジオボタンもしくはドロップダウン）をフォームに追加します。今回はドロップダウンフィールドにします。

フィールド名・・・進捗状況（ステータス・カレンダーPlus用）
フィールドコード・・・進捗状況
項目・・・プロセス管理のステータスと同じにする

ステップ２：JavaScriptカスタマイズ追加

「kintone JavaScriptAPI」と「CalendarPlus JavaScript API」を使います。

ステータスの値を、選択系フィールドに自動セットするタイミング（イベント）は、プロセス管理でアクションを実行するとき。
レコード編集で、勝手に選択系フィールドの値を変更されると、ステータスと選択系フィールドの整合性が崩れてしまうため、選択系フィールドは編集不可にする必要がある。
値を編集される可能性がある下記タイミングで制御する。
- 追加画面と編集画面、一覧画面での編集画面が表示されたとき。
- カレンダーPlusのコンテキストメニューが表示されるとき。（色分けのフィールドに指定した場合）

(() => {
    'use strict';
    /**
     * プロセス管理でアクションを実行するときのイベント
     * https://cybozu.dev/ja/kintone/docs/js-api/events/detail/detail-process-proceed-event/
     */
    kintone.events.on('app.record.detail.process.proceed', (event) => {
        // カレンダーPlusステータス用ドロップダウンに、プロセス管理のステータスをセットする
        event.record['進捗状況'].value = event.nextStatus.value;
        return event;
    });

    /**
     * 追加・編集画面を表示した後のイベント
     * https://cybozu.dev/ja/kintone/docs/js-api/events/create/create-show-event/
     * https://cybozu.dev/ja/kintone/docs/js-api/events/edit/edit-show-event/
     * 
     */
    kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.index.edit.show'], (event) => {
        // プロセス管理のステータスと連動する為、カレンダーPlusステータス用ドロップダウンは編集不可とする
        event.record['進捗状況'].disabled = true;
        return event;
    });

    /**
     * レコード一覧画面を表示した後のイベント
     * https://cybozu.dev/ja/kintone/docs/js-api/events/idx/index-edit-show-event/
     */
    kintone.events.on('app.record.index.show', (event) => {
        calendarplus.events.on('cp.calendar.show', (e) => {
            // 色分けに進捗状況を指定した場合は、カレンダーPlusのコンテキストメニューでステータス用ドロップダウンを変更されないように、コンテキストメニューを非表示とする
            calendarplus.view.setContextMenuItemShown('color', false);
            return e;
        });
        return event;
    });
})();

ステップ３：カレンダーPlusの設定変更

今回は「リソース」はそのまま「担当チーム」とし、「色分けのフィールド」で進捗を見分けるようにします。
カレンダーPlusの設定で、「色分けのフィールド」を「担当チーム」からステップ１で追加した「進捗状況」に変更します。

結果

担当別リソースが進捗状況で色分けされ、進み具合を確認することができるようになりました！

注意点など

カスタマイズ導入後に新規追加・ステータス変更されたレコードしか値が入らないので、既存レコードは、手動でCSV読み込みなどしてドロップダウンの値更新が必要です。
プロセス管理のステータスを変更・追加したときは、ドロップダウンの項目（選択肢）も合わせて変更・追加が必要です。プロセス管理のステータスがドロップダウンの項目（選択肢）にない場合、プロセス管理のアクションボタンを押したタイミングでエラーが発生します。
カスタマイズは、動きや意味を理解して導入しましょう。運用担当者が変わった時、アプリを変更する時など、内容を理解していないまま導入すると、動かなくなったり、正しく表示されなくなったりして、業務・運用に支障がでることがあります。

まとめ

カレンダーPlusでプロセス管理のステータスが使えないので、色々諦めていた、というかたはぜひ参考にしてみてください！