[スパイク]スモウルビー3から実行可能なスモウルビー甲子園の実行環境を設計する

[takaokouji]

スモウルビー3から実行可能なスモウルビー甲子園の実行環境を設計する。

ストーリー: AI作成者がAIを作成して、競技用サーバーを使って、プリセットのAIと対戦する

Participants:

• AI作成者A
• スモウルビー3
• 競技用サーバー

Sequence:

1. AI作成者Aがスモウルビー3を使って「AI」を作成する。作成した「AI」はスモウルビー3に保持される。
   • 「AI」とは、スモウルビー甲子園というプログラミング競技において、相手と対戦して競技に勝つためのプログラムのこと。
   • Rubyスクリプトとして実装される。
2. AI作成者Aが作成した「AI」を試すために、AI作成者Aがスモウルビー3を操作して、スモウルビー3から競技用サーバーに「AI」をアップロードする。
   • このとき、対戦相手とマップも指定可能
   • 対戦相手はプリセットの中から選択可能。思考タイプを3つから選択可能。ゴール優先(goal)、アイテム優先(item)、前半アイテム優先して後半ゴール優先 (item_goal)
   • マップは10種類から選択可能 (map1からmap10)
3. 競技用サーバーが対戦準備を行い、スモウルビー3に競技画面表示用のURLを生成して返す
4. スモウルビー3が競技画面表示用のURLにアクセスして対戦画面を表示する。
5. AI作成者Aが対戦画面を操作して、対戦をスタートさせる。
   • 対戦のスタートリクエストはAI作成者Aから直接、競技用サーバーにリクエストされる
6. 競技用サーバーが競技終了後、対戦結果を表示する
7. AI作成者Aが対戦結果を確認後、対戦画面を閉じる

シーケンス図:

sequenceDiagram
    participant AI_Creator_A as AI作成者A
    participant Smalruby3 as スモウルビー3
    participant Koshien_Server as 競技用サーバー

    %% ステップ1: AIの作成と保持
    AI_Creator_A->>Smalruby3: (1) AIを作成する (Rubyスクリプト)
    Smalruby3->>Smalruby3: 作成したAIを保持

    %% ステップ2: AIのアップロードと設定
    AI_Creator_A->>Smalruby3: (2) AIアップロードと設定の指示 (先攻/後攻、対戦相手、マップ)
    Smalruby3->>Koshien_Server: AIをアップロードし、設定情報を送信
    Note over AI_Creator_A,Koshien_Server: 対戦相手:<br>ゴール優先(goal), アイテム優先(item),<br>前半アイテム優先して後半ゴール優先(item_goal)<br>マップ:<br>map1〜map10

    %% ステップ3: サーバーの準備とURL生成、競技画面の表示
    Koshien_Server->>Koshien_Server: (3) 対戦準備を行う
    Koshien_Server-->>Smalruby3: 競技画面表示用URLを返す
    Smalruby3->>Koshien_Server: 競技画面表示用URLにアクセス (iframe)
    Koshien_Server-->>AI_Creator_A: 対戦画面を表示

    %% ステップ4: 対戦の開始、結果の表示
    AI_Creator_A->>Koshien_Server: (4) 対戦開始ボタンを押す
    activate Koshien_Server
    Koshien_Server->>Koshien_Server: 対戦を実行
    deactivate Koshien_Server
    Koshien_Server-->>AI_Creator_A: 対戦結果データを送信
    AI_Creator_A->>AI_Creator_A: 対戦結果を確認

    %% ステップ5: 画面を閉じる
    AI_Creator_A->>AI_Creator_A: (5) 対戦画面を閉じる

Loading

ストーリー: AI作成者AとAI作成者BがAIを作成して、競技用サーバーを使って、お互いのAIで対戦する

Participants:

• AI作成者A
• AI作成者B
• スモウルビー3
• 競技用サーバー

Sequence:

1. AI作成者Aがスモウルビー3を使って「AI」を作成する。

2. AI作成者Aが作成したAIを対戦相手として指定可能にするために、AI作成者Aがスモウルビー3を操作して、スモウルビー3から競技用サーバーに「AI」をアップロードする (アップロードしたAIは2日後に削除される)。

3. AI作成者Bがスモウルビー3を使って「AI」を作成する。

