寸法指定の2D作図ツール

2026.07稼働中

依頼

社内で使っている CAD は MacBook に入れられない。OS に左右されず、ブラウザだけで使えるものが欲しい、という話から始まった。

簡単な確認と単純な作業のためのツールで、寸法を数値で確かめるところまでをこれで済ませる。本格的な作図はこれまでどおり CAD で行う。

設計から公開まで1人で作成した。

矩形・円・線・テキストを用紙の上に置き、寸法をmm単位で指定して配置する。

図形の作成・移動・回転、整列と等間隔配置、グループ化、方眼への吸着、JSONファイルの保存と読込、自動保存、Undo/Redo などができる。

サーバーもデータベースも置かない。図面はブラウザの中と、利用者が保存したファイルにしか存在しない設計にした。

預からなければ、個人情報の取り扱いを考えなくてよい。また、運用コストも実質ゼロになる。

複数のタブで同じツールを開くと自動保存が互いを上書きし合うため、Web Locks API で書き込むタブを1つに絞っている。

単体テストは純粋関数だけを対象にした。描画とブラウザのAPIにはテストを書かないと最初に決めて、そのぶんを実際のブラウザでの確認に回した。canvas は描いた結果がピクセルとしてしか残らないため、スクリプトでピクセルを直接読んで図形の位置を確かめた。

それでも届かない範囲が残った。自動で確かめた分がすべて通ったのに、手で触ると不具合が出たことがある。原因は、JIS配列では event.code がキーの刻印とずれることだった。自動操作の側が US配列を前提に組み立てるため、このずれ自体を再現できない。