happa システム概要¶
システムの目的¶
happa は大学祭などの大規模イベントを効率的に管理するためのWebアプリケーションです。
主な機能¶
- イベント管理 - 千葉大祭などの大規模イベントの統合管理
- 団体管理 - サークルや団体の情報管理
- 企画管理 - 各団体が実施する企画の申請・承認・管理
- リソース配分 - 会場、予算、物品などのリソース割り当て
- スケジュール管理 - 説明会、イベントスケジュールの管理とチェックイン機能
- サポートシステム - 問い合わせ管理とチャット機能
技術スタック¶
フロントエンド (Web)¶
- Framework: Next.js 16.x (React 19)
- UI Library: daisyUI + Tailwind CSS
- State Management: Zustand
- Routing: React Router DOM
- API Client: Hono (組み込みAPI)
バックエンド¶
- Primary: Hono (Next.js 内蔵)
- Optional: FastAPI (将来の分離用)
- Database: MySQL 8.0+ with Prisma ORM
- Authentication: Auth0 (OAuth2)
- File Storage: Cloudflare R2 (S3互換)
インフラ¶
- Hosting: Cloudflare Pages
- Database: MySQL (Planetscale推奨)
- File Storage: Cloudflare R2
アーキテクチャ¶
現在のアーキテクチャ (モノリス)¶
┌─────────────────────────────────────┐
│ │
│ Next.js Application │
│ │
│ ┌─────────────────────────────┐ │
│ │ React Pages (UI) │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Hono API Routes │ │
│ │ (/api/...) │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Prisma Client │ │
│ └─────────────────────────────┘ │
│ │
└──────────────┬──────────────────────┘
│
┌──────────┼──────────┐
│ │ │
▼ ▼ ▼
┌────────┐ ┌────────┐ ┌────────┐
│ Auth0 │ │ MySQL │ │ R2 │
│(OAuth2)│ │ (DB) │ │(Files) │
└────────┘ └────────┘ └────────┘
将来のアーキテクチャ (マイクロサービス)¶
┌─────────────┐ ┌─────────────┐
│ Next.js │──────▶│ FastAPI │
│ Frontend │ │ Backend │
└─────────────┘ └──────┬──────┘
│
┌─────────┼─────────┐
│ │ │
▼ ▼ ▼
┌────────┐┌────────┐┌────────┐
│ Auth0 ││ MySQL ││ R2 │
└────────┘└────────┘└────────┘
データモデル概要¶
主要エンティティ¶
- User - ユーザーアカウント
- Auth0連携
-
リソースレベル権限
-
Project - イベント (例: 千葉大祭2024)
- イベント期間
- 申請可能カテゴリー
-
通知設定
-
Circle - 団体
- 団体名
-
公認/非公認フラグ
-
CircleProject - 企画
- 企画名・説明
- カテゴリー・場所
- ステータス (申請中/承認済み/却下)
-
メンバー管理
-
Allocation - リソース
- テント、予算、物品など
- 在庫管理
-
価格設定
-
Schedule - スケジュール
- 説明会
- チェックイン機能
-
カスタム開始時刻
-
ResourcePermission - リソースレベル権限
- プロジェクト/企画ごとの権限
- 9種類の細かい権限
- 有効期限設定
詳細は データモデル を参照。
権限システム¶
リソースレベル権限 (新)¶
ユーザーはリソース（ProjectやCircleProject）ごとに異なる権限を持つことができます。
権限の種類: - READ - 読み取り - WRITE - 書き込み・更新 - DELETE - 削除 - MANAGE_MEMBERS - メンバー管理 - MANAGE_PERMISSIONS - 権限管理 - APPROVE - 承認操作 - CHECKIN - チェックイン操作 - ALLOCATE_RESOURCES - リソース割り当て - VIEW_PRIVATE - 非公開情報の閲覧
詳細は リソースレベル権限システム を参照。
グローバルロール (廃止予定)¶
従来のシステム全体でのロール: - User - 一般ユーザー - LimitedAdmin - 制限付き管理者 - ReadOnlyAdmin - 読み取り専用管理者 - FullAccessAdmin - 完全管理者
ワークフロー¶
企画申請フロー¶
1. ユーザーがサークル情報と希望企画を入力
↓
2. システムが申請グループを作成（第1〜第5希望）
↓
3. 管理者が申請を確認
↓
4. 承認/却下を決定
↓
5. 承認された企画が正式登録
↓
6. リソース割り当て・スケジュール設定
チェックインフロー¶
1. スケジュールが企画に割り当てられる
↓
2. 企画メンバーまたは管理者がチェックイン画面にアクセス
↓
3. QRコードスキャン or リスト選択 or セルフチェックイン
↓
4. 出席状態を記録（ATTENDANCE/ABSENCE/TENTATIVE）
↓
5. 集計レポートで確認
環境構成¶
開発環境¶
- Node.js 18以降
- MySQL 8.0以降
- Auth0アカウント (開発モードで省略可)
本番環境¶
- Cloudflare Pages
- MySQL (Planetscale推奨)
- Cloudflare R2
- Auth0
セキュリティ¶
実装済み¶
- Auth0 OAuth2認証
- リソースレベルアクセス制御
- CORS設定
- SQLインジェクション対策 (Prisma ORM)
- XSS対策 (React自動エスケープ)
推奨事項¶
- HTTPS通信の強制
- レート制限の実装
- 監査ログの記録
- 定期的なセキュリティアップデート
パフォーマンス¶
最適化施策¶
- Prisma Accelerate (データベースキャッシュ)
- Edge Runtime (Cloudflare Pages)
- 画像最適化
- コード分割
- 遅延ロード
モニタリング¶
- エラー追跡
- パフォーマンスメトリクス
- ユーザー行動分析
今後の計画¶
- Phase 1: 権限システム完全移行
-
グローバルロールから完全にリソースレベル権限へ移行
-
Phase 2: FastAPI分離 (オプション)
- Next.jsからAPIを分離
-
マイクロサービス化
-
Phase 3: 機能拡張
- リアルタイム通知
- モバイルアプリ
-
分析ダッシュボード
-
Phase 4: スケーラビリティ向上
- データベースシャーディング
- キャッシュ戦略の改善
- CDN活用
次のステップ: クイックスタート