4. AI作成者Bが作成した「AI」を試すために、AI作成者Bがスモウルビー3を操作して、スモウルビー3から競技用サーバーに「AI」をアップロードする。このとき、対戦相手として、AI作成者Aが作成したAIを指定する。

5. 競技用サーバーが対戦準備を行い、スモウルビー3に競技画面表示用のURLを生成して返す

6. スモウルビー3が競技画面表示用のURLにアクセスして対戦画面を表示する。

7. AI作成者Bが対戦画面を操作して、対戦をスタートさせる。

   • 対戦のスタートリクエストはAI作成者Bから直接、競技用サーバーにリクエストされる

8. 競技用サーバーが競技終了後、対戦結果を表示する

9. AI作成者Bが対戦結果を確認後、対戦画面を閉じる

シーケンス図:

sequenceDiagram
    participant AI_Creator_A as AI作成者A
    participant AI_Creator_B as AI作成者B
    participant Smalruby3 as スモウルビー3
    participant Koshien_Server as 競技用サーバー

    %% ステップ1: AI作成者AのAI作成とアップロード
    AI_Creator_A->>Smalruby3: (1) AIを作成する (Rubyスクリプト)
    Smalruby3->>Smalruby3: 作成したAIを保持
    AI_Creator_A->>Smalruby3: (2) AIアップロードを指示
    Smalruby3->>Koshien_Server: AIをアップロード (2日後に削除)
    Note right of Koshien_Server: AI作成者AのAIを保存

    %% ステップ2: AI作成者BのAI作成と対戦設定
    AI_Creator_B->>Smalruby3: (3) AIを作成する (Rubyスクリプト)
    Smalruby3->>Smalruby3: 作成したAIを保持
    AI_Creator_B->>Smalruby3: (4) AIアップロードと対戦設定を指示
    Note over AI_Creator_B,Smalruby3: 対戦相手としてAI作成者AのAIを指定
    Smalruby3->>Koshien_Server: AIをアップロードし、対戦設定を送信

    %% ステップ3: サーバーの準備と画面表示
    Koshien_Server->>Koshien_Server: (5) 対戦準備を行う
    Koshien_Server-->>Smalruby3: 競技画面表示用URLを返す
    Smalruby3->>Koshien_Server: (6) URLにアクセスして対戦画面を表示 (iframe)

    %% ステップ4: 対戦の開始と結果の表示
    AI_Creator_B->>Koshien_Server: (7) 対戦開始ボタンを押す
    activate Koshien_Server
    Koshien_Server->>Koshien_Server: 2つのAIで対戦を実行
    Koshien_Server-->>AI_Creator_B: (8) 対戦結果データを送信
    deactivate Koshien_Server

    %% ステップ5: 画面を閉じる
    AI_Creator_B->>AI_Creator_B: (9) 対戦画面を閉じる

Loading

[takaokouji]

設計詳細

1. GraphQL API設計

競技用サーバー（Rails + GraphQL）で必要なスキーマを設計しました。

基本エンティティ

# AI エンティティ
type AI {
  id: ID!
  name: String!
  code: String!
  author: String
  createdAt: DateTime!
  expiresAt: DateTime!
}

# マップ エンティティ
type Map {
  id: ID!
  name: String!
  description: String
  thumbnailUrl: String
  configData: JSON
}

# 対戦 エンティティ
type Battle {
  id: ID!
  firstPlayerAi: AI!
  secondPlayerAi: AI!
  map: Map!
  status: BattleStatus!
  winner: PlayerPosition
  turns: [Turn!]!
  createdAt: DateTime!
  completedAt: DateTime
  battleUrl: String!
}

enum BattleStatus {
  PENDING
  RUNNING
  COMPLETED
  CANCELLED
}

enum PlayerPosition {
  FIRST
  SECOND
}

Mutations

type Mutation {
  # AI登録
  registerAi(input: RegisterAiInput!): RegisterAiPayload!
  
  # 対戦作成
  createBattle(input: CreateBattleInput!): CreateBattlePayload!
  
  # 対戦開始
  startBattle(input: StartBattleInput!): StartBattlePayload!
}

Query Fields

