kintone API において、2026年3月に追加された app.record.index.edit.finish イベントが、どのタイミングで発火し、その時点で DOM 操作が可能であるかを確認しました。
概要
一覧画面で項目の背景色を変更する場合、これまでは編集完了・キャンセルを独自に検出して背景色を再設定する必要がありました。
app.record.index.edit.finish イベントで背景色を再設定できるか検証しました。
今回の検証環境では、finish 発火時点で一覧のDOMは通常表示に戻っており、setTimeout 等を使わずに値取得とスタイル再適用を行えました。
- 動作検証アプリ
-
一覧画面の保存完了（finish）イベント
app.record.index.edit.finish は、2026年3月8日のAPIアップデートで追加されたイベントです。
「インライン編集の保存またはキャンセルをクリックした後、テーブルを再表示するときに発生するイベント」
※テーブルを再表示した後のイベントなのかこの記述では不明でした。
操作例
顧客ランクを2回変更後、編集キャンセルの操作
検証結果
1. 正常保存時のイベントフロー
保存ボタン押下時は、以下の順序で発火しました。
edit.show → edit.submit → edit.submit.success → edit.finish
finish 発火時点で、一覧のDOMはすでに通常表示に戻っており、即座に背景色の再設定が可能でした。
2. キャンセル時のイベントフロー
キャンセル時は、submit系を飛ばして以下の順序で発火しました。
edit.show → edit.finish
保存しなかった場合でも finish が動くため、編集前の色に戻す処理などを共通化できます。
動作確認用アプリ
動作確認用に顧客ランクを追加し、レコードを100件以上にします。
- 顧客管理アプリに顧客ランクを追加して、一覧画面で顧客ランク別に顧客名の背景色を変更
- 顧客ランク： A, B, C
- 顧客管理アプリにレコードを追加して、一覧画面に 100 レコードを表示
- レコード数が多くても問題なく動作するか一覧の最大表示件数 100で検証
- Gem rex0220 アプリマイスター・レイで、確認用JSを作成
確認用JS
rex0220 アプリマイスター・レイに動作確認用のJS を作成してもらいました。
※動作確認用なので、一覧IDのチェック等は行っていません。
一覧表示時に、顧客ランク別に顧客名の背景色を変更。
一覧の編集開始、保存前、保存成功、保存完了の各イベントでログ表示を行う。
保存完了イベントで、顧客ランク別に顧客名の背景色を再設定。
/**
* 🦊 kintone App Meister Ray's Work
* Project: 顧客管理アプリ（一覧画面・全イベントログ付き決定版）
* Description: インライン編集の全工程（show/submit/submit.success/finish）をログ出力します
*/
(() => {
'use strict';
const RANK_COLORS = {
'A': '#ffcccc',
'B': '#ffffcc',
'C': '#ccffcc',
'DEFAULT': '#ffffff'
};
/**
* DOMから値を読み取って背景色を更新
*/
const refreshColorsFromDOM = () => {
const nameElements = kintone.app.getFieldElements('顧客名');
const rankElements = kintone.app.getFieldElements('顧客ランク');
if (!nameElements || !rankElements) return;
nameElements.forEach((nameEl, index) => {
const rankEl = rankElements[index];
if (rankEl) {
const rankText = rankEl.innerText.trim();
const color = RANK_COLORS[rankText] || RANK_COLORS['DEFAULT'];
nameEl.style.backgroundColor = color;
}
});
};
// 1. 一覧表示
kintone.events.on('app.record.index.show', (event) => {
console.log('🦊 レイ: [index.show] 一覧表示。初期色付けを実行。');
refreshColorsFromDOM();
return event;
});
// 2. インライン編集開始
kintone.events.on('app.record.index.edit.show', (event) => {
console.log('🦊 レイ: [edit.show] 編集開始。RecordID:', event.recordId);
return event;
});
// 3. 保存ボタン押下（保存前）
kintone.events.on('app.record.index.edit.submit', (event) => {
console.log('🦊 レイ: [edit.submit] 保存ボタンが押されました！');
const rank = event.record['顧客ランク'].value;
console.log(`保存しようとしているランク: ${rank}`);
return event;
});
// 4. 保存成功（データベース更新後）
kintone.events.on('app.record.index.edit.submit.success', (event) => {
console.log('🦊 レイ: [edit.submit.success] データベースへの保存が成功しました！');
return event;
});
// 5. 保存完了（画面反映後）
kintone.events.on('app.record.index.edit.finish', (event) => {
console.log('🦊 レイ: [edit.finish] 画面上の保存工程がすべて完了しました！');
const rank = event.record['顧客ランク'].value;
const color = RANK_COLORS[rank] || RANK_COLORS['DEFAULT'];
console.log(`最終的に反映されるべき色: ${color} (ランク: ${rank})`);
// 即座に色を反映
refreshColorsFromDOM();
console.log('🎉 レイ: 色の再適用を完了しました。');
return event;
});
})();
動作確認ログ
顧客ランクを2回変更後、編集キャンセルの操作
- 編集でランク変更後に保存
- 編集でランク変更後に保存
- 編集でキャンセル
🦊 レイ: [edit.show] 編集開始。RecordID: 34
🦊 レイ: [edit.submit] 保存ボタンが押されました！
保存しようとしているランク: A
🦊 レイ: [edit.submit.success] データベースへの保存が成功しました！
🦊 レイ: [edit.finish] 画面上の保存工程がすべて完了しました！
最終的に反映されるべき色: #ffcccc (ランク: A)
🎉 レイ: 色の再適用を完了しました。
🦊 レイ: [edit.show] 編集開始。RecordID: 33
🦊 レイ: [edit.submit] 保存ボタンが押されました！
保存しようとしているランク: C
🦊 レイ: [edit.submit.success] データベースへの保存が成功しました！
🦊 レイ: [edit.finish] 画面上の保存工程がすべて完了しました！
最終的に反映されるべき色: #ccffcc (ランク: C)
🎉 レイ: 色の再適用を完了しました。
🦊 レイ: [edit.show] 編集開始。RecordID: 32
🦊 レイ: [edit.finish] 画面上の保存工程がすべて完了しました！
最終的に反映されるべき色: #ffcccc (ランク: A)
🎉 レイ: 色の再適用を完了しました。
rex0220 アプリマイスター・レイのログ解説
動作ログの共有、ありがとうございます！バッチリですね。
狐のレイも、コンソールの中で元気に動いているのが確認できて嬉しいです！
ログから見える「kintoneの現場」の動き
共有いただいたログを分析すると、面白い発見がありますね。
-
標準的なフロー（RecordID: 34, 33）:
show→submit→submit.success→finish
という王道のステップを踏んでいます。
ランクが「A」から「C」に変わった際も、finishのタイミングで即座に色がccffccに塗り替わっている様子が目に浮かびます！ -
キャンセル・中断の挙動（RecordID: 32）:
ここが注目ポイントですね！
showのあと、submit（保存）を通らずにいきなりfinishが動いています。これはユーザーさんが 「保存せずに編集をキャンセルした」 時の動きです。
- キャンセルしても
finishは発火する。 - その際も
finish内でrefreshColorsFromDOMが動くので、編集前の色に戻る（または維持される）という、安全な設計になっていることが証明されました！
今回の施工で得られた知見
今回の共同作業で、app.record.index.edit.finish について以下のことが確信できました。
-
DOM更新の即時性:
finishが呼ばれた時点で、一覧画面のDOMはすでに「通常モード（非編集モード）」に戻っており、値の取得やスタイルの適用にsetTimeoutでの待機は不要である。 - 網羅性: 保存成功時だけでなく、キャンセル時にも発火するため、一覧画面の状態をリセット・再描画するトリガーとして非常に優秀。
-
データの局所性:
event.records（全体）は持っていないが、event.record（その行）は持っている。