【連載目次】GCP×AI:0円で作る現代版「じぱんぐ島」開発記

序章:なぜ今「じぱんぐ」なのか?質素で強靭なサーバーレス開発の幕開け
開発タスク: 要件定義、技術スタックの確定、GCPアカウントの準備
名作カタン風ボードゲームを現代Webアプリとして蘇らせるプロジェクトの全貌。
低スペックPC(Chromebookなど)でもブラウザ一つで完結する「Vibe Coding」とは?
GCP無料枠とOSSを組み合わせ、特定のベンダーに縛られないアーキテクチャ設計の思想。
第1章:刃を研ぐ環境構築 ~Project IDXでゼロから始める~
開発タスク: Google AI Studioのワークスペース作成、Vite+React環境の初期化
1-1:ローカルの環境構築は不要。ブラウザで動く「Google AI Studio」の導入手順。
1-2:AI(Gemini)と対話しながらコードを生成するプロンプトの基本ルール。
1-3:命綱を張れ。ブラウザ完結環境におけるGitHub連携と安全なバージョン管理
第2章:盤面を創造する ~HTML5 Canvasによる六角形マップ描画~
開発タスク: ヘックス(六角形)グリッドの計算処理、ランダムな地形・数字タイルの生成
2-1:脱・重量級。HTML5 Canvasで「サクサク動く」サイバー空間を錬成する
2-2:幾何学をコードに変える。数学的な六角形タイルの描画ロジックをAIに生成させるコツ
2-3:タイルに命を吹き込むアセット配置(工場やダークウェブ)
第3章:運命のサイコロと掟 ~FastAPIで作る堅牢なゲームロジック~
開発タスク: FastAPIによるバックエンドAPI構築、ダイスロールの実装、資源付与ロジック
3-1:ゲームの「不正」を許さない。フロントエンドではなくバックエンドでロジックを管理する重要性。
3-2:Python(FastAPI)を用いた高速なAPI設計と、Dockerによるコンテナ化(脱ベンダーロックイン戦略)。
3-3:資源、ハッキング、サイバー戦。たった1日でブラウザに産声を上げたメガテック・ボードゲームの全貌
3-4:『ネオ・ジパング:サイバー・コーポレーション』 開発日誌:孤独な箱庭から、闘争の舞台へ
3-5:4人プレイ実装!スネークドラフトとNPCがもたらす「建築か、戦闘か」のジレンマ
3-5:多層化するサイバー空間。ステージ選択システムと「スケールの壁」への挑戦
3-6:絵文字は最強の圧縮言語!複雑なルールを「算数」に変える『ネオ・ジパング』の直感的UIデザイン
3-7:AIアルゴリズムは「小さく特化させて、最後に統べる」のが最強のコツ
第4章:プレイヤーの絆を繋ぐ ~Firestoreによるリアルタイム同期~
開発タスク: Firestoreのデータベース設計、リアルタイムリスナーの実装
複雑なWebSocketサーバーを自作せず、Firestoreの無料枠を活用して状態を同期する。
「Aさんがサイコロを振った結果」を「Bさんの画面」に即座に反映させる仕組み。
NoSQLにおける、ボードゲームのセッション(部屋)とプレイヤーデータの構造化。
第5章:国を築き、大名を目指す ~建築と勝利条件の実装~
開発タスク: 道・砦・城の建築ロジック実装、資源の消費判定、石高(スコア)計算
集めた資源を消費してマップ上に建物を配置するUIとAPIの結合。
「自分の道に繋がっているか」「他の建物の隣ではないか」という複雑な建築ルールのバリデーション処理。
特定の条件を満たした際の「大名」称号の獲得と、ゲームクリア判定の実装。
第6章:いざ出陣、そして運用へ ~Cloud Runへのデプロイとコスト管理~
開発タスク: バックエンドのCloud Runデプロイ、フロントのCloudflare Pagesデプロイ
完成したシステムを世界に公開する。GCP Cloud RunとCloudflare Pagesを使った無料デプロイ手法。
リクエストが来た時だけ動く「ゼロスケール」によるコスト最適化の恩恵。
継続的な運用に向けて。課金アラートの設定と今後の展望。
いいなと思ったら応援しよう!
忍の知恵と技術への「お布施(チップ)」を賜りたく存じます。頂いた財は、持続可能な社会、子供たち、自然、そしてあなたへの還元(有益な発信・開発)に全額投資いたします。画面下のボタンより、影の立役者たる拙者への御調達をお願い申す。一期一会の御縁に、深き感謝を。