Skip to content

edi-tool/D-shape

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 

Repository files navigation

D-shape

作図ができます。

算数プリント用 プロ仕様作図ツール

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

🎯 アプリの目的

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

✨ 主な機能

1. 多彩な図形描画

  • 平面図形 (2D): 長方形、三角形、円、平行四辺形
  • 立体図形 (3D): 直方体、円柱
    • ※ 立体図形は「キャビネット図(45度)」と「等角投影図(30度)」の投影法切り替えに対応

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

  • ドラッグ&ドロップ: 図形の移動や、青いハンドル(頂点)を引っ張る直感的なサイズ変更
  • スナップ機能: 図形が背景の方眼(10px単位)にピタッと吸着
  • 範囲選択: キャンバスのドラッグで複数図形をまとめて選択・移動

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

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

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

  • Ctrl + C (Mac: Cmd + C) : 図形のコピー
  • Ctrl + V (Mac: Cmd + V) : 図形のペースト
  • Delete / Backspace : 選択図形の削除

5. エクスポート

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

🛠 技術スタック

  • 言語: HTML5, CSS3, Vanilla JavaScript
  • 描画: SVG (Scalable Vector Graphics)
  • 構成: 単一の index.html のみで完結(ビルド不要)
  • ホスティング: GitHub Pages (完全静的サイト)

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

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

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

🌐 公開先 (GitHub Pages)

(※ここにGitHub Pagesの公開URLを記載します: https://[ユーザー名].github.io/[リポジトリ名]/

About

作図ができます。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages