#kintone100日チャレンジ Day091：レコードの中で図を描いて保存！「Excalidrawホワイトボードプラグイン」を作ってみた

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

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

最近、Nord.jsのElectronを気になり始めました。

そういえばReactNativeでスマホアプリは作ってみたりしたけど、Windows用のアプリ開発ってVisualStudio + C#以外でやったことないや。

さて、本日は、会議や要件整理で図を使うチーム向けの「Excalidrawホワイトボードプラグイン」を開発しました！

「Excalidrawホワイトボードプラグイン」について

🎯 なぜ開発したか？（現場の課題とベネフィット）

現場の「不」: 会議で描いた構成図や業務フローが、ホワイトボード、画像、チャットなどに分散し、どの案件・顧客の情報なのか分からなくなりがちです。kintoneの文字項目だけでは、複雑な関係やアイデアを直感的に共有しにくい場面もあります。

導入後の世界（ベネフィット）: レコードの中で図を直接描き、そのレコードのデータとして保存できます。案件情報と図が一か所にまとまり、編集画面で続きを描き、詳細画面で関係者が確認できる状態を作れます。

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

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

レコード内で自由に作図: 追加・編集画面の空白スペースにExcalidrawを表示し、手書き、図形、矢印、テキストなどを使ってその場で整理できます。

描画内容をレコードへ保存: 保存時に図をExcalidraw JSONへ変換し、指定した複数行文字列フィールドへ書き戻します。再編集時には保存済みの図を復元できます。

詳細画面では閲覧専用表示: 保存済みの図を詳細画面で読み取り専用表示します。設定画面では表示先のスペースIDと保存先フィールドを指定できます。

課題

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

キャンバス表示のためDOM操作が必要

kintone標準JavaScript APIにはホワイトボードを描画するUIがないため、公式APIで取得した空白スペース要素の内側にマウント用要素を作り、ReactとExcalidrawを描画しています。kintoneの内部DOMやクラス名には依存しないよう範囲を限定していますが、DOM操作を完全には避けられません。

外部ライブラリの影響と配布サイズ

React、ReactDOM、Excalidrawをプラグインへ同梱しています。CDNには依存しませんが、読み込み順の管理が必要で、Excalidrawが注入するCSSやフォント設定を完全に隔離するのは困難です。

PC版限定・保存容量に注意

現在はPCのレコード画面のみ対応しています。また、描画データは複数行文字列フィールドにJSONとして保存するため、大規模な図や画像を多く含む図ではフィールドの文字数上限を意識する必要があります。

さいごに

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

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

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

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

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

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

https://coconala.com/users/5353693