README.md (4523B)
1 # Cafe Timer (hw-ba-cafe) 2 3 Next.jsで構築された、Cloudflare Pages 上で動作するカフェタイマー PWA です。 4 5 ## 技術スタック 6 7 * **Framework:** Next.js (App Router) 8 * **Deployment:** Cloudflare Pages 9 * **Build Tool:** @cloudflare/next-on-pages 10 * **Database:** Firebase Firestore 11 * **Push Notification:** OneSignal 12 * **Styling:** Tailwind CSS 13 14 ## セットアップ & 開発 15 16 ### 1. 依存関係のインストール 17 ``` 18 bun i 19 ``` 20 21 ### 2. 開発サーバーの起動 22 ``` 23 bun dev 24 ``` 25 26 ### 3. Check 27 ``` 28 bun lint 29 ``` 30 and 31 ``` 32 bun pages:build 33 ``` 34 35 ## ビルド & デプロイ 36 Cloudflare Pages でのビルドには特定の設定が必要です。 37 38 ### Cloudflare Pages ビルド設定 39 - Build command: `npx @cloudflare/next-on-pages@1` 40 - Build output directory: `.vercel/output/static` 41 - Compatibility Date: `2024-12-30` 42 - Compatibility Flags: `nodejs_compat` 43 44 ### 設定 45 1. output 設定の禁止: `next.config.ts`で`output: 'standalone'`や`output: 'export'`は設定しません。設定すると、Cloudflare 向けのビルドプロセスと競合し、404エラーの原因となります。 46 47 ## プロジェクト構成案：Firebase × Cloudflare × OneSignal 48 49 ### 1. システム概要 50 51 ユーザーがアプリ上のボタンをタップすると、その履歴を即座に保存し、正確に3時間後にプッシュ通知を送信する。複雑な遅延処理の管理を自前で持たず、外部サービスのスケジュール機能にオフロードすることで、サーバーレスかつ低コストで堅牢な仕組みを実現する。 52 53 ### 2. 技術選定と役割 54 55 | コンポーネント | 選定ツール | 担当機能 | 56 | --- | --- | --- | 57 | **Frontend** | Next.js (TypeScript) | UI、Google認証のトリガー、Firestoreへの書き込み、通知予約APIの呼び出し | 58 | **Authentication** | Firebase Auth | Googleログインによるユーザー識別とセッション管理 | 59 | **Database** | Firebase Firestore | ユーザーごとのタップ履歴保存、セキュリティルールによる権限管理 | 60 | **Edge Functions** | Cloudflare Pages Functions | OneSignal APIキーの秘匿、通知予約リクエストのプロキシ | 61 | **Push Engine** | OneSignal | `send_after` パラメータによる3時間後の通知スケジューリング、通知配信 | 62 63 ### 3. データフロー 64 65 1. **Auth**: ユーザーがGoogleアカウントでサインイン。Firebase UIDを取得。 66 2. **Save**: ボタンタップ時、FrontendからFirestoreの `/users/{uid}/taps` へレコードを書き込み。 67 3. **Request**: Frontendから Cloudflare Pages Functions (`/api/schedule`) へ `uid` を送信。 68 4. **Schedule**: FunctionsがOneSignal APIを叩き、「3時間後」の時刻を指定して通知を予約。 69 5. **Delivery**: 3時間経過後、OneSignalが自動的にターゲット（`external_id == uid`）へ通知を配信。 70 71 #### 4. 実装上の重要ポイント 72 73 * **APIキーの保護**: OneSignalの `REST API Key` はブラウザ側に露出させず、必ずCloudflareの環境変数として管理し、Functions経由でのみ使用する。 74 * **IDの紐付け**: OneSignalのSDKを使用して、Firebaseの `uid` をOneSignalの `external_user_id` としてセットしておく。これにより、APIから特定のユーザーを簡単に指定できる。 75 * **冪等性の考慮**: 連打による通知の重複を防ぐ場合、FirestoreのドキュメントIDやOneSignalの `idempotency_key` の活用を検討する。 76 77 78 ```mermaid 79 graph TD 80 User((ユーザー)) 81 82 subgraph Frontend [Next.js / Cloudflare Pages] 83 UI[タップボタン] 84 SDK[Firebase SDK / OneSignal SDK] 85 end 86 87 subgraph Auth_DB [Firebase] 88 Auth{Google Auth} 89 Firestore[(Firestore)] 90 end 91 92 subgraph Backend [Cloudflare Pages Functions] 93 API[API Route /api/schedule] 94 end 95 96 subgraph Notification [OneSignal] 97 Scheduler[配信スケジューラー] 98 end 99 100 User -->|Googleログイン| Auth 101 Auth -->|UID取得| SDK 102 User -->|ボタンタップ| UI 103 UI -->|履歴保存| Firestore 104 UI -->|通知予約リクエスト| API 105 API -->|APIキーを付与して送信| Scheduler 106 Scheduler -.->|3時間待機| Scheduler 107 Scheduler -->|プッシュ通知| User 108 109 classDef highlight fill:#f9f,stroke:#333,stroke-width:2px; 110 class API highlight; 111 ```