🏗️ はじめに：前回のあらすじと、新たな絶望
以前、以下の記事を投稿した「コードが書けない建築士」です。
【建築士×ChatGPT】「読み方も分からない技術」で、野良DXFを3秒で解析する爆速ツールをHTML1枚で作った話【2025年法改正】
前回は「汚い図面データ（DXF）を幾何学アルゴリズムで解析する」という**「ロジックの戦い」**でした。
これに味を占めた私は、さらなる野望を抱きました。
「次は、国交省のAPIから法規制を引いて、OpenAIのAPIで図面チェックする『最強の業務支援ツール』を作ろう」
AI（ChatGPT）にコードを書かせ、ローカルのHTMLファイル（通称：007.html）をダブルクリックした瞬間、私はパソコンの前で凍りつきました。
真っ赤なエラーログ。
「CORS policy」という謎の単語。
「file://」では動かないという現実。
これは、非エンジニア建築士が**「Webブラウザのセキュリティ（CORS）」という巨大な壁にぶつかり、「Cloudflare Workers」というクラウド技術を使ってそれをねじ伏せ、実務運用にこぎつけるまでの泥臭い記録**です。
🌪️ 第1章：執念の1枚ファイル「007.html」の全貌
サーバーやエラーの話をする前に、**「どうしても作りたかった機能」**を紹介させてください。
これがなければ、わざわざ苦労してまでCORSと戦う理由はありませんでした。
1. SVGによる「道路斜線」リアルタイム可視化
建築士にとって最も面倒で、かつ重要な検討の一つが「道路斜線制限」です。
このツールでは、HTML内に <svg> タグを埋め込み、スライダーで「道路幅員」や「後退距離」を動かすと、リアルタイムで斜線（勾配1.25）が再描画されるようにしました。
**「セットバックすると斜線がこう逃げる」**という感覚が、CADを立ち上げずにブラウザで直感的にわかります。
2. APIエラー時の「アナログ入力」フォールバック
住所から座標を引くAPIが不安定なときのために、**「住所検索がダメなら、Googleマップで見た緯度経度を直打ちすればいいじゃない」**という入力欄を実装しました。
システム的には不格好でも、現場で「止まらないこと」が最優先だからです。
3. AIによる図面適合判定
取得した法規制データをもとに、PDF図面をOpenAI（GPT-5）に投げ、「この敷地条件でこの図面はOKか？」を判定させる機能です。
💀 第2章：立ちはだかる「file://」と「CORS」の壁
「機能は完璧だ。あとはAPIキーを入れて動かすだけ！」
そう思って、取得したAPIキーをHTMLに直接書き込み、ファイルをダブルクリックしてブラウザで開きました。
しかし、動きません。ここからが本当の戦いでした。
絶望1：「file://」の罠
HTMLファイルをダブルクリックして開くと、ブラウザのアドレスバーは file:///C:/Users/... となります。
この状態だと、ブラウザ上の「オリジン（居場所）」が null 扱いになります。
セキュリティ上、多くのAPIや機能は null オリジンからのアクセスを拒否します。
「自分のパソコンにあるファイルなのに、なぜ動かないんだ？」
この理不尽さを理解するまでに、何度もスクショを撮ってはAIに聞き、同じ説明を繰り返させました。
→ 教訓：ローカルでも必ずサーバーを立てろ
Windowsならコマンドプロンプトで以下を打つのが最短でした。
py -m http.server 8787
これで http://localhost:8787 としてアクセスでき、ようやくスタートラインに立てます。
絶望2：CORS（Cross-Origin Resource Sharing）
サーバーも立てた。なのに動かない。F12（開発者ツール）には無慈悲なメッセージが。
Access to fetch at ... from origin 'http://localhost:8787' has been blocked by CORS policy
「CORSって何？ 壊れてるの？」
いいえ、仕様です。Webブラウザは、ユーザーを守るために**「許可されていない外部サイト（APIサーバー）」への通信を勝手にブロック**します。
API提供側が「お前を通していいよ」と言ってくれない限り、ブラウザはどうあがいても通してくれません。
さらに、HTMLの中にAPIキーを書くこと自体が、セキュリティ的に**「鍵を道端に捨てる」のと同じ行為**だと知りました。
詰みました。
「HTML1枚で完結させたかったのに、結局サーバー（バックエンド）が必要なのか…？」
☁️ 第3章：救世主「Cloudflare Workers」で"裏口"を作る
ここで諦めかけた私が出会ったのが、Cloudflare Workers でした。
プロのエンジニアならAWSやVPSを契約するのでしょうが、私には管理できません。
Workersは、**「JavaScriptのコードを置くだけで、世界中に配備されるサーバー」**であり、しかも個人利用ならほぼ無料。これだ！と思いました。
私が構築した構成はこうです。
- Before（失敗）: ブラウザ → 外部API（× CORSエラー ＆ キー丸見え）
- After（成功）: ブラウザ → Workers（中継） → 外部API（◎ OK）
Workersを「身代わり」にしてAPIを叩かせ、その結果だけをブラウザに返すのです。
コピペで動く worker.js （完全版）
AIに書いてもらい、試行錯誤の末に完成したコードがこれです。
このコードには、建築士の執念である**「セキュリティと手軽さの両立」**が詰まっています。
export default {
async fetch(request, env) {
// 1. 許可するオリジン（自分のサイト）のリスト
// ここを一文字でも間違えると動かない。F12で確認したURLを貼る！
const ALLOWED_ORIGINS = [
"http://localhost:8787", // 開発用
"https://YOUR-PAGES.pages.dev" // 本番用（後述）
];
const origin = request.headers.get("Origin");
// CORSヘッダの準備（これが"通行手形"になる）
const corsHeaders = {
"Access-Control-Allow-Methods": "GET, HEAD, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
};
// 許可リストにある場合のみ、Allow-Origin を返す（Allowlist方式）
if (ALLOWED_ORIGINS.includes(origin)) {
corsHeaders["Access-Control-Allow-Origin"] = origin;
} else {
// 許可外はブロック（またはnull）
corsHeaders["Access-Control-Allow-Origin"] = "null";
}
// ブラウザからの「確認（OPTIONS）」リクエストには即OKを返す
if (request.method === "OPTIONS") {
return new Response(null, { headers: corsHeaders });
}
// 2. 転送処理
const url = new URL(request.url);
const apiId = url.searchParams.get("api");
// ヘルスチェック機能（?api=__health）
// これを作っておくと「Workersが生きてるか」が一発でわかる
if (apiId === "__health") {
return new Response(JSON.stringify({
ok: true,
hasKey: !!env.RFL_KEY
}), {
headers: { ...corsHeaders, "Content-Type": "application/json" }
});
}
// APIキーはここ（env.RFL_KEY）で注入する！HTMLには書かない！
// ...（実際のフェッチ処理は省略）...
}
};
このコードをWorkersにデプロイし、APIキーを「Settings」→「Variables and Secrets」に隠しました。
これで、私の 007.html は**「鍵を持たない安全なクライアント」**になりました。
⌨️ 第4章：F12の衝撃と「location.origin」の呪文
コードは書けました。しかし、設定は一筋縄ではいきません。
一番苦労したのは、ALLOWED_ORIGINS に書くURLの正確さです。
ChromeのF12（開発者ツール）を震える手で開き、Console タブに向かいました。
そこで何度も何度も入力したのがこれです。
location.origin
-
locatoinと打ち間違えてエラーになり、 - コピペしようとしたらChromeに「貼り付け禁止（警告）」を出されて焦り（
allow pastingと入力して解除）、 - ようやく表示された
http://localhost:8787という文字列。
この文字列を、一文字一句違わず Workers のコードに貼り付ける。
末尾の / があるかないか、http か https か。
この「確認作業」こそが、今回一番時間を使い、そして一番勉強になったプロセスでした。
🚀 第5章：完成した「最強の業務ツール」
こうして、ローカルで完全に動作することを確認した後、私は 007.html を index.html にリネームし、Cloudflare Pages にアップロード。
Workersの許可リストに本番URLを追加し、ついに完成しました。
① APIデータ取得＆道路斜線シミュレーション（Step 1）
住所を入力すると、API経由で用途地域や防火地域を取得。右側には、その場で計算された道路斜線の断面図が表示されます。
② AIによる図面自動チェック（Step 2）
Step 1の法規制データを踏まえ、アップロードされたPDF図面をAIが解析。「適合」「要確認（WARN）」を判定し、修正指示メールの下書きまで書いてくれます。
🧠 考察：AIネイティブ開発者の「第3の層」
今回の開発を通じて感じたのは、私のような開発スタイルは、実はこれからの主流になるのではないかということです。
開発者の層をピラミッドで考えると、今はこうなっています。
| レベル | 状態 | 推定人口比 |
|---|---|---|
| Lv.1 |
AIとチャットする層 「すごいね」と言って終わる。業務メールの作成などに使う。 |
90% |
| Lv.2 |
ローカルでコードを書かせる層 「HTML書いて」と言って手元で動かす。しかしCORSの壁で挫折する。 |
9% |
| Lv.3 |
AIネイティブ開発者（今回） AIと対話し、サーバー（Workers）やデプロイの壁を突破して「動くアプリ」にしてしまう。 |
1%未満 |
多くの非エンジニアは「Lv.2」で止まります。「コードは書けたけど、環境構築がわからない」からです。
しかし、**「AIにコードを書かせてHTML1枚でアプリ化し、面倒なバックエンドだけWorkersに任せる」という「マイクロアプリ（Micro-App）」**の構成は、個人の業務効率化において最強のコストパフォーマンスを発揮します。
私は知らず知らずのうちに、この「Lv.3」の領域に足を踏み入れていたようです。
🏁 まとめ：すべての非エンジニアへ
前回の「野良DXF」の記事は**「発想の勝利」でしたが、今回は完全に「泥臭い執念の勝利」**でした。
一番しんどかったのは、コードを書くことではなく、
「スクショを撮って確認し、F12を開いてエラーを見つめ、location.origin を打ち込む」
という地味な確認作業の連続でした。
しかし、その過程があったからこそ、今、手元には**「自分だけの最強ツール」**があります。
もし、私と同じように「業務独自のツールを作りたいが、CORSとかサーバーとか言われて諦めている」方がいれば、ぜひ Cloudflare Workers を試してみてください。
コードが書けなくても、AIと根気とF12があれば、道は開けます。
（追伸：毎回Zipでアップロードするのが面倒になってきたので、次は GitHub連携 で自動更新することに挑戦します。建築士の挑戦はまだ終わりません。）
👉 【建築士×GIS】Google Maps上で「雨水の流下経路」を1クリック追跡する“HTML1枚”ツールを作った（国土地理院 標高×道路中心線×Cloudflare Pages）
推奨タグ
ChatGPT CloudflareWorkers 個人開発 建築 API