鬼ごっこ

https://github.com/rmcait/rokko-tag_game

―

TypeScript

Firebase

Firestore

Flutter

Dart

鬼ごっこ

音揃怜翔

Miyuu Arima

Rio

推しアイデア

・鬼が近づくと捕獲ボタンが表示される ・逃走者は鬼の位置が見えない ・開始3秒間は鬼が動けないルール ・通知で捕獲や終了をリアルに伝える ・戦略的なマップアイテムを追加予定

作った背景

・park発想で公園遊びの鬼ごっこを選定 ・外で遊ばない子に体験を届けたかった ・人数や管理の負担をアプリで解決した

推し技術

・Flutterで両OS対応のUIを高速開発 ・Firestoreで位置と状態を即時反映 ・Functionsで捕獲処理を自動化 ・FCMでイベント通知を即時配信 ・NTPで時間ズレを自動補正 ・turf_dartで距離や範囲を高精度判定

プロジェクト詳細

🏃‍♂️ 鬼ごっこアプリ MVP仕様書

（Flutter × Firebase × Cloud Functions Gen2 × FCM）

🎯 プロジェクト概要

リアルタイム位置共有・捕獲判定・通知を備えたオンライン鬼ごっこアプリ。
Flutter を用いてモバイルクライアントを実装し、Firebase をバックエンドとして採用したサーバーレス構成。

目的：

  • リアルタイム位置同期
  • 捕獲判定
  • ゲーム進行管理
  • 通知によるイベント連携

⚙️ 技術スタック
分類技術役割
FrontendFlutter（v3.24.0 / fvm）UI・位置送信・地図表示
BackendFirebase Cloud Functions Gen2（Node.js 22）捕獲・エリア外・ゲーム終了通知
DatabaseFirestoreプレイヤー状態、ゲームセッション管理
AuthFirebase AuthenticationGoogle / 匿名ログイン
MessagingFirebase Cloud Messaging捕獲/エリア外/終了などの通知
MapGoogle Maps API（google_maps_flutter）マップ描画
Utilityturf_dartポリゴン内判定（エリア外検知）

アーキテクチャ図

image

🧩 コア機能一覧
機能名説明Priority
プレイヤー登録Google/匿名でログイン★★★
ルーム作成/参加パーティIDでゲーム参加★★★
ロール割り当てTAGGER / RUNNER / SPECTATOR★★★
位置情報送信Geolocatorでリアルタイム送信★★★
マップ反映GoogleMap上に全プレイヤー描画★★★
捕獲判定距離判定 + キャッチボタン★★★
ゲーム時間管理NTP補正 + Firestore startAt同期★★★
通知Cloud Functions → FCM → Flutter★★★
結果表示勝敗/捕獲数の表示★★☆
観戦モード位置閲覧のみ★★☆

🕹️ ゲーム仕様詳細

🎮 基本ルール
  • プレイヤー最大：5人（鬼1名 / 逃走者4名）
  • プレイ時間：5 / 15 / 30 / 60分
  • 勝敗条件：
    • 鬼の勝利：逃走者全員が caught = true
    • 逃走者の勝利：時間切れで 1人でも生存
  • 逃走者は鬼の位置を見れない（UI側フィルタ処理）
  • 鬼は逃走者全員をリアルタイムで追跡可能

🧠 捕獲ロジック（実装済）

条件：「鬼が近くにいる」

距離判定（Geolocator.distanceBetween）

distance <= 20.0m （暫定）

流れ（実装通り）
  1. Flutter がプレイヤーの現在位置を Firestore へ送信
  2. gameSessions/{gameId}/players の snapshot を購読
  3. Flutter 内でロール = TAGGER の場合のみ距離判定
  4. ボタン（Catch）押下で捕獲処理
  5. 該当 RUNNER のドキュメントを更新
{
  "caught": true,
  "caughtAt": serverTimestamp(),
  "caughtBy": "<taggerId>"
}
  1. 捕獲成功 → Cloud Functions notifyGameEvent が FCM 通知送信
  2. 全員 caught ならゲーム終了

📡 通信仕様（Flutter ↔ Firestore ↔ Functions）

📍 位置情報送信（Flutter → Firestore）

送信タイミング
  • Geolocator Stream（distanceFilter: 5m）
  • または5秒周期バックアップ送信

Firestore書き込み例

 
{
  "lastLocation": { "latitude": 35.0, "longitude": 135.0 },
  "inside": true,
  "caught": false,
  "updatedAt": <serverTimestamp>
}

👀 位置購読（Firestore → Flutter）

購読対象：

gameSessions/{gameId}/players

反映内容：

  • 位置
  • 役割（role）
  • caught
  • inside（エリア内外）

UI反映ルール：

  • TAGGER → 全員表示（赤:鬼 / 青:逃走者）
  • RUNNER → 鬼の位置を非表示
  • WATCHER → 全員表示（干渉不可）

🔥 通知フロー（Functions → FCM → Flutter）

種類
  • 捕獲通知
  • エリア外通知
  • ゲーム終了通知

