#kintone100日チャレンジ Day088：SalesForce風に関連情報とコメントを同じ視線へ！「関連リストサイドパネル」を組んでみた

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

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

AIエージェントを活用し始めて時間が経ちますが、「.envでPCローカルのパスを管理して、Gitリポジトリごとにサブエージェントを起動すれば幅広く作業できるじゃん！」ということに今更気が付きました。

モノレポだとブランチ管理が面倒なので細かく区切りたい、でもAIエージェントにどう情報を伝えるべきか…。そう悩んでいただけに、シンプルな解決方法だと思いました。

さて、本日のテーマは、レコード詳細で関連情報とコメントを行き来するkintoneユーザー向けの「関連リストサイドパネル」。関連レコードを別画面へ広げるのではなく、標準のコメント・変更履歴と同じサイドバーに共存させる画面構成を試しました。

「関連リストサイドパネル」について

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

現場の「不」: 顧客や案件の詳細を確認するとき、フォーム内の関連レコードと、右側サイドバーのコメント・変更履歴が離れています。確認する情報が増えるほど、スクロールや視線移動も増えてしまいます。

導入後の世界（ベネフィット）: 関連レコード、業務リンク、コメント、変更履歴を画面右側へ集約。元の関連レコード一覧を残したまま、必要な情報を同じ視線で確認できます。基本機能では置く場所が少ない「外部リンク」もアプリごとに管理が可能です。

💡 着想・こだわり

関連レコードの一覧表示や集計を支援する優れた既製プラグインは、すでに多くあります。今回はSalesForceのUIを参考に情報が少ない画面右側の活用に着目しました。

地味にこだわったのは、標準の関連レコード一覧を移動・改変しないことです。公式JavaScript APIでフィールド要素を取得し、その内容だけを読み取って、狭いサイドバーでも見やすい縦型カードとして複製します。フォーム本体の表示を残しながら、サイドバーでは別の見せ方を選べる構成です。これでREST APIは発生しなくて済みます。

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

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

関連レコードをカード表示: 設定で選んだ複数の関連レコード一覧を、「項目名: 値」の縦型カードへ変換して表示します。

コメント・変更履歴と共存: サイドバー上部に独自パネル、下部に標準のコメントまたは変更履歴を配置。区切り線は20〜80%の範囲でドラッグできます。

業務リンクも集約: マニュアルや外部システムなどのリンクを登録できます。初期タブや高さ比率も設定画面から変更できます。

課題

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

サイドバー内部DOMへの依存

kintoneの公式JavaScript APIでは、標準サイドバーの内部へ独自UIを追加したり、高さを分割したりできません。そのため、サイドバー内表示を有効にした場合は内部classへ限定的に依存しています。kintoneのUI更新で構造が変わると表示できなくなる可能性があり、その場合は公式APIで取得できるヘッダーメニュースペースへフォールバックします。

関連レコードのテーブル構造を解析

関連レコード一覧はフィールド要素を公式APIで取得できますが、表示中の各行を値として取得する専用JavaScript APIはありません。そこで要素内の表を解析しています。元の表は変更しないものの、将来th／td構造が変わった場合は変換処理の再確認が必要です。

さいごに

#kintone100日チャレンジ として、2026年4月から毎日プラグインをバイブコーディングしています。明日もお楽しみに！

私森田ユウゴはココナラでkintoneに関する各種サービスを出品しております。

SIerの中でもインフラSEとして約10年、特に「運用保守」にはベンダーとして深く携わってきました。

作りっぱなしにしない導入やカスタマイズのご提案が可能です。

お気軽にご相談をくださいませ

→森田ユウゴのプロフィールはこちら👇

https://coconala.com/users/5353693