6回にわたって作ってきた都市開発シミュ「Aurum City」を、いよいよ世界に出す。最終回のテーマは3つ。(1) バックエンド不要の静的ビルドを作り、WordPressのサイトへ「置くだけ」で公開する。(2) 「たぶん動いてる」で終わらせず、「動いている」を機械で証明する検証のやり方。(3) 全パネルをドラッグで動かせるUIなどの仕上げ。そして最後に、4度の失敗も含めたこの連載の全工程を振り返る。バイブコーディングで「動くもの」を「出せるもの」に変える、最後のひと押しだ。
🎮 ▶ 完成版の Aurum City をブラウザで遊ぶ（インストール不要）。この記事は、その公開までの最後のひと押しだ。連載の全記事はバイブコーディング開発実例（一覧）から。
目次
この連載で作ったもの（全6回の地図）
- ① 土台と3レイヤ設計 —
sim/render/uiの分離・グリッド・Canvas描画 - ② AIでドット絵タイルを作る — 生成→均一化→アルファ実測→組み込み、道路の自動接続
- ③ 街を「動かす」— 需要・成長・経済の決定論シミュレーション（MVP完成）
- ④ 4度つまずいて座標系ごと作り直した話 — 真のアイソメグリッドへの全面移行
- ⑤「面白くない」を4軸で解消する — 目標・施設・イベント・音
- ⑥ 静的ビルドをWordPressへ公開する（この記事）— 検証と配信、そして連載の総括
第6回のゴール
この記事を読み終えると、ビルドで生成した静的ファイル一式を、サーバーへ置くだけで公開できること、そしてその公開物が「本当に動く」ことを機械的に確かめる方法が分かる。まず、完成した Aurum City の姿を見てほしい。ここまで、長い道のりだった。
Step 1. 静的ビルド：バックエンド無しで「置くだけ」
Aurum City は、サーバー側のプログラム（バックエンド）を一切持たない。すべてブラウザの中で完結する。だから公開は驚くほど単純だ。npm run build で、配布用のファイル一式を dist/ に吐き出す。
// package.json（抜粋）
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build", // ① 型チェック → ② 本番ビルド
"typecheck": "tsc -b",
"test": "vitest run"
}ビルドは2段。まず tsc -b で型チェックし（型が合わなければここで止まる＝壊れたものを配らない）、通れば vite build が JavaScript・CSS・画像・音声を最適化して dist/ にまとめる。出力はHTML・JS・CSS・アセットのただの静的ファイル。データベースもサーバー処理も要らない。この dist/ をまるごとサーバーに置けば、それで公開は完了する。
Step 2. WordPressのサイトへ公開する
このブログ（bugattialpha.com）はWordPressで動いている。Aurum City は静的ファイルなので、WordPressの投稿システムとは別に、サーバーのサブディレクトリ（例：/demo/aurum-city/）へ dist/ を丸ごとアップロードするだけでいい。記事からはリンクやiframeで誘導する。
アップロードはSFTP（ファイル転送）で行う。バックエンドが無いので、パーミッションやプロセスの心配がない。これが「静的」の最大の強みだ。ビルド成果物や依存解決でつまずく事故が、そもそも起きない。書いて、ビルドして、置く。それだけで、自分の作ったゲームがURLひとつで世界に届く。実際に、この連載で作った Aurum City は bugattialpha.com/demo/aurum-city/ で公開している。今この場で遊べる。
💡 画像は WebP で軽量化：配布サイズを抑えるため、建物・地形の画像（約90枚）はビルド後に PNG → WebP へ一括変換している（透過はそのまま保持）。今回は画像の合計が 約557KB → 約172KB（約69%削減）になった。WebP は透過つきでもPNGより大幅に小さく、いまはどのブラウザでも表示できる。ソースはPNGのまま扱い、配布物だけをWebP化することで、開発の手間を増やさずに読み込みを速くできる。
💡 静的配信という選択：個人開発では、可能な限り「静的」を選ぶと運用がとにかく楽になる。サーバーが落ちる・更新で壊れる・不正アクセスされる、といったリスクの多くが、動かすプログラムをサーバーに置かないことで消える。ブラウザで完結するゲームやツールは、この恩恵を最大限に受けられる。
Step 3. 「動いている」を機械で証明する
公開する前に、必ず確かめることがある。「たぶん動いてる」ではなく、「動いている」を証拠で示す。この連載を通して守ってきた検証の規律を、最後にまとめておく。
- 型チェック：0エラー（
tsc -b）。型の矛盾を残したまま配らない。 - 自動テスト：246個すべて緑（
vitest）。第3回で作った決定論のおかげで、成長・経済・保存・イベントのルールを機械が検証する。 - 本番ビルド：成功（
vite build）。実際に配布物が生成できる。 - 実機の目視：コンソールエラー0。ブラウザ自動操作（Playwright）で、街を作る→育つ→保存/読込まで通し、エラーが1つも出ないことを確認する。
🔎 この連載で最も高くついた教訓の再確認：第4回で4度つまずいたのは、見た目の印象で「直った」と言ったときだった。以来、視覚的な成果物は実測で確かめる。建物なら透明度（アルファ値）の実測、レイアウトなら実際の座標の計測、街並みなら複数を隣接させた状態でのスクショ。「動いてるように見える」と「動いている」は違う。AIと一緒に速く作るほど、この線引きが品質を守る。
Step 4. 仕上げ：全パネルを動かせるUI
最後の仕上げに、HUD・ミッション・ドック・ニュースなどすべてのUIパネルを、ドラッグで自由に動かせるようにした。位置はブラウザに記憶される。純UI層の機能で、sim にもレンダラにも触れない。
ここで1つ、実装で嵌まった罠を共有する。ランクやミッションのパネルは、条件によっては初回描画のあとに遅れて画面に現れる。普通の方法で「マウント時に保存位置を復元」しようとすると、この遅延マウント組は復元が効かない（要素がまだ無いときに復元処理が走ってしまう）。解決は callback ref。要素が実際にDOMに付いたその瞬間に、保存位置を適用する。
// src/ui/useDraggable.ts（要点）
// callback ref: ノードがアタッチした時点で現在のオフセットを適用（遅延マウントを救済）
const ref = useCallback((el: T | null) => {
nodeRef.current = el;
applyVars(el, offset.current); // el に --drag-x/--drag-y を設定
}, [applyVars]);この罠は、常に表示されているパネル（ドック）だけを見ていたら気づけなかった。遅延マウントするパネル（ミッション）でも復元を確かめて初めて露見した。第4回と同じ「特殊なケースまで実際に検証する」教訓が、UIでも効いている。
Step 5. 連載の総括：6回でいちばん大事だったこと
Aurum City は、地形の色ブロックから始まり、AIタイル、決定論シミュ、アイソメ移行、ゲーム性の4軸、そして公開まで到達した。全工程で一貫して効いた設計判断は、たった1つに集約できる。第1回で決めた3レイヤ分離だ。
- 層を分けたから、大改修に耐えた：第4回で座標系を丸ごと作り替えても、
simは無傷だった。第5回でイベント・交通・音を積んでも、コアのシミュは壊れなかった。 - 決定論とテストが、速さを支えた：同じ操作で同じ結果になるから、246個のテストでルールを凍結できた。AIに実装を手伝わせても、壊れたら気づける。
- いちばんの学びは「4度の失敗」：同じ症状が形を変えて再発したら、個別バグでなく前提を疑う。1個だけ見て「直った」と言わない。保証が要るものは後処理で確実に作る。この3つは、コードよりも価値のある教訓だった。
バイブコーディング（AIと一緒に作る開発）で最も大事なのは、AIに任せる部分と、人間が握る部分の線引きだと思う。生成やコーディングはAIに任せられる。だが、層の境界・検証の基準・「これで完成」の判断は、人間が握る。この連載が、その線引きの一例として役に立てば嬉しい。
まとめ：連載全体の要点
- 静的ビルドは最強に楽：
npm run build→dist/を置くだけ。バックエンド無しで運用リスクが激減。 - 公開前に機械で証明：型0・テスト246緑・ビルド成功・実機コンソール0。「見える」でなく「動く」を証拠で。
- 仕上げも層を守る：移動可能UIは純UI層。遅延マウントは callback ref で復元。
- 3レイヤ分離が全部を救った：大改修も機能追加も、土台を分けていたから無傷で通せた。
- AIと作るなら、境界と検証は人間が握る：これが6回を通しての結論。
ここまで読んでくれてありがとう。この連載が、「自分でも動くものを作れる」という最初の一歩の後押しになれば嬉しい。ほかのアプリの作り方も、同じ「実際に作った記録」として公開している。ぜひ覗いてみてほしい。
※ AI生成コンテンツの開示：Aurum City は、地形/建物タイル（画像生成AI）・BGM（ACE-Step）・効果音（数値合成）を含みます。いずれも商用利用可を確認のうえ使用しています。設計・実装にもAIを併用し、掲載コードは実際のソースからの抜粋、動作は自動テストと実機で検証しています。© 2026 Cooliris（記事本文と掲載コードの権利は作者に帰属します）。
🎮 ▶ 完成版の Aurum City を遊ぶ ・ この連載を最初から読む ・ ほかのゲーム開発の実例 ・ いろんなアプリの作り方
