4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【建築士×ChatGPT】ブラウザでCADは動くのか? 非エンジニアがHTML1枚で「図面修正ツール」を実装してみた【脱インストール】

Last updated at Posted at 2026-01-06

🏗️ はじめに:前回のあらすじと「誤算」

こんにちは。東海地区で設計事務所をやっている、プログラミング知識ゼロの建築士です。

前回、ChatGPTとペアプロで**「構造計算用DXFを解析して柱負担面積を全自動計算するツール(HTML1枚)」**を作った話をしました。

▼ 前回の記事はこちら
【建築士×ChatGPT】「読み方も分からない技術」で、野良DXFを3秒で解析する爆速ツールをHTML1枚で作った話【2025年法改正】

おかげさまで、エンジニアの方からLGTM(いいね)をいただき、調子に乗って第2弾です。

前回のツールは確かに革命的でした。ドラッグ&ドロップ一発で計算が終わる。
しかし、運用していくうちに**「ある現実」**に直面しました。

「……10件に2件くらい、計算ミスってない?」

📉 80%の壁

建築図面(いわゆる野良DXF)は、想像以上にカオスです。
壁の線が微妙に離れていたり、ゴミデータが飛んでいたり。
私の作った全自動アルゴリズムは、8件は完璧に処理しますが、残り2件の「汚い図面」で外壁線を読み間違えることがありました。

エンジニアなら「アルゴリズムを強化して精度を99%にする」道を選ぶかもしれません。
しかし、私は非エンジニアの実務家です。こう考えました。

「AIが間違えるなら、人間が直せばいいじゃない」

そうして生まれたのが、今回紹介する**「手動修正機能付き・簡易CADツール」**です。


🛠️ 成果物:HTML製「俺専用CAD」

まずは動いている様子をご覧ください。

002.gif

このツールの役割

これは、前回の全自動ツール(c014)の前工程で使う**「整音スタジオ」**のようなものです。

  1. 構造計算ソフトから出たDXFを読み込む。
  2. 自動認識が甘い部分(外壁線の欠けなど)を、手動ツールでササッと修正する。
  3. **「専用書出ボタン」**を押す。
  4. 前回のツールに食わせる → 成功率100%!

主な機能(すべてHTML1枚に入っています)

  • DXFビューワー: ブラウザで図面を高速表示
  • 作図機能: 壁(線分)の描画、削除、オフセット(これ重要!)
  • 自動床面積計算: 修正した線からリアルタイムで面積を算出
  • 専用エクスポート: 解析用ツールが確実に読める形式でデータ出力

💻 開発環境は「メモ帳」と「ブラウザ」だけ

ここで、少し技術的な(?)裏話をさせてください。
「こんなCADツールを作るなんて、さぞかし高価な開発環境を使っているんだろう」と思われるかもしれません。

私の開発環境はこれです。

  • エディタ: メモ帳(または標準テキストエディタ)
  • 実行環境: Webブラウザ(Edge や Chrome)
  • 相棒: ChatGPT

以上です。VS Code? GitHub? Docker? 一切使っていません。

「世界で一番敷居の低い」開発スタイル

私がやっているのは、ただこれだけです。

  1. ChatGPTに「こういう機能を追加して」と日本語で頼む。
  2. 出てきたコードをコピーする。
  3. **「メモ帳」**にペーストして、上書き保存する。
  4. ブラウザの更新ボタンを押す。

動かなければ、エラー画面をコピペしてAIに投げる。その繰り返しです。

全人類が「開発環境」を既に持っている時代

これは衝撃的な事実ですが、日本中のあらゆる中小企業の、一番スペックの低い事務用PCにも、既に「最強の開発環境(ブラウザとメモ帳)」が入っているということです。

もはや「ソフトがないから作れない」「環境構築が難しい」という言い訳は通用しません。
社長のPCでも、新入社員のPCでも、ChatGPTさえ開ければ、そこは一瞬で「ソフトウェア開発室」になります。

この「HTML1ファイル開発」は、非エンジニアが現場で戦うための、最も理にかなったゲリラ戦法なのです。


🧠 技術的な「使い回し」と「進化」

開発手法はアナログですが、中身のロジックは前回のツールを**「魔改造」**したものです。

1. ロジックの流用:ドット絵解析で「床面積」を出す

前回のツールで好評だった**「図面をドット絵(グリッド)として塗りつぶして解析する」というロジック。
これを今回は「柱負担面積」ではなく、
「床面積(求積)」**の算出に応用しました。

  • ベクター(線)で囲まれた領域を、ラスター(ドット)で塗りつぶす。
  • そのドットの数を数えれば、複雑な多角形でも一瞬で面積が出る。

この**「脳筋アプローチ」**のおかげで、難しい数学を使わずに正確な床面積が出せるようになりました。

2. また出た!「Uint8Array」

前回、AIに教えてもらった謎の技術**「Uint8Array(読み方はまだ分かっていません)」**。
今回もAIに「動作を軽くして!」と頼んだら、やっぱりこれを使ってきました。

お絵かきソフトのようにグリッドを塗りつぶす処理は重くなりがちですが、このバイナリ配列のおかげで、ブラウザ上でもサクサク動くCADになっています。
**「よく分からないけど、速いからヨシ!」**の精神です。

3. こだわりの「オフセット」機能

建築士として譲れなかったのが**「オフセット(平行線複写)」**機能です。
壁厚の分だけ線をずらす、というのは建築で最も使う操作の一つ。

🤖 AI: 「数学的にベクトルの法線を計算して…」
👨‍💼 私: 「理屈はいいから、クリックした壁の横に線を引かせて!」

このやり取りの末、直感的に使えるオフセット機能が実装されました。これがあるだけで、修正作業の爆速化が実現しました。


🚀 結論:自動化の「ラストワンマイル」を埋める

DX(デジタルトランスフォーメーション)というと、「ボタン一つで全自動!」を目指しがちです。
しかし、実務の現場にはどうしても例外(汚いデータ)が存在します。

  • プランA: 数千万円かけて、例外を処理できる完璧なAIを作る
  • プランB: 「例外が起きた時だけ人間が直せる」軽いツールを自作する

中小企業の正解は、間違いなくプランBです。
今回のツールは、前回の「全自動ツール」を補完する**「Human in the Loop(人間が介入する仕組み)」**として機能しています。

今後の野望

この「俺専用CAD」、まだまだ進化させる予定です。
作図機能を充実させて、最終的には**「ブラウザだけで基本設計が終わるツール」**にまで育て上げようと画策しています。

プログラミング知識ゼロでも、**「メモ帳」と「ブラウザ」と「現場の情熱」**さえあれば、AIを使って自分だけの最強ツールを作れる時代が来ています。

建築士の市民開発への挑戦は、まだまだ続きます!


Tags:
ChatGPT 建築 DX JavaScript 個人開発 CAD

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?