ゲームソリューション部の えがわ です。

本ブログはClassmethod SaaSで加速するゲーム開発 Advent Calendar 2025の12日目のブログとなります。

https://dev.classmethod.jp/referencecat/gamesol-businesssol-advent-calendar-2025/

今回はv0とMomentoを組み合わせて、簡単なオンラインゲームを作成してみます。

はじめに

最近はv0等のAIエージェントを活用することで、ある程度のブラウザゲームをかたちにすることはできると思います。
しかし、オンラインゲームを作るとなると話は別です。

そのような場合には、サーバーレスキャッシュのMomentoを使用することで簡単に解決できる場合があります。

• v0: AIがプロンプトからフロントエンドを自動生成
• Momento: サーバーレスなキャッシュ＆Pub/Subサービス。CacheとTopicsでリアルタイム同期を簡単に実現

今回作るもの

リアルタイム暗算RPG「暗算ダンジョン」を作成します。

複数プレイヤーがリアルタイムで協力し、暗算問題を解いてモンスターを倒すダークファンタジー風RPGゲームです。

機能

• リアルタイム協力プレイ: 複数プレイヤーが同時にモンスターと戦闘
• 暗算バトルシステム: 各プレイヤーが独自の問題を解いてダメージを与える
• 階層システム: フロアごとに難易度が上昇
• リーダーボード: スコアランキングのリアルタイム更新

完成イメージ

// 難易度に応じた数値範囲
Floor 1-2: num1 = 2〜9, num2 = 2〜9
Floor 3:   num1 = 10〜29, num2 = 10〜29

// 基本ダメージ: 10
// 回答時間による倍率
multiplier =
  time <= 1秒: 2.0倍
  time <= 2秒: 1.5倍
  time <= 3秒: 1.2倍
  time > 3秒:  1.0倍

finalDamage = Math.floor(baseDamage * multiplier)

interface RoomState {
  id: string;                    // ルームID
  players: Player[];             // 参加プレイヤー一覧
  status: 'waiting' | 'playing' | 'finished';
  currentFloor: number;          // 現在フロア (1-5)
  monster: Monster | null;       // 現在のモンスター
  battleLog: BattleLogEntry[];   // バトルログ
}

interface Player {
  id: string;           // プレイヤーID
  name: string;         // プレイヤー名
  totalDamage: number;  // 累計ダメージ
  correctAnswers: number; // 正解数
}

interface Monster {
  name: string;      // モンスター名
  maxHp: number;     // 最大HP
  currentHp: number; // 現在HP
  image: string;     // 画像URL
}

interface BattleLogEntry {
  playerName: string;  // プレイヤー名
  damage: number;      // 与えたダメージ
  time: number;        // 回答時間（秒）
  timestamp: number;   // タイムスタンプ
}

{
  "playerName": "string",
  "roomId": "string (optional)"
}

{
  "roomId": "string",
  "playerId": "string",
  "room": "RoomState"
}

{
  "room": "RoomState"
}

{
  "roomId": "string"
}

{
  "room": "RoomState"
}

{
  "roomId": "string",
  "playerId": "string",
  "damage": "number",
  "time": "number"
}

{
  "room": "RoomState",
  "defeated": "boolean"
}

{
  "leaderboard": [
    { "name": "string", "score": "number" }
  ]
}

{
  "playerName": "string",
  "score": "number"
}

--background: 222.2 47.4% 6.2%      /* ダークブルー背景 */
--foreground: 210 40% 96%           /* 明るいテキスト */
--primary: 262.1 83.3% 57.8%        /* パープルアクセント */
--destructive: 0 84% 60%            /* 赤（ダメージ） */
--muted: 217.2 32.6% 12%            /* ミュートカラー */

使用技術

Momentoとは？

Momentoはサーバーレスのキャッシュ・Pub/Subサービスです。
インフラ管理不要で、リアルタイム通信が簡単に実装できます。

Momentoの特徴

• 完全サーバーレス: インフラ管理不要
• Cache: 高速なキャッシュストレージ
• Topics（Pub/Sub）: リアルタイムメッセージング（イベント配信）
• 従量課金: 使った分だけ課金

オンラインゲーム開発に適した理由

1. 低レイテンシ: ゲームに必要な高速通信
2. スケーラビリティ: 自動でスケールアップ/ダウン
3. シンプルなAPI: 少ないコードで実装可能
4. Pub/Subパターン: Topicsでイベントを全プレイヤーにリアルタイム配信
5. 状態管理: Cacheでゲーム状態を永続化・共有

手順

1. ゲームの内容を考える

まずは、作りたいゲームの内容を考えます。
今回は以下のようなゲームを作成します。

【ゲーム概要】暗算ダンジョン
- 複数プレイヤーがリアルタイムで協力
- 暗算問題を解いてモンスターにダメージを与える
- 回答速度に応じてダメージ倍率が変化
- 3階層のダンジョンを攻略してボスを倒す

2. MomentoのAPIキー・エンドポイントを取得

2.1 Momentoコンソールにアクセス

Momento Consoleにアクセスしてアカウントを作成します。

2.3 キャッシュの作成

1. 「キャッシュ」セクションで「キャッシュを作成する」をクリック
2. キャッシュ名を入力（例: math-rpg）し作成

2.2 APIキーの生成

1. 「トークン」セクションに移動
2. 「Fine-Grained Access Key」をクリック
3. 権限を設定（今回はcacheとtopicsの権限を付与）し作成
4. APIキーをコピー

3. v0にプロンプトをリクエスト

いよいよv0を使ってフロントエンドを生成します！

3.1 v0にアクセス

v0.appにアクセスします。

3.2 プロンプトを入力

要件定義書をそのまま投げます。

4. APIキーを設定

v0の画面でAPIキーの入力欄が表示されたら、先ほど取得した情報を入力します。

※画像はNEXT_PUBLIC_が付いていますが、最終的には消しています。

5. デプロイして動作確認

5.1 Vercelへデプロイ

v0の「Deploy」ボタンをクリックするだけです。

5.2 動作確認

デプロイされたURLにアクセスして、動作を確認します。

■タイトル

■ロビー

■ドラゴンとの激闘

■結果

Momento Cache + Topicsでのリアルタイム同期

アーキテクチャ

今回のゲームでは、CacheとTopicsを組み合わせて使用しています。

Momento Cacheのキー設計

Momento Topicsのトピック設計

// 配信されるイベントの例
// ダメージイベント
{
  "type": "DAMAGE_DEALT",
  "playerName": "勇者",
  "damage": 15,
  "time": 1.2,
  "currentHp": 285,
  "timestamp": 1702345678901
}

// モンスター撃破イベント
{
  "type": "MONSTER_DEFEATED",
  "floor": 2,
  "nextMonster": {
    "name": "ドラゴン",
    "maxHp": 500,
    "currentHp": 500
  }
}

さいごに

今回はv0とMomentoを組み合わせて、簡単なオンラインゲームを作る方法を紹介しました。
従来のアプローチに比べて、v0とMomentoを組み合わせることで、WebSocketサーバーの構築やインフラ管理の負担を軽減できる場合があります。
Momento Topicsを使えば、ポーリングなしでリアルタイム通信が実現できます。
Momentoは無料枠を提供しているので、試験的な開発にも活用できます。
ぜひ皆さんもこのお手軽な組み合わせでオリジナルのオンラインゲームを作ってみてください。
この記事がどなたかの参考になれば幸いです。