diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..d207b35 --- /dev/null +++ b/.env.example @@ -0,0 +1,12 @@ +# Supabase Configuration +# Get these values from https://app.supabase.com/ -> Project Settings -> API + +# Supabase Project URL +NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url + +# Supabase Anon/Public Key +NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key + +# Optional: Supabase Service Role Key (for server-side operations only) +# WARNING: Never expose this key to the client side! +# SUPABASE_SERVICE_ROLE_KEY=your_service_role_key diff --git a/PROGRESS.md b/PROGRESS.md index 33573a1..73f61f9 100644 --- a/PROGRESS.md +++ b/PROGRESS.md @@ -15,8 +15,8 @@ - ESLint無効、Turbopack有効 - PWA対応準備 -- [x] **Firebase統合** - - Firebase SDK導入 (Auth/Firestore/Functions/FCM) +- [x] **Supabase統合** + - Supabase SDK導入 (Auth/Database/Realtime) - 環境変数設定 (.env.local) - 初期化コード作成 @@ -26,7 +26,7 @@ - 拡張性を考慮した設計 - [x] **認証システム** - - Firebase Anonymous Authentication + - Supabase Anonymous Authentication - useAuth カスタムフック - AuthProvider Context - ニックネーム・役職・チーム登録 @@ -34,7 +34,7 @@ - [x] **位置情報システム** - Geolocation API統合 - useLocation カスタムフック - - Firestore自動同期 + - Supabase自動同期 - 調整可能な更新間隔 - [x] **地図システム** @@ -69,14 +69,14 @@ - **フロントエンド**: React Server Components + Client Components適切な分離 - **状態管理**: React Context + Custom Hooks パターン -- **データベース**: Firestore リアルタイムリスナー活用 +- **データベース**: Supabase (PostgreSQL + PostGIS) リアルタイムリスナー活用 - **地図**: Dynamic Import による SSR対応 ### パフォーマンス - Leafletマーカー画像の事前配置 - 地図コンポーネントの動的読み込み -- Firebase接続の最適化 +- Supabase接続の最適化 - CI/CDビルドプロセスの最適化（外部依存削減） ⭐️ NEW ### 設計原則 @@ -119,7 +119,7 @@ - [x] **開発環境の改善** - ESLintルールの調整（error → warn）により開発ワークフロー改善 - Supabase環境変数のフォールバック機能実装 - - Firebase初期化の型安全性向上 + - Supabase初期化の型安全性向上 - [x] **テスト品質の維持** - 全61テストの成功維持 @@ -157,13 +157,14 @@ ### 未実装機能 -- [ ] Push通知システム -- [ ] マルチゲームマスター対応 -- [ ] データベーススキーマの作成（location_historyテーブル等） +- [ ] Push通知システム（Web Push API統合） +- [ ] マルチゲームマスター対応（複数GM同時運営） +- [ ] データベーススキーマの実環境デプロイ（location_historyテーブル等） +- [ ] 特殊役職システム（データモデルは準備済み） ### 技術的制約 -- Firebase設定が必要（.env.local） +- Supabase設定が必要（.env.local） - 位置情報許可が必須 - オンライン環境での動作前提 @@ -172,7 +173,6 @@ ``` tag-support/ (25ファイル作成) ⭐️ 更新 ├── lib/ -│ ├── firebase.ts # Firebase設定 │ └── supabase.ts # Supabase設定 ├── types/index.ts # 型定義 ├── hooks/ @@ -208,14 +208,14 @@ tag-support/ (25ファイル作成) ⭐️ 更新 - [x] **ユニットテスト (Vitest)** - 70/70テスト成功（100%） ⭐️ 更新 - lib/supabase.ts: 4/4テスト成功（環境変数フォールバック対応） - hooks/useLocation.ts: 8/8テスト成功 - - hooks/useAuth.tsx: 9/9テスト成功 (Supabaseベースに修正) - - hooks/useGame.tsx: 10/10テスト成功 (Supabaseベースに修正) - - hooks/useMissions.tsx: 13/13テスト成功 (Supabaseベースに修正) + - hooks/useAuth.tsx: 9/9テスト成功 (Supabaseベース) + - hooks/useGame.tsx: 10/10テスト成功 (Supabaseベース) + - hooks/useMissions.tsx: 13/13テスト成功 (Supabaseベース) - hooks/useCapture.tsx: 8/8テスト成功 - hooks/useZones.tsx: 9/9テスト成功（フィールド名修正対応） - hooks/useLocationHistory.tsx: 9/9テスト成功 ⭐️ NEW - [x] **テスト品質向上** ⭐️ NEW - - Firebase → Supabase への完全移行完了 + - Supabase統合完了 - 全テストがSupabaseのモックを使用 - テストカバレッジ維持（高品質コード保証） - [x] **E2Eテスト (Playwright)** @@ -233,7 +233,7 @@ tag-support/ (25ファイル作成) ⭐️ 更新 - [x] ローカル開発環境起動 - [x] ビルドプロセス（npm run build成功） - [x] 全テストスイート実行（70/70成功） ⭐️ 更新 -- [ ] Firebase接続テスト +- [ ] Supabase接続テスト（実環境） - [ ] 認証フロー - [ ] 位置情報取得 - [ ] 地図表示 diff --git a/README.md b/README.md index 69a8fb8..4d7e768 100644 --- a/README.md +++ b/README.md @@ -46,8 +46,8 @@ cd tag-support npm install # 環境変数の設定 -cp .env.local.example .env.local -# .env.localにFirebaseの設定を記入 +cp .env.example .env.local +# .env.localにSupabaseの設定を記入 # 開発サーバーの起動 npm run dev @@ -108,17 +108,21 @@ tag-support/ ✅ 位置情報トラッキング ✅ Leaflet.js地図表示 ✅ 役職別UI（逃走者・鬼・ゲームマスター） +✅ ミッションシステム（作成・削除・完了） +✅ セーフゾーン・立禁エリア管理 +✅ ゲーム状態管理（開始・停止・設定変更） +✅ 位置履歴記録・リプレイ機能 +✅ ゲーム統計・分析機能 ✅ PWA設定・オフライン対応基礎 ✅ CI/CD (GitHub Actions) ✅ テスト環境 (Vitest + Playwright) ## 今後の実装予定 -- [ ] Push通知機能 -- [ ] ミッションシステム -- [ ] セーフゾーン・立禁エリア -- [ ] ゲーム状態管理 -- [ ] リプレイ機能 +- [ ] Push通知機能（Web Push API） +- [ ] マルチゲームマスター対応 +- [ ] データベーススキーマの実環境デプロイ +- [ ] 特殊役職システム ## 開発コマンド diff --git a/ROADMAP.md b/ROADMAP.md index 94d12fe..ce7f663 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -4,7 +4,7 @@ **最終目標**: 大学生10名規模での2-3km範囲リアル鬼ごっこ運営支援PWA -**MVP目標日**: 未定（Firebase設定次第） +**MVP目標日**: 未定（Supabase設定次第） **β版目標日**: 未定 ## Phase 1: 基礎実装 ✅ (完了) @@ -14,7 +14,7 @@ ### 完了した機能 -- Next.js + Firebase基盤構築 +- Next.js + Supabase基盤構築 - 認証・位置情報・地図システム - 役職別UI（逃走者・鬼・GM） - PWA基礎設定 @@ -32,11 +32,11 @@ **想定期間**: 1-2セッション **目標**: 実際にテストプレイ可能な状態 -### 2.1 Firebase実環境構築 +### 2.1 Supabase実環境構築 -- [ ] Firebaseプロジェクト作成・設定 +- [ ] Supabaseプロジェクト作成・設定 - [ ] Authentication有効化 -- [ ] Firestore設定・セキュリティルール +- [ ] Database設定・Row Level Security (RLS) - [ ] 実環境での動作確認 ### 2.2 モバイル対応最適化 @@ -62,7 +62,7 @@ ### 3.1 Push通知システム -- [ ] Firebase Cloud Messaging設定 +- [ ] Web Push API設定 - [ ] 通知許可フロー - [ ] 役職別通知ロジック - ゲーム開始/終了通知 @@ -190,7 +190,7 @@ ### セキュリティ -- [ ] Firestore セキュリティルール強化 +- [ ] Supabase Row Level Security (RLS) 強化 - [ ] 位置情報保護対策 - [ ] 個人情報取扱改善 @@ -210,7 +210,7 @@ ### 技術リスク -- **Firebase制限**: 無料枠・API制限対策 +- **Supabase制限**: 無料枠・API制限対策 - **位置精度**: GPS精度の天候・環境依存 - **バッテリー**: 長時間使用での電池消耗 @@ -228,7 +228,7 @@ ## 次回セッション重点項目 -1. **Firebase実環境構築** (最高優先) +1. **Supabase実環境構築** (最高優先) 2. **モバイル実機テスト** 3. **基本ゲーム機能追加** diff --git a/docs/FIREBASE_SETUP.md b/docs/FIREBASE_SETUP.md deleted file mode 100644 index 77fbf81..0000000 --- a/docs/FIREBASE_SETUP.md +++ /dev/null @@ -1,265 +0,0 @@ -# Firebase環境構築手順 - -## 前提条件 - -- Googleアカウントを持っていること -- Node.js 18以上がインストールされていること - -## 1. Firebaseプロジェクトの作成 - -### 1.1 Firebase Consoleへアクセス - -1. [Firebase Console](https://console.firebase.google.com/)にアクセス -2. Googleアカウントでログイン - -### 1.2 新規プロジェクト作成 - -1. 「プロジェクトを作成」ボタンをクリック -2. プロジェクト名を入力（例：`tag-support-app`） -3. Google Analytics設定 - - 有効にする場合：アナリティクスアカウントを選択 - - 無効でもOK（後から追加可能） -4. 「プロジェクトを作成」をクリック - -## 2. Firebase Authentication設定 - -### 2.1 Authentication有効化 - -1. Firebase Console左メニューから「Authentication」選択 -2. 「始める」ボタンをクリック -3. 「Sign-in method」タブを選択 - -### 2.2 匿名認証の有効化 - -1. 「匿名」を選択 -2. 「有効にする」トグルをON -3. 「保存」をクリック - -## 3. Cloud Firestore設定 - -### 3.1 Firestore有効化 - -1. 左メニューから「Firestore Database」選択 -2. 「データベースの作成」をクリック -3. セキュリティルール選択 - - **開発時**: 「テストモードで開始」を選択（30日間誰でも読み書き可能） - - **本番時**: 「本番モードで開始」を選択（後でルール設定必須） -4. ロケーション選択 - - **推奨**: `asia-northeast1` (東京) - - または `asia-northeast2` (大阪) -5. 「有効にする」をクリック - -### 3.2 セキュリティルール設定（重要） - -Firestore画面の「ルール」タブで以下を設定： - -```javascript -rules_version = '2'; -service cloud.firestore { - match /databases/{database}/documents { - // ユーザーコレクション - match /users/{userId} { - // 認証されたユーザーは自分のデータを読み書き可能 - allow read: if request.auth != null; - allow write: if request.auth != null && - (request.auth.uid == userId || - resource.data.role == 'gamemaster'); - } - - // ゲームコレクション - match /games/{gameId} { - // 認証されたユーザーは読み取り可能 - allow read: if request.auth != null; - // ゲームマスターのみ書き込み可能 - allow write: if request.auth != null && - get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == 'gamemaster'; - } - - // ミッションコレクション - match /missions/{missionId} { - allow read: if request.auth != null; - allow write: if request.auth != null && - get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == 'gamemaster'; - } - } -} -``` - -## 4. Firebase Cloud Functions設定（オプション） - -### 4.1 Functions有効化 - -1. 左メニューから「Functions」選択 -2. 「始める」をクリック -3. Blazeプラン（従量課金）へのアップグレードが必要 - - 無料枠あり（月間200万回の呼び出しまで無料） - - クレジットカード登録必要 - -### 4.2 Functions初期設定 - -```bash -# Firebase CLIインストール（グローバル） -npm install -g firebase-tools - -# Firebaseにログイン -firebase login - -# プロジェクトディレクトリで初期化 -cd tag-support -firebase init functions - -# TypeScriptを選択 -# ESLintは任意 -# 依存関係のインストール：Yes -``` - -## 5. Firebase Cloud Messaging設定（Push通知） - -### 5.1 FCM有効化 - -1. プロジェクト設定（歯車アイコン）→「プロジェクトの設定」 -2. 「Cloud Messaging」タブを選択 -3. Web Push証明書の生成 - - 「ウェブプッシュ証明書」セクション - - 「鍵ペアを生成」をクリック - - 生成された「鍵」をコピー（後で.env.localに追加） - -## 6. Webアプリの登録 - -### 6.1 アプリ追加 - -1. プロジェクト設定画面の「全般」タブ -2. 「マイアプリ」セクションで「 (ウェブ)」アイコンをクリック -3. アプリのニックネーム入力（例：`tag-support-web`） -4. 「Firebase Hosting」は今回はチェック不要 -5. 「アプリを登録」をクリック - -### 6.2 設定情報の取得 - -登録後に表示される設定情報をコピー： - -```javascript -const firebaseConfig = { - apiKey: 'AIzaSy...', - authDomain: 'tag-support-app.firebaseapp.com', - projectId: 'tag-support-app', - storageBucket: 'tag-support-app.appspot.com', - messagingSenderId: '123456789', - appId: '1:123456789:web:abc123...', -}; -``` - -## 7. 環境変数の設定 - -### 7.1 .env.localファイル更新 - -プロジェクトルートの`.env.local`を以下の内容で更新： - -```env -# Firebaseの設定値をコピー -NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSy... -NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=tag-support-app.firebaseapp.com -NEXT_PUBLIC_FIREBASE_PROJECT_ID=tag-support-app -NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=tag-support-app.appspot.com -NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789 -NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abc123... - -# FCM用（Push通知を使う場合） -NEXT_PUBLIC_FIREBASE_VAPID_KEY=your_vapid_key_here -``` - -### 7.2 .gitignoreの確認 - -`.env.local`が`.gitignore`に含まれていることを確認： - -```gitignore -# local env files -.env*.local -``` - -## 8. 動作確認 - -### 8.1 開発サーバー起動 - -```bash -npm run dev -``` - -### 8.2 確認項目 - -1. http://localhost:3000 にアクセス -2. ニックネーム入力して「Join Game」 -3. ブラウザの開発者ツール（F12）でエラーがないか確認 -4. Firebase Console > Authentication でユーザーが作成されているか確認 -5. Firebase Console > Firestore でデータが保存されているか確認 - -## 9. よくあるエラーと対処法 - -### エラー1: Permission Denied - -**原因**: Firestoreのセキュリティルールが厳しすぎる -**対処**: 開発時は一時的にテストモードのルールを使用 - -```javascript -// 開発時のみ（本番では絶対に使わない） -rules_version = '2'; -service cloud.firestore { - match /databases/{database}/documents { - match /{document=**} { - allow read, write: if true; - } - } -} -``` - -### エラー2: Firebase App not initialized - -**原因**: Firebase設定が正しく読み込まれていない -**対処**: - -1. `.env.local`の値が正しいか確認 -2. 開発サーバーを再起動（Ctrl+C → npm run dev） - -### エラー3: Quota Exceeded - -**原因**: 無料枠の制限超過 -**対処**: - -1. Firebase Console > 使用量と請求 で使用状況確認 -2. 必要に応じてBlazeプラン（従量課金）にアップグレード - -## 10. 本番環境への移行準備 - -### 10.1 セキュリティ強化 - -- [ ] Firestoreセキュリティルールを本番用に更新 -- [ ] APIキーの制限設定（Google Cloud Console） -- [ ] ドメイン制限の追加 - -### 10.2 パフォーマンス最適化 - -- [ ] Firestore複合インデックスの設定 -- [ ] キャッシュ戦略の実装 -- [ ] バッチ処理の活用 - -### 10.3 監視設定 - -- [ ] Firebase Performance Monitoring有効化 -- [ ] Firebase Crashlytics設定（該当する場合） -- [ ] Google Analytics設定 - -## 次のステップ - -環境構築が完了したら： - -1. 実機でのテスト（スマートフォンで http://[PCのIPアドレス]:3000 にアクセス） -2. 位置情報の許可と動作確認 -3. 複数端末での同期テスト -4. PWAインストールテスト - -## 参考リンク - -- [Firebase Documentation](https://firebase.google.com/docs) -- [Firebase Pricing](https://firebase.google.com/pricing) -- [Firestore Security Rules](https://firebase.google.com/docs/firestore/security/get-started) -- [Firebase Auth Documentation](https://firebase.google.com/docs/auth/web/start) diff --git "a/docs/\344\273\225\346\247\230\346\233\270.md" "b/docs/\344\273\225\346\247\230\346\233\270.md" index 6892865..0a46785 100644 --- "a/docs/\344\273\225\346\247\230\346\233\270.md" +++ "b/docs/\344\273\225\346\247\230\346\233\270.md" @@ -62,20 +62,20 @@ ### 3.5 ログ & リプレイ -- Firestore に移動履歴・ミッション履歴を時系列保存 +- Supabase (PostgreSQL) に移動履歴・ミッション履歴を時系列保存 - 位置履歴を簡易再生（Leaflet Polyline） --- ## 4. システム構成 -| レイヤ | 技術 | 補足 | -| ------------ | ------------------------------------------------ | ---------------------------------------- | -| フロント | Next.js + React (PWA) | Leaflet.js で地図 / Workbox でオフライン | -| バックエンド | Firebase Auth / Firestore / Functions | Cloud Functions で判定ロジック | -| 通知 | Firebase Cloud Messaging + Pushcut | iOS バックグラウンド優先 | -| インフラ | Cloudflare Pages / Firebase Hosting | 将来 **atok.dev** に CNAME 可能 | -| ドメイン | MVP は臨時サブドメイン（例: `tag-temp.web.app`） | 本番移行時に atok.dev へ | +| レイヤ | 技術 | 補足 | +| ------------ | --------------------------------------------- | --------------------------------------------- | +| フロント | Next.js + React (PWA) | Leaflet.js で地図 / Workbox でオフライン | +| バックエンド | Supabase (PostgreSQL + PostGIS + Auth) | Database Functions で判定ロジック | +| 通知 | Web Push API + Service Worker | ブラウザネイティブ Push 通知 | +| インフラ | Vercel / Cloudflare Pages | 将来 **atok.dev** に CNAME 可能 | +| ドメイン | MVP は臨時サブドメイン（例: `tag-app.vercel.app`） | 本番移行時に atok.dev へ | --- diff --git a/lib/firebase.ts b/lib/firebase.ts deleted file mode 100644 index 5573c3a..0000000 --- a/lib/firebase.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { initializeApp, getApps } from 'firebase/app'; -import { getAuth } from 'firebase/auth'; -import { getFirestore } from 'firebase/firestore'; -import { getMessaging, isSupported } from 'firebase/messaging'; -import { getFunctions } from 'firebase/functions'; - -const firebaseConfig = { - apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, - authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, - projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, - storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, - messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, - appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, -}; - -const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0]!; - -export const auth = getAuth(app); -export const db = getFirestore(app); -export const functions = getFunctions(app, 'asia-northeast1'); - -export const getMessagingInstance = async () => { - if (typeof window !== 'undefined' && (await isSupported())) { - return getMessaging(app); - } - return null; -}; diff --git a/package.json b/package.json index ad8efb1..da74a0d 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "eslint": "^9.0.0", "eslint-config-next": "15.4.5", "eslint-config-prettier": "^9.1.0", - "firebase": "^12.6.0", "husky": "^9.1.7", "jsdom": "^27.2.0", "lint-staged": "^16.2.6",