type Query {
  # AI一覧取得（対戦相手選択用）
  availableAis: [AI!]!
  
  # プリセットAI一覧取得
  presetAis: [AI!]!
  
  # マップ一覧取得
  maps: [Map!]!
  
  # 対戦詳細取得
  battle(id: ID!): Battle
}

2. UI/UX設計

拡張機能の追加

• 既存の拡張機能アーキテクチャに従って「スモウルビー甲子園」拡張機能を追加
• 拡張機能有効化時にメインメニューに「スモウルビー甲子園」メニューアイテムを表示

モーダル設計

スモウルビー甲子園モーダル（設定画面）

• サーバーURL設定（デフォルト: https://koshien.smalruby.app）
• 先攻/後攻選択（ラジオボタン）
• 対戦相手選択（ドロップダウン、GraphQLから取得）
• マップ選択（ドロップダウン + サムネイル表示）
• ボタン: 競技開始、AI登録、キャンセル

スモウルビー甲子園対戦モーダル（iframe表示）

• フルスクリーンモーダル
• 競技用サーバーから取得したbattleURLをiframeで表示
• 対戦情報表示（マップ名など）
• 閉じるボタン

3. 技術実装方針

ファイル構成

gui/smalruby3-gui/src/
├── components/koshien-modal/
├── containers/koshien-modal.jsx
├── lib/koshien-api.js
├── lib/koshien-name-generator.js
├── reducers/koshien.js
└── lib/libraries/extensions/koshien/

gui/scratch-vm/src/extensions/scratch3_koshien/

主要機能の実装方針

GraphQLクライアント

• fetch APIを使用したシンプルなGraphQLクライアント実装
• エラーハンドリングと結果の型安全性を考慮

Rubyコード生成

• 既存のRuby生成機能（generateRubyCode）を活用
• AI登録時にリアルタイムでブロックからRubyコードを生成

AI名自動生成

• meshのランダム名生成を参考に実装
• 形容詞 + 名詞 + 数字の組み合わせ

状態管理

• Redux storeに専用reducerを追加
• モーダル表示状態、設定値、API取得データを管理

4. 操作フロー

1. 拡張機能「スモウルビー甲子園」を有効化
2. メニューに表示された「スモウルビー甲子園」をクリック
3. 設定モーダルで接続設定を入力
4. AI登録 または 対戦開始を選択
   • AI登録: 現在のコードから生成→自動命名→GraphQL送信
   • 対戦開始: 設定検証→対戦作成→対戦モーダル表示
5. 対戦モーダル内のiframeで対戦実行
6. 対戦完了後にモーダルを閉じる

この設計により、要件で示された2つのストーリーを実現できます。

[takaokouji]

追加設計情報

1. 新規レポジトリについて

競技用サーバーは新しいレポジトリ smalruby-koshien で開発します。

2. 既存実装の刷新方針

既存のRuby実装 (/Users/kouji/work/smalruby/smalruby3-develop/tmp/vendor/smalruby-koshien/game_server) を調査し、以下の方針で刷新します：

既存API構造（参考）

• /api/manage: プレイヤー接続、ターン終了
• /api/move: キャラクター移動、ダイナマイト設置
• /api/search: マップ範囲検索
• /api/viewer: 全マップ情報取得、ゲーム状態取得

新しいアーキテクチャ

• GraphQLでの完全書き換え
• サーバー主導の競技進行: クライアントからのリクエストで進行するのではなく、競技用サーバー内部で完結して処理
• 途中経過のGraphQL提供: 競技中の様子をリアルタイムでクライアントに提供

3. GraphQL API設計（修正版）

既存データ構造を踏まえた新設計：

基本エンティティ

# プレイヤーAI エンティティ  
type PlayerAI {
  id: ID!
  name: String!
  code: String!
  author: String
  createdAt: DateTime!
  expiresAt: DateTime!
}

# マップ エンティティ
type GameMap {
  id: ID!
  name: String!
  description: String
  thumbnailUrl: String
  mapData: [[Int!]!]!        # 2次元マップ配列
  mapHeight: [[Int!]!]!      # 高さ情報
  goalPosition: Position!
  size: MapSize!
}

# ゲーム/対戦 エンティティ
type Game {
  id: ID!
  firstPlayerAI: PlayerAI!
  secondPlayerAI: PlayerAI!
  gameMap: GameMap!
  status: GameStatus!
  winner: PlayerPosition
  rounds: [GameRound!]!      # 既存は2ラウンド制
  createdAt: DateTime!
  completedAt: DateTime
  battleUrl: String!
}

