リアルタイムマルチプレイヤークイズで知識を競い合おう
Zap!-Quizは、リアルタイムマルチプレイヤー対応のオンラインクイズアプリケーションです。友達や世界中のプレイヤーと一緒に、早押しクイズや記述式クイズを楽しむことができます。公式の世界史・日本史クイズから、ユーザーが作成したオリジナルクイズまで、幅広いジャンルのクイズでスキルを競い合えます。
- リアルタイム対戦: 友達や世界中のプレイヤーとリアルタイムでクイズバトル
- 早押しシステム: テレビの早押しクイズさながらの緊張感あるゲームプレイ
- 記述式回答: 自由記述による回答で深い知識を競う
- 公式クイズ: 世界史・日本史の体系的な学習コンテンツ
- ユーザー作成クイズ: 簡単な操作で自分だけのクイズを作成・共有
- ルームリーダーシステム: 分散型アーキテクチャによる安定した進行
- リアルタイム統計: ゲーム結果の即座な反映と詳細な分析
- Node.js 18.0.0以上
- npm, yarn, pnpm または bun
- Firebase アカウント（Firestore・Authentication設定済み）
- リポジトリをクローン:
git clone https://github.com/Stasshe/Zap!-Quiz.git
cd Zap!-Quiz- 依存関係をインストール:
npm install
# または
yarn
# または
pnpm install
# または
bun install- 環境変数の設定:
.env.localファイルを作成し、Firebase認証情報を設定:
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-storage-bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id
- 開発サーバーを起動:
npm run dev
# または
yarn dev
# または
pnpm dev
# または
bun dev- http://localhost:3000をブラウザで開いてアプリを確認
- トップページの「登録」ボタンからアカウントを作成
- メールアドレスとパスワードでログイン
- プロフィールでユーザー名を設定
- 「クイズルーム」から世界史・日本史の公式クイズを選択
- 古代・中世・近世・近代・現代の時代別クイズで学習
- 早押しで回答権を獲得し、記述式で回答
- カスタムジャンルのクイズルームに参加
- 他のユーザーが作成したオリジナル問題に挑戦
- 多様なトピックで知識を広げる
- 「クイズ作成」ページから新しいクイズを作成
- 問題とその答えを設定し、ジャンル・単元を選択
- 複数の正解パターンを登録可能（表記揺れに対応）
- 作成したクイズを他のユーザーと共有
- 「ランキング」ページで全体およびジャンル別のランキングを確認
- 個人統計でジャンル別の得意・不得意を分析
- 経験値とスコアに応じたランク（レベル）システム
- Next.js 14 (App Router) - Reactベースのフルスタックフレームワーク
- TypeScript - 型安全な開発
- Tailwind CSS - ユーティリティファーストなCSSフレームワーク
- React Context API - 状態管理
- Firebase Firestore - NoSQLリアルタイムデータベース
- Firebase Authentication - ユーザー認証システム
- Vercel - 本番環境ホスティング
- ルームリーダーモデル - 分散型ゲーム進行システム
- 階層化データベース - ジャンル > 単元 > クイズの効率的な構造
- リアルタイム同期 - Firestoreによる即座のデータ更新
- 早押し機能: ミリ秒単位での正確な早押し判定
- 記述式回答: 自由入力による詳細な知識確認
- 複数正解対応: 表記揺れや同義語への対応
- リアルタイム結果: 瞬時の正誤判定と解説表示
- 世界史: 古代から現代までの体系的な学習コンテンツ
- 日本史: 縄文時代から令和まで の時代別問題
- YAML形式: 構造化されたデータ管理
- ルーム制: 最大複数人での同時対戦
- リーダーシステム: 自動選出と引き継ぎ機能
- リアルタイム更新: 参加者状況の即座な反映
- 個人統計: 正答率、平均スコア、ジャンル別分析
- グローバルランキング: 全ユーザー対象のスコアランキング
- 経験値システム: ゲーム参加による成長要素
src/
├── app/ # Next.js App Router
│ ├── auth/ # 認証関連ページ
│ ├── quiz/ # クイズ関連ページ
│ ├── profile/ # プロフィール
│ └── ranking/ # ランキング
├── components/ # Reactコンポーネント
│ ├── layout/ # レイアウトコンポーネント
│ └── quiz/ # クイズ関連コンポーネント
├── hooks/ # カスタムHooks
├── services/ # ビジネスロジック
├── types/ # TypeScript型定義
└── config/ # 設定ファイル
- 型安全性: TypeScriptによる厳密な型チェック
- リアルタイム性: Firestoreリスナーによる即座の状態同期
- レスポンシブ: モバイル・デスクトップ両対応
- SEO最適化: Next.jsによるSSR/SSG対応
- ユーザーがクイズルームに参加
- ルームリーダー（最初の参加者）がクイズを開始
- 各ユーザーの早押しタイミングをFirestoreに記録
- 最速ユーザーに解答権を付与
- 記述式回答の正誤判定と結果表示
- 全問題完了後の統計更新とルーム自動削除
- Vercelアカウントでリポジトリを連携
- 環境変数にFirebase設定を追加
- 自動デプロイメントパイプラインが構築される
- Firestore セキュリティルールの設定
- Authentication プロバイダーの有効化
- インデックスの作成（必要に応じて）
バグ報告や機能提案は、GitHubのIssuesまでお気軽にどうぞ！
- このリポジトリをフォーク
- 機能ブランチを作成 (
git checkout -b feature/AmazingFeature) - 変更をコミット (
git commit -m 'Add some AmazingFeature') - ブランチにプッシュ (
git push origin feature/AmazingFeature) - プルリクエストを作成
このプロジェクトはMITライセンスの下で公開されています。詳細はLICENSEファイルをご覧ください。
- GitHub Issues: バグ報告・機能リクエスト
- Discussions: 質問・アイデア共有
このプロジェクトでは、GitHub Actionsを使用した自動リリースシステムを採用しています。
-
package.jsonのバージョンを更新:
# 手動でpackage.jsonのversionを編集 # 例: "version": "1.1.0" → "version": "1.2.0"
-
変更をコミット・プッシュ:
git add package.json git commit -m "chore: bump version to v1.2.0" git push origin main -
GitHub Actionsからリリース:
- GitHubリポジトリページの「Actions」タブを開く
- 左サイドバーから「Create Release」ワークフローを選択
- 右上の「Run workflow」ボタンをクリック
- 「Run workflow」を実行
-
自動実行される処理:
package.jsonのバージョンからv1.2.0形式のGitタグが作成- GitHubリリースページが自動生成
- 前回のリリースから現在までのコミットメッセージが自動でリリースノートに追加
- リリース日とインストール方法などの情報も自動追加
# リリース案内メッセージを表示
npm run release注意:
- 同じバージョンのリリースが既に存在する場合、ワークフローは失敗します
- 実際のリリース作成はGitHub Actionsから行ってください
🧠 知識で競い合い、共に成長しよう！ 🎮
Made with ❤️ by the Zap!-Quiz Stasshe