0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【#kintone100日チャレンジ】Day 2: [変更履歴]をDOMで取得して差分表示するプラグインを作ってみた

0
Last updated at Posted at 2026-04-02

day002.png

面倒解決エンジニアの森田ユウゴです。
台湾からお届けする「#kintone100日チャレンジ」の 002 日目。

👉 #kintone100日チャレンジの概要はこちら

本日は、レコードの変更内容を厳密に追跡したい監査担当者やレビュアー向けの「変更履歴 差分ビュー(Git風)プラグイン」を開発しました!

「変更履歴 差分ビュー(Git風)プラグイン」について

🎯 なぜ開発したか?(現場の課題とベネフィット)

  • 現場の「不」: kintoneの「変更履歴」は監査や業務追跡において超重要データであるにもかかわらず、実は標準APIが存在しません。画面上のDOM(HTML要素)として表示されるだけでデータとして抽出できないため、変更内容の二次利用や外部出力が絶望的に難しいというシステム的な壁がありました。
  • 導入後の世界(ベネフィット): 画面のDOMから強引にデータをパースして引っこ抜くハックを実装!第一弾となる今回は「最小限の機能(MVP)」として、任意の2バージョンの差分をGit風に見やすく比較できるビューワーを作成しました。APIがないならDOMから奪い取る、やむを得ない実装です。

✨ これで出来ること(機能概要)

まずはこちらをご覧ください。

  • Git風の差分ハイライト表示: 比較したい2つのバージョンをプルダウンで選ぶと、「削除された文字は赤背景+取り消し線」「追加された文字は緑背景」で直感的に変更箇所を可視化します。
  • 選べるUI(ヘッダー or モーダル): アプリのレイアウトを邪魔しないよう、プラグイン設定画面から「ヘッダーの空きスペースに常時表示する」か、「ボタンを押した時だけモーダルで表示する」かを選択可能です。
  • Markdown / JSONの一発コピー機能: DOMから取得した差分データを、クリップボ!
    ードにコピーできます。Markdownにすれば、BacklogやNotionなどのツールに貼り付けるだけで綺麗な表が完成します。

課題

現時点では下記のような課題が残っています。

  • 履歴サイドバーのDOM生成タイミング問題と格闘
    APIがないためDOMを解析するしかありませんが、AIに初手で書かせたコードは画面を開いた瞬間に履歴を探しに行って「履歴がありません」とエラーを吐くポンコツ仕様でした。kintoneのサイドバーDOMは非同期で遅れて描画されるため、MutationObserver を導入してDOMの生成を監視(waitForHistoryDom関数)するよう泥臭く修正しています。また、テキストの正規表現パースも地道にパターン網羅を行いました。
  • 今後の展望:別アプリ連携やファイル出力への拡張
    今回は「まずは差分を画面上で確認する」という最小限の機能(MVP)として実装しました。DOMからJSONとしてデータを抽出する土台はできたので、今後は取得した履歴データを「変更履歴保存用アプリ」へ連携して永続化したり、CSV/JSONファイルとして一括ダウンロードする機能へ拡張することが出来ると思いながら本日はFIXです。

さいごに

明日もお楽しみに!

2026/4/15追記…下記の通り、ソースコードとプロンプトについては公開を停止します。

下記のブログもご覧ください!
👉 【#kintone100日連続チャレンジ】AIにkintoneカスタマイズを100%任せたらどこまでいけるか?現役フリーランスの「100 Days of kintone Hacks」始動!
👉 ココナラで「kintone有資格者が導入や運用の相談にのります」サービスを開始します!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?