# ラウンド エンティティ
type GameRound {
  id: ID!
  game: Game!
  roundNumber: Int!
  turns: [GameTurn!]!        # 最大50ターン
  players: [Player!]!        # 2人のプレイヤー状態
  enemy: Enemy!              # 妨害キャラクター
  itemLocations: [[Int!]!]!  # アイテム配置
  status: RoundStatus!
  winner: PlayerPosition
}

# ターン エンティティ
type GameTurn {
  id: ID!
  round: GameRound!
  turnNumber: Int!
  players: [Player!]!
  enemy: Enemy!
  itemLocations: [[Int!]!]!
  events: [GameEvent!]!      # ターン内で発生したイベント
  turnFinished: Boolean!
  createdAt: DateTime!
}

# プレイヤー状態 エンティティ（既存Playerクラスベース）
type Player {
  id: ID!
  playerAI: PlayerAI!
  position: Position!
  previousPosition: Position!
  score: Int!
  status: PlayerStatus!      # playing, completed, timeout, timeup
  hasGoalBonus: Boolean!
  inWater: Boolean!
  movable: Boolean!
  dynamiteLeft: Int!         # 残りダイナマイト数（初期値2）
  characterLevel: Int!
  acquiredPositiveItems: [Int!]!
  walkBonus: Boolean!
  myMap: [[Int!]!]!         # プレイヤーが探索済みのマップ
}

# 敵キャラクター エンティティ
type Enemy {
  id: ID!
  position: Position!
  hp: Int!
  attackPower: Int!
}

enum GameStatus {
  WAITING_FOR_PLAYERS
  IN_PROGRESS
  COMPLETED
  CANCELLED
}

enum PlayerStatus {
  PLAYING
  COMPLETED
  TIMEOUT
  TIMEUP
}

Query Fields（リアルタイム表示用）

type Query {
  # ゲーム状態取得（既存viewer APIの代替）
  gameState(gameId: ID!): GameState!
  
  # 利用可能なAI一覧
  availablePlayerAIs: [PlayerAI!]!
  
  # マップ一覧
  gameMaps: [GameMap!]!
}

# リアルタイム表示用の統合データ（既存game_state相当）
type GameState {
  game: Game!
  currentRound: GameRound
  currentTurn: GameTurn
  mapData: [[Int!]!]!           # map_data
  mapHeightData: [[Int!]!]!     # map_height_data  
  itemLocations: [[Int!]!]!     # item_locations
  players: [Player!]!           # players
  enemy: Enemy!                 # enemy
  turnFinished: Boolean!        # turn_finished
  events: [GameEvent!]!         # events
}

Subscriptions（リアルタイム更新）

type Subscription {
  # ゲーム状態の変更をリアルタイム監視
  gameStateUpdated(gameId: ID!): GameState!
  
  # ターン更新をリアルタイム監視
  turnUpdated(gameId: ID!): GameTurn!
}

4. アーキテクチャの変更点

既存（クライアント主導）

1. AIがターンごとにAPI呼び出し（移動、検索、ダイナマイト設置）
2. ターン終了API呼び出し
3. 次ターン開始まで待機

新設計（サーバー主導）

1. サーバー内でAIコードを実行
2. ターンごとの結果をDBに格納
3. GraphQLでリアルタイム状態提供
4. クライアント（SPA）はSubscriptionで状態監視

この設計により、既存の競技ロジックを保持しながら、GraphQLベースの現代的なアーキテクチャに刷新できます。

[takaokouji]

技術スタック詳細追記

1. AI表現の統一

Railsの命名規約に合わせて、AI関連の表現を統一します：

• PlayerAI → PlayerAi
• RegisterPlayerAI → RegisterPlayerAi
• その他すべてのAI表現を Ai に統一

2. インフラ・技術スタック

AWS EC2 + Docker構成

• 実行環境: AWS EC2
• コンテナ: Docker
• Rails: バージョン 8.0
• プロキシサーバー: Thruster (HTTP/2プロキシサーバー)
  • Nginxは使用しない
