表示テーマ
GeoGainer開発 技術ケーススタディ
GeoGainerは、友人とブラウザで遊ぶために開発したオンライン・ターン制ボードゲームです。このケーススタディでは、プロダクト改善、フロントエンド、ゲーム状態、Cloudflare、Bot用DSL、AIエージェントとの開発プロセスを扱います。
現在は表示確認用です
この文章は完成原稿ではありません。Markdown、目次、コード、表、Mermaid図がどのように表示されるかを確認するための仮ページです。
このケーススタディで伝えたいこと
- AIエージェントを使いながら、人間がどの判断を担ったか
- 実際に遊んで見つけた問題を、どのように改善したか
- 複雑なゲーム状態を、どのように保存・同期・検証したか
- 成功だけでなく、誤った仮説と方針転換から何を学んだか
公開予定の章
| 分野 | 主な内容 |
|---|---|
| プロダクト | ゲーム概要、UX、テストプレイからの改善 |
| フロントエンド | React、React Konva、スマートフォン、性能改善 |
| ゲームエンジン | GameState、純粋な状態遷移、六角形座標 |
| サーバー | Cloudflare Workers、Durable Objects、WebSocket、認証 |
| Bot | GGBSL、パーサー、AST、型検査、評価器 |
| 開発プロセス | AIエージェントとの分担、テスト、失敗と改善 |
構成図の表示例
盤面以外のUIはReactで、六角形の盤面はReact Konvaで描画します。ルームごとのDurable Objectがゲーム状態を正本として保持し、各プレイヤーに見えてよい情報だけをViewStateとして返します。
コード表示の例
以下は、Bot戦略を記述するGGBSLの雰囲気を示す短い例です。
text
DEFINE production(site: Vertex) =
SUM(FOR hex IN site.hexes YIELD hex.pips)
SCORE build-settlement(site: Vertex) =
10 * production(site)完成版では、コードを長く転載するのではなく、設計判断を説明するために必要な部分だけを引用します。
本番サービス
実際のゲームはGeoGainerで確認できます。