Mindmap 本番稼働中個人プロジェクト

考えを広げても、いまいる場所を見失わない

小さな惑星のような形をしたマインドマップ。メモを開くと、その下のメモが周りに現れ、全体像も見えたままです。

Mindmap を開く技術的な詳細 GitHub で見る

ニーズ

多くのマインドマップツールでは、枝を開くと画面がごちゃごちゃになるか、別のページに移ってしまい、どこから来たのかがわからなくなります。

おなじみのアイデアの木構造はそのままにして、その中の移動のしかただけを変えること。

公開中の地図は、このナビゲーションが実際に動くデモです。変更は自動テストに合格したときだけ本番に反映されます。

3つのバージョンを通して、データはほとんど変わらず、変わったのは移動のしかただけでした。この2つを分けておいたおかげで、データに触れずに表示を2回作り直せました。

技術的な詳細技術スタック、アーキテクチャ、設計判断（技術職の方向け）

再帰的なテーブルひとつ notes(id, parent_id, x, y, title, content)。x と y は、親メモの球面上の経度と緯度（度）です。
ブラウザが読み込むライブラリは Three.js のみ。約760行の自作 JavaScript が、配置・ナビゲーション・編集を担当します。カメラは OrbitControls を使わず、球面座標を直接制御しています。
子の球の半径は親の0.46倍。ナビゲーション中にシーングラフを作り直すことはありません。
閲覧は公開、書き込みは前段の Cloudflare Access で保護し、サービスはトンネルの背後で 127.0.0.1 のみに待ち受けます。回避の試み22件（大文字・小文字の変更、二重スラッシュ、「..」を含むパス、URL エンコード、ほかの HTTP メソッド）は、すべてログインページに行き着きました。
攻撃者の視点で行ったレビューで、本物の欠陥が2つ見つかり、その日のうちに修正しました。すべてのルートに組み込んだ JSON パーサーのせいで匿名の訪問者がシステムログに書き込めたこと、そしてネットワークの読み込みが1回失敗しただけでナビゲーションが固まったことです。
GitHub Actions による継続的デプロイ。テストに合格したときだけ本番が更新されます。

スマートフォンでは、小さなメモの目印（6〜10 px）へのタップがよく外れていました。22 px のタッチ許容範囲を設け、次の階層を先読みしたことで、シミュレーションでのタップ成功が 12/17 から 17/17 になりました。
光のにじみ効果（bloom）が、スマートフォンでのボトルネックでした。スマートフォンではこれをオフにしたことで、複数の階層をまたぐカメラの移動が毎秒20フレームから37フレームになりました。

GitHub で見る