• データベース: SQLite3
• Solidシリーズ: 必要時に段階的導入
  • Solid Cache（キャッシュ）
  • Solid Queue（バックグラウンドジョブ）
  • Solid Cable（WebSocket/ActionCable）

Docker構成例

# docker-compose.yml
version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - RAILS_ENV=production
      - DATABASE_URL=sqlite3:storage/production.sqlite3
    volumes:
      - ./storage:/rails/storage
      - ./log:/rails/log
    command: >
      bash -c "
        bundle exec rails db:prepare &&
        bundle exec thruster --config config/thruster.yml
      "

Thruster設定例

# config/thruster.yml
targets:
  - service: localhost:3000
    health_check_path: /health

ssl:
  certificate_path: /etc/ssl/certs/koshien.smalruby.app.crt
  private_key_path: /etc/ssl/private/koshien.smalruby.app.key

health_check:
  interval: 30s
  timeout: 10s

段階的Solidシリーズ導入

# Gemfile - 初期構成
gem 'rails', '~> 8.0'
gem 'sqlite3'
gem 'thruster'
gem 'graphql'

# 必要時に追加
# gem 'solid_cache'    # キャッシュが必要になったとき
# gem 'solid_queue'    # バックグラウンドジョブが必要になったとき  
# gem 'solid_cable'    # リアルタイム通信が必要になったとき

3. 修正されたGraphQL API設計

AI表現を統一した最終版：

# プレイヤーAI エンティティ
type PlayerAi {
  id: ID!
  name: String!
  code: String!
  author: String
  createdAt: DateTime!
  expiresAt: DateTime!
}

# ゲーム エンティティ
type Game {
  id: ID!
  firstPlayerAi: PlayerAi!
  secondPlayerAi: PlayerAi!
  gameMap: GameMap!
  status: GameStatus!
  winner: PlayerPosition
  rounds: [GameRound!]!
  createdAt: DateTime!
  completedAt: DateTime
  battleUrl: String!
}

# Mutations
type Mutation {
  registerPlayerAi(input: RegisterPlayerAiInput!): RegisterPlayerAiPayload!
  createGame(input: CreateGameInput!): CreateGamePayload!
  startGame(input: StartGameInput!): StartGamePayload!
}

# Query
type Query {
  availablePlayerAis: [PlayerAi!]!
  presetPlayerAis: [PlayerAi!]!
  gameMaps: [GameMap!]!
  gameState(gameId: ID!): GameState!
}

この技術スタックにより、Rails 8の最新機能とSQLite3の軽量性を活かしつつ、必要に応じてSolidシリーズで機能拡張できる柔軟な構成を実現します。

[takaokouji]

段階的開発ステップ提案

フロントエンド除外・Job処理による段階的開発ステップを以下のように提案します：

Step 1: 基盤環境構築

• 新規リポジトリ smalruby-koshien 作成
• Rails 8.0 + GraphQL + Docker + Thruster 基盤セットアップ
• SQLite3 データベース設定
• 基本的なヘルスチェックエンドポイント

Step 2: データモデル・DB設計

• マイグレーション作成（PlayerAi, GameMap, Game, GameRound, GameTurn, Player, Enemy等）
• ActiveRecord モデル実装
• バリデーション・アソシエーション設定
• シードデータ（プリセットAI、マップ）

Step 3: 基本GraphQL API実装

• GraphQL gem設定・基本スキーマ
• PlayerAi関連のQuery/Mutation
• GameMap関連のQuery
• 基本的なエラーハンドリング

Step 4: ゲームロジック実装

• 既存Ruby実装からの移植
• ゲーム進行ロジック（ターン制御、勝敗判定等）
• AI実行エンジン（Rubyコード評価・実行）
• テストケース作成

Step 5: Job処理システム

• Solid Queue導入
• ゲーム実行Job実装
• ターンごとのDB保存処理
• Job監視・エラーハンドリング

Step 6: GraphQL完全実装

• Game関連のMutation（createGame, startGame）
• GameState Query実装
• リアルタイム状態取得API
• GraphQL Subscriptions（将来のリアルタイム表示用）

Step 7: デプロイ・インフラ

• AWS EC2環境構築
• Docker本番環境設定
• Thruster設定・SSL証明書
• CI/CD設定

各ステップで動作確認を行い、次のステップに進む方針で進めます。