zukei-drafter（図形作成さん）

公開URL: https://edi-tool.github.io/zukei-drafter/

教材・書籍・プリントで使う 2D / 3D 図形を、数値入力から数学的に生成し、 プレビューして高解像度PNG（またはSVG）として保存できる静的Webアプリです。

自由配置・編集を行う作図ツールではなく、「数値を指定 → 図形を生成 → プレビュー → 画像として保存」という図形ジェネレーターです。

使い方

公開URLを開けばそのまま使えます。ローカルで動かす場合もビルドは不要ですが、 ESモジュールを使っているため file:// で直接開くのではなく、任意の 静的サーバー経由で開いてください。

git clone https://github.com/edi-tool/zukei-drafter.git
cd zukei-drafter
python3 -m http.server 8000   # 任意の静的サーバーでOK
# ブラウザで http://localhost:8000 を開く

1. 上部で「2次元」「3次元」を切り替えます。
2. 左のパネルで図形の種類・寸法・角度などを入力します。値を変更すると 即座にプレビューへ反映されます（スマートフォンでは図が画面上部に固定され、 入力欄をスクロールしながら変化を確認できます）。
3. 成立しない入力（三角不等式を満たさない、角の和が180°以上、空欄、 0以下の寸法など）はエラーメッセージで通知され、図は描かれません。 一般多角形が閉じない場合は形を補正せず、開いた折れ線と 「閉じていません（閉合誤差 ○○）」を表示します。
4. 線色・線幅・塗り（なし/白/任意色）、3Dの隠線（破線/非表示）を調整できます。
5. 2D では「寸法・注釈」で頂点名（A, B, C…）・辺の長さ（数値のみ／寸法線）・ 内角（弧＋角度）・直角記号（90°を自動検出して四角い記号で表示）を 表示できます（既定はすべて非表示）。長さの単位（例: cm）、 小数点以下の桁数、文字サイズを指定できます。ラベルは図形の外側（角度は内側）に 重ならないよう自動配置され、画像サイズもラベルが収まるように調整されます。 3D では「寸法」で幅・高さ・奥行き（角柱・角錐は底面の一辺＋高さ、 円柱・円錐は半径＋高さ）を表示できます。同じ長さの辺が多いため、 見えている辺1本だけに表示します（角錐の高さ、円柱・円錐の高さ・半径は 実際の辺が無いので破線の補助線）。単位・桁数・文字サイズは2Dと同様です。
6. プレビュー下の保存欄で背景（透明/白）と PNG の大きさを選び「PNGを保存」します （Ctrl+S / ⌘S でも保存できます）。 画像サイズは図形の縦横比＋余白に合わせて決まり（長辺800pxが1x）、 1x/2x/4x または任意の出力幅（最大10000px）を選べます。出力サイズは ボタンの上に表示されます。「SVGを保存」でベクター形式でも保存できます。 「画像をコピー」で Word・PowerPoint 等へ直接貼り付けられます。
7. 図形・決め方・投影法はアイコン付きのボタンで選びます。三角形には 「正三角形」「直角三角形 (3:4:5)」「二等辺三角形」のプリセットがあります。
8. 入力内容は URL（# 以降）に自動保存され、再読み込みしても残ります。 「リンクをコピー」で同じ図を再現できる URL を共有でき、「初期値に戻す」で すべてリセットできます。
9. 頂点数・角度・倍率・線幅・文字サイズはスライダーでも、長さなどの数値は −/＋ボタン（長押しで連続変更）でも調整できます。 三角形では、選んだ決め方で使う辺・角を図で示し、求まった3辺と3つの角を表示します。 一般多角形は「最後の辺を自動で決めて閉じる」をオンにすると、最後の辺が 自動計算されて必ず閉じた図形になります。

対応図形

