kintoneでフィールド単位の履歴を残す方法

概要

kintoneは標準機能でレコードの履歴を確認できますが、特定のフィールドの履歴は残りません。
そこで今回は、商品ごとの金額が変更された際に、「変更前」と「変更後」の金額を自動で記録する「金額変更履歴アプリ」を作りました。

画面イメージ

以下のような「商品一覧アプリ」があります。

例えば、商品ID：0004の金額を500円→600円に変更します。

そうすると、「金額変更履歴アプリ」にレコードが自動で追加され、履歴が残ります。

アプリ構成

商品一覧アプリ

フィールド名	フィールドコード	フィールドタイプ
商品ID	itemId	文字列
商品	item	文字列
金額	cost	数値

金額変更履歴アプリ

フィールド名	フィールドコード	フィールドタイプ
商品ID	itemId	文字列
商品	item	文字列
変更日時	changeAt	日時
変更前金額	oldCost	数値
変更後金額	newCost	数値

処理の流れ

1. 編集画面を開いた時に、商品IDと金額を取得し、Mapに保存
2. 保存ボタンを押して保存に成功すれば、Mapに保存した金額と現在の金額を比較
3. 金額が変更されていれば、履歴アプリにレコード追加

実装例

(() => {
  "use strict";

  const ITEM_ID = "itemId";
  const ITEM = "item";
  const COST = "cost";

  // 商品IDごとに金額を保持するMap
  const previousCost = new Map();

  // 編集画面を開いた時
  kintone.events.on(["app.record.edit.show"], (event) => {
    const record = event.record;
    const itemId = record[ITEM_ID].value;
    const currentCost = record[COST].value;
    // 商品IDと現在の金額をMapにセットする
    previousCost.set(itemId, currentCost);
    return event;
  });

  // 編集画面で保存に成功した時
  kintone.events.on(["app.record.edit.submit.success"], async (event) => {
    const record = event.record;
    const itemId = record[ITEM_ID].value;
    const item = record[ITEM].value;
    // 商品Idを元に、Mapから編集画面を開いた時の金額を取得
    const oldCost = previousCost.get(itemId);
    const newCost = record[COST].value;

    // 編集画面を開いた時の金額と現在の金額が異なれば、履歴アプリにレコード追加
    if (oldCost !== undefined && oldCost !== newCost) {
      const body = {
        app: xx, // 履歴アプリのアプリID
        record: {
          itemId: { value: itemId },
          item: { value: item },
          oldCost: { value: oldCost },
          newCost: { value: newCost },
          changeAt: { value: new Date().toISOString() },
        },
      };

      try {
        // kintone REST APIを使って履歴アプリにレコード追加
        await kintone.api(kintone.api.url("/k/v1/record", true), "POST", body);
      } catch (err) {
        console.error(err);
      }
    }

    return event;
  });
})();

xxの部分は履歴アプリのアプリIDを入れます。

解説

Mapオブジェクト

MapはJavaScriptのオブジェクトの1つで、キーと値をセットで保存できます。
要素を追加するにはset()、取得するにはget()を使います。

const map = new Map();
map.set("a",1) // キー:a、値:1をセット
console.log(map.get("a")); // 1が表示される

今回は、編集前の金額を記録するために、以下の情報をMapに保存しています。

• キー；商品ID
• 値：編集画面を開いた時の金額

app.record.edit.submit.success

app.record.edit.submit.successは、編集画面で保存が成功した時に実行されるkintoneイベントです。
もしapp.record.edit.submitを使うと、保存に失敗してもイベントが実行されてしまうため、誤った履歴が残るリスクがあります。
そのため、今回は保存成功した時のみ動作するapp.record.edit.submit.successを使っています。

まとめ

カスタマイズをすることで、kintoneの標準機能にはないフィールド単位の変更履歴を残すことができます。
今回は金額を例にしましたが、同じようにステータスや担当者など、他のフィールドでも同じ仕組みで応用できます。