Kakeizu Studioを公開しました｜家族相関図を端末内で作る
Kakeizu Studioは、人物と続柄を選んで家族相関図を作るWebアプリです。関係線を加え、位置や表示を整えて、完成した図をPNGで書き出せます。クライアントワークを基に、実際の案件データを含まないポートフォリオ版として作り直しました。
アプリ： https://kakeizu-studioapp.nuconeko-garden.com/charts
続柄を選び、関係を図にする
相関図では、人物を置くだけでなく、「誰を基準にした関係か」を決める必要があります。Kakeizu Studioでは人物を選び、配偶者・子・親・兄弟姉妹などの続柄から、新しい人物と関係線を追加できます。線を一本ずつ描く操作を減らし、関係の整理に集中できるようにしました。
複数の図を用途ごとに保存できます。人物には複数行のメモを付け、文字や表示サイズを調整できます。続柄の接続規則や線種、性別の名称・形・色も設定できます。複数の配偶者、片親の子、義父母を含む多世代の図にも対応し、最初の配置からドラッグで位置を直せます。
画面はReactとTypeScriptで作り、図の操作にはReact Flowを使っています。人物をノード、関係線をエッジとして扱う一方、続柄から接続先を決める処理は画面表示と分けました。保存データにはバージョンを持たせ、ファイルを読み込むときには内容も検証します。TypeScriptの型だけでは、外から読み込んだファイルの正しさを保証できないためです。
家族情報をどこに保存するか
家族構成やメモには、私生活に関わる情報が入ることがあります。そこで相関図と設定はブラウザのIndexedDBに保存し、入力した図を提供者のサーバーへ送らない構成にしました。アカウント登録やログインもありません。アプリを最初に開くときや更新時には配信用ファイルを取得しますが、編集と保存はブラウザ内で行います。外部フォント、解析タグ、外部CDNは使っていません。
共有端末では「今回だけ使う」を選べます。このモードでは図の保存先をメモリに切り替え、IndexedDBへ書き込みません。タブを閉じたり再読み込みしたりすると内容が消えるため、残したい図はその都度書き出してください。通常の端末保存とは異なる使い方を、利用者自身で選べるようにしました。
オフラインとバックアップ
対応ブラウザではPWAとしてインストールできます。必要なファイルが取得・キャッシュされた後は、オフラインでも図を編集できます。ただし、端末保存だけでは、サイトデータの削除や端末の故障に備えられません。別の端末への自動同期もありません。
編集可能な状態を残すにはJSONバックアップを使います。全データの復元では追加と置き換えを選べ、個別の図も書き出せます。完成した図を共有するならPNG、後から編集するならJSONという使い分けです。全データのバックアップファイルは、パスフレーズを指定してAES-GCMで暗号化することもできます。暗号化されるのは書き出すファイルで、IndexedDBの内容そのものではありません。
続柄の生成、配置、保存、バックアップ、画面操作は自動テストで確かめています。特に、読み込みデータの検証と一時利用モードは、見た目だけでは判断しにくい部分です。図を作るときの操作と、作った後の情報の管理を、続けて考えられる道具にしていきます。