D-shape — 算数プリント用 作図ツール

小学校の先生や塾講師が、算数のプリントやテスト用の図形問題をブラウザ上で素早く作成し、ベクターデータ（SVG）としてダウンロードできる専用作図ツールです。

公開状況: 現在はリポジトリのみの公開で、GitHub Pages でのWeb公開はしていません。 ローカルで index.html を開くか、簡易サーバー（python -m http.server 8000）で利用してください。

🎯 アプリの目的

WordやExcelの標準機能では微調整が難しい「正確な図形」や「立体図形（見取り図）」を、直感的なマウス操作で作成できます。出力はSVG形式のため、印刷しても線がぼやけず、高画質な教材を作成可能です。

✨ 主な機能

1. 多彩な図形描画

• 平面図形 (2D): 長方形、三角形、円、平行四辺形、台形、扇形
• 立体図形 (3D): 直方体、円柱、円錐
  • ※ 立体図形は「キャビネット図（45度）」と「等角投影図（30度）」の投影法切り替えに対応
• 展開図: 直方体の展開図、円柱の展開図
• 補助記号: 直角マーク、角度の弧、等長マーク

2. 直感的なキャンバス操作

• ドラッグ＆ドロップ: 図形の移動や、青いハンドル（頂点）を引っ張る直感的なサイズ変更
• スナップ機能: 図形が背景の 5mm 方眼（20px 単位。1cm = 40px）にピタッと吸着。「グリッドに合わせる」で切り替え
• 範囲選択: キャンバスのドラッグで複数図形をまとめて選択・移動

3. プリント作成支援ツール

• 長さの自動表示: 選択した図形の辺の長さを自動計算し、テキストラベルとして一括配置
• テキスト追加: 自由な文字や記号を追加可能
• 塗りつぶし設定: 白黒印刷に便利な「斜線（網掛け）」や「グレー」に対応

4. ショートカットキー対応

• Ctrl + Z / Ctrl + Y (Mac: Cmd) : 元に戻す / やり直し
• Ctrl + C (Mac: Cmd + C) : 図形のコピー
• Ctrl + V (Mac: Cmd + V) : 図形のペースト
• Delete / Backspace : 選択図形の削除

5. エクスポート

• 作成したキャンバスを .svg 形式でダウンロード保存

🛠 技術スタック

• 言語: HTML5, CSS3, Vanilla JavaScript
• 描画: SVG (Scalable Vector Graphics)
• 構成: 単一の index.html のみで完結（ビルド不要）
• ホスティング: なし（完全静的なため、任意の静的ホスティングに配置可能）

🚀 使い方・ローカルでの実行方法

特別な環境構築は不要です。

1. 本リポジトリをクローン、またはZIPでダウンロードします。
2. フォルダ内の index.html をお好みのブラウザ（Chrome, Edge, Safari等）で開くだけで、すぐに利用できます。

データの扱い

• 作図の内容はブラウザ内だけで扱い、外部へ送信しません。外部ライブラリ・CDN も読み込みません。
• 作図データはブラウザに保存されません。ページを閉じる前に「SVGとして保存」してください。

制限事項

• マウス操作を前提にした PC 向けのツールです。スマートフォン・タブレットでの表示や操作には対応していません。

開発

python -m http.server 8000   # プレビュー
npm test                     # テスト（Node.js 22 以上、依存パッケージなし）
npm run check                # HTML の静的チェック

• テスト（tests/）は index.html を変更せずに描画・履歴の関数を取り出し、全図形の SVG 生成・投影法・元に戻す／やり直しを確認します。
• 変更履歴は CHANGELOG.md を参照してください。
• 開発方針は edi-tool 開発原則 に従います。

関連ツール

• edi-tool のツール一覧

ライセンス

MIT License © 2026 ISHIKAWA, Natsuki