#kintone100日チャレンジ Day095：Salesforceのパス UI に着想！プロセスの現在地をフローチャートで表示するプラグインを組んでみた

記事

IT・テクノロジー

森田ユウゴ

2026/07/04 13:35

面倒解決エンジニアの森田ユウゴです。

台湾からお届けする「#kintone100日チャレンジ」の95日目。

Claude Fable5フル活用しています。

サブスク内で使える今、主にスキルのメンテナンスや、自作のNord.js CLIシステムなどに投資をしています。

カオスで試行錯誤しているようなリポジトリの「スキルの整理」や「コードベースの整理」に驚くほど強力で、とある煮詰まったリポジトリでFableに「助けて！」と詳細を伝えたら見事解決…。

さて、本日のテーマは、プロセス管理を使う業務アプリの利用者・管理者向けの「プロセス進捗パス表示プラグイン」。Salesforce の営業プロセス画面上部にある「パス（今どの段階か一目でわかる UI）」を kintone でも実現できないか、という着想から始まりました。

「プロセス進捗パス表示プラグイン」について

🎯 どんな課題に向き合ったか（現場の不とベネフィット）

現場の「不」: kintone のレコード詳細画面を開いても、現在のステータスが全体フローのどこに位置するのかが直感的に分かりにくい。特にプロセスが分岐・合流するような複雑な業務では「今どこにいるのか」を把握するために設定画面を確認しに行かなければならない。

導入後の世界（ベネフィット）: レコードを開いた瞬間、ヘッダーにフローチャートが表示され、現在地（青）と、その前後にあるステータスを一目で把握できます。分岐・合流も図として表示されるため、設定画面を開かなくてもプロセスの全体像を確認できます。

💡 着想・こだわり

着想は、SalesForceの「現在どの段階にいるか」を示すパス UI です。あのシェブロン型のバーは、ユーザーがプロセスの全体像と現在地を瞬時に把握できる非常に優れた UX だと感じています。kintone でも同様のものを出せないか、というのが出発点でした。

最初は CSS でシェブロンを並べる方針で実装しましたが、「kintoneのプロセス管理における分岐・合流があるプロセスはどう表現するのか」という問題にぶつかり行き詰まりました。そこで方針を転換し、有向グラフを描画できる mermaid.js を採用しました。差し戻しのような逆方向アクションはレイアウト崩れの原因になるため除外し、前進方向のエッジだけで描画しています。

色分けも「ステータスの index の大小」ではなく「グラフ上の到達可能性」で判定するようにこだわりました。分岐があると index 比較だけでは祖先か子孫かを正確に判定できないためです。

✨ これで出来ること（機能概要）

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

フローチャート描画: プロセス管理の全ステータスを、レコード詳細画面のヘッダーに mermaid.js のフローチャートで自動描画。分岐・合流も正しく表現します。

4色の色分け: 現在地へ到達できる前段（緑）・現在地（青）・現在地から到達できる後段（グレー）・現在地と前後関係にない経路（薄グレー）を色分け表示。現在地のノードには担当作業者名も表示されます。

配色カスタマイズ: 設定画面から 4 つの色を自由に変更可能。会社のブランドカラーや用途に合わせて調整できます。

課題

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

前進/後退エッジの判定がヒューリスティック

差し戻し等の逆方向アクションを除外するため、to.index > from.index というルールで前進エッジを判定しています。ステータスの index が業務上の前進順序と一致しない構成や、将来 kintone の API 仕様が変わった場合には、意図と異なる結果になる可能性があります。

mermaid SVG の文字サイズ問題

mermaid のデフォルト描画では SVG 全体が縮小表示されてしまい、ステータス名の文字が小さくなる問題がありました。width: max-content ＋横スクロールで「自然サイズを保ちつつはみ出す分はスクロール」という構成で解決しましたが、ステータス数が多いアプリでは横幅が大きくなります。