送信先
  • トピック：game_<gameId>

Flutter側処理

 
FirebaseMessaging.onMessage.listen((msg) {
  showSnackBar(msg.notification!.title);
});

🗺️ エリア外判定（turf_dart）

判定ロジック
  • フィールドPolygonを Firestore から読み込み
  • turf.booleanPointInPolygon で inside/outside 判定

エリア外に出たら：

  • エリア外Snackbar
  • Cloud Functions を呼んで通知 （逃走者がエリア外に出る → 鬼へ警告通知）

⏳ 時間管理（NTP × Firestore × Flutter）

ゲーム開始

Firestore に startAt を記録。

各クライアントの clock-sync
  • NTP.getNtpOffset() でずれ補正
  • startAt + durationMinutes → 終了時刻
  • 計算した残り時間を UI に反映

Freeze（鬼の待機時間）
  • ゲーム開始後、鬼は 3秒間動けない

👥 役割仕様（TAGGER / RUNNER / WATCHER）
役割色権限/特徴
TAGGER（鬼）赤捕獲ボタン可 / 全員の位置を見る
RUNNER（逃走者）青鬼の位置は非表示 / caughtで脱落
WATCHERグレーマップ閲覧のみ

🎒 アイテム仕様（次期拡張）

RUNNER用
  • 鬼の位置可視化（10秒）
  • デコイ（偽の位置生成）
  • スピードブースト

TAGGER用
  • 全逃走者停止（5秒）
  • トラップ（踏むと逃走者停止＋通知）
  • 位置スキャン（逃走者一括表示）

共通
  • マップランダム生成
  • プレイヤーごとに表示アイテムが異なる
  • 最大スロット：2個

🎨 UI仕様

参考アプリ：

https://apps.apple.com/ro/app/gottcha-irl-hide-and-seek/id6446601497

画面構成

🏠 ホーム
  • ルーム作成
  • ルーム参加（パーティID入力）

🧑‍🤝‍🧑 ロビー
  • メンバー一覧
  • ゲーム時間選択
  • ホストのみスタート可能

🗺️ ゲーム画面
  • Google Map
  • 役割バッジ
  • カウントダウン（鬼Freeze）
  • アイテムスロット
  • 捕獲数・残り人数
  • Catchボタン（鬼のみ）
  • ズームUI
  • プレイヤー名バブル
  • エリア外警告

🏁 ゲームオーバー画面
  • 勝者表示
  • 捕獲数リスト
  • 再戦ボタン

🛠️ 環境構築（最新版）

Flutter
  • Flutter 3.24.0（fvm）
  • 使用パッケージ：
geolocator
google_maps_flutter
firebase_auth
cloud_firestore
firebase_messaging
cloud_functions
turf_dart
provider / Riverpod

Firebase構成
サービス役割
AuthGoogle/匿名ログイン
Firestoreプレイヤー/セッション管理
Functions (nodejs22 Gen2)通知・イベント処理
FCM捕獲/終了/エリア外通知
Storageアバター画像（オプション）

🤖 AI活用の工夫（開発効率・品質向上）

本プロジェクトでは、設計・実装・レビュー・ドキュメント作成の各工程において、複数のAIツールを戦略的に活用し、開発効率とチーム連携の向上を実現しました。

🧠 1. コーディング支援（Coding Agent）
ツール活用内容採用理由
GitHub Copilotコーディング全般の補完、関数やロジック提案文脈に沿ったリアルタイム補完で、実装速度を大幅に向上可能なため
OpenAI CodexCloud FunctionsやFirestoreルールの初期生成複雑なルールや非同期処理の構築を効率化できるが、精度と応答性を重視する場面で利用（課金前提）

🎨 2. UI構築支援
ツール活用内容採用理由
Figma + MCP ServerFigmaのUI設計からFlutter Widget構造を変換デザイナーと開発者の認識ズレを防ぎ、再現性の高いUI構築を実現
Canva AIキャラクターやロゴの自動生成初期段階のプロトタイピングにおいて、視覚イメージの高速化に貢献

🚀 3. PR作成・レビュー支援
ツール活用内容採用理由
GitHub CopilotPRコメント補完・概要説明変更意図の明示と記述負担の軽減に貢献
Gemini Code AssistPRの自動要約・レビューポイント抽出誰でも無償で利用でき、PR作成時に自動で概要作成とレビュー支援まで可能。レビュアーの負担を大幅に軽減

🛠️ 4. カスタムコマンドによる自動化
自動化対象説明採用理由
コミットメッセージ生成差分から意図に沿ったメッセージを自動提案フォーマットの統一により、履歴管理・解析が容易に
PRディスクリプション生成PR作成時の要点や背景を自動出力チームメンバー間での意図共有を効率化
ファイル解説生成複雑なファイルの構造・意図を自然言語で解説新規参加者やレビュアーへの学習・共有コストを削減

このようなAIツールの選定と活用により、「人に伝わる開発」 を実現しつつ、スピードと品質の両立を図っています。

音揃怜翔

@be8b89c2d9db01c4