• 2D: 正多角形（頂点数3〜20、回転角0で底辺が水平）、三角形（SSS/SAS/ASA）、 一般多角形（各辺の長さと方向角を指定、閉合チェック付き）。 頂点名・辺の長さ（寸法線）・内角・直角記号の注釈に対応
• 3D: 立方体・直方体・三角柱・四角柱・三角錐・四角錐・円柱・円錐
• 投影法: 等角投影・カバリエ投影・キャビネット投影・任意斜投影 （斜投影は奥行き方向角度・奥行き倍率を指定可能）
• 隠線: 多面体は面の向きと投影方向から可視/不可視の辺を判定。円柱・円錐は 底面の奥側の弧を判定。いずれも破線表示または非表示を選択可能

設計概要

• HTML / CSS / Vanilla JavaScript のみ。フレームワーク・ビルドステップなし。
• SVGを描画の正本とし、PNG保存はSVGをCanvasに描画して canvas.toBlob() で行う（ブラウザ標準APIのみ）。
• 計算（geometry2d / geometry3d / projections / hidden-line / ellipse / curved-solids / annotations / scene-builder）はDOMに依存しない純粋関数で、 SVG生成（render-svg）、PNG/SVG出力（export-png）、UI（app）と 責務を分けています。
• 投影はすべて線形写像として実装し、その投影方向（視線）を行列から厳密に 求めています。これにより多面体の隠線判定が正確になり、円柱・円錐では 円の投影像（楕円）と輪郭線を解析的に求められます。輪郭線は楕円に厳密に 接し、曲線は多角形近似ではなく Bézier 曲線として出力されます。

詳細な設計判断・曖昧点への対応は REQUIREMENTS.md を、 モジュール構成・数式・データフローは ARCHITECTURE.md を、 開発の現状・経緯・次の作業候補は HANDOFF.md を参照してください。

依存ライブラリについて

本番動作に外部ライブラリは一切使用していません（依存ゼロ）。 幾何計算・投影計算・SVG→PNG変換はいずれも自前実装、または Image / Canvas / Blob などのブラウザ標準APIのみで実現しています。 外部フォント等のCanvasをtaintしうるアセットも使用していません。 （調査内容は REQUIREMENTS.md の「対応する既存OSS調査」を参照）

開発時のブラウザテストにのみ Playwright （Apache License 2.0）を devDependency として使います。アプリの動作には 不要で、npm install しなくてもアプリも単体テストも動きます。

テスト

npm test                 # 幾何計算の単体テスト（Node.js 18+、依存なし）
npm install              # 以下のブラウザテストを実行する場合のみ
npx playwright install chromium
npm run test:e2e         # 実ブラウザでのUI・PNG出力テスト

• 単体テスト（tests/*.test.mjs）: 正三角形・正方形・正六角形などの正多角形、 三角形 SSS/SAS/ASA と不成立入力、一般多角形の閉合判定、等角・カバリエ・ キャビネット・任意斜投影、投影方向、全多面体の面の向き、隠線判定、 円柱・円錐の輪郭線の接線性と可視弧、注釈（角度計算・ラベル配置が重ならず 画像内に収まること）、SVGシーン生成。
• ブラウザテスト（tests/e2e/）: 入力検証とエラー表示、全形状×全投影の描画、 PNGのサイズ（2000px超を含む）・透明/白背景、SVG保存、注釈の表示切替、 PNG化した注釈の文字がブラウザ自身の描画と一致すること、コンソールエラーが 出ないこと。
• どちらも GitHub Actions で push / PR ごとに実行されます。

未実装・既知の制限事項

• 寸法・注釈は 2D のみ対応です（3D は未対応）。等長記号は未実装です。
• 注釈の文字は端末のシステムフォント（Helvetica / Arial / 各OSの日本語フォント等）で 描かれるため、OS によって字形がわずかに異なります。
• 隠線判定は凸な立体に対して厳密な方法です。対応する立体はすべて凸ですが、 凹多面体や複数の立体の重なりには対応していません。
• 円柱・円錐の軸は鉛直（Y軸）に固定です。
• 「四角柱」は幅・奥行き・高さを指定する直方体と同じ形状生成を使います （既定値を正四角柱にしています）。

ライセンス

MIT License（LICENSE を参照）。