FesTime

Getting Started

FesTime をローカル環境に導入し、Supabase と連携してアプリを起動するまでのクイックスタートガイド

全体の流れ

  1. リポジトリのクローン & インストール
  2. Supabase プロジェクトの作成 & APIキー取得
  3. 設定ファイル custom.config.ts と環境変数 .env の準備
  4. SQL の自動生成 & データベース構築
  5. 開発サーバー起動 & セキュリティ監査テスト

Step 1: リポジトリのクローン & インストール

GitHub からリポジトリをクローンし、依存パッケージをインストールします。

git clone https://github.com/rsu-Suba/FesTime.git
cd FesTime
npm install

Step 2: Supabase プロジェクトの作成 & アカウント準備

  1. Supabase にアクセスし、ログインまたは新規アカウントを作成します。
  2. 「New project」 をクリックし、プロジェクト名とデータベースのパスワードを設定して作成します。
  3. プロジェクト作成完了後、プロジェクトトップページに記載されているURL右側のCopyボタンをクリックし、Project URLをコピーします。
    また、左サイドメニューの 「Project Settings」 → 「API Keys」 → 「Legacy anon」 を開き Public anonキーをコピーします。
    • Project URL (例: https://xxxxxxxx.supabase.co)
    • anon public key (例: eyJhbGciOi...)
  4. 左メニューの 「Authentication」 → 「Users」 → 「Add user」 (Create user) から、以下の 2 つの管理用アカウント を作成します (実在しないメールアドレスでも可能です) :
    • 全体管理者 (Admin) : 本部スタッフ用 (ニュース配信・Q&A回答・落とし物管理・設定変更の全権限)
      例: admin@example.com
    • 模擬店管理者 (StallAdmin) : 模擬店スタッフ用 (混雑・在庫状況の更新権限)
      例: booth@example.com
    • 2つのアカウントのパスワードは異なるものを設定することを推奨します。
    • 全体管理者メールアドレス、模擬店管理者のメールアドレス & パスワードは後述する .env ファイルに記述します。
本番運用時のプランについて:
文化祭当日の本番アクセス集中時は、Supabase Pro プランの利用を推奨します。無料枠では接続数制限によりリアルタイム通信が停止するリスクがあります。

Step 3: 設定ファイルと環境変数の準備

1. custom.config.ts の編集

src/constants/custom.config.ts を開き、イベントで使用する機能の ON/OFF features やイベント名を編集します。

  • custom.config.ts の各設定項目の詳細や JSON データとの対応関係については、変数 & 設定対応表 をご確認ください。
SQL生成スクリプト (SQL/generate_full.ts) の実行前に custom.config.ts を編集してください
FesTime の SQL 生成スクリプトは、custom.config.ts で有効にした機能フラグ (投票・模擬店・落とし物等) や .env の管理者情報を読み取り、あなたのイベントに最適化された専用の構築用SQL Full.sql を自動生成します。

2. 環境変数 .env の作成

プロジェクトルートに .env ファイルを作成し、Step 2 で取得した Supabase 情報と作成したアカウントのメールアドレス・パスワードを設定します。

.env
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-public-key
NEXT_PUBLIC_ADMIN_EMAIL=admin@example.com
NEXT_PUBLIC_BOOTH_ADMIN_EMAIL=booth@example.com
NEXT_PUBLIC_BOOTH_ADMIN_PASSWORD=your_secure_password
NEXT_PUBLIC_QR_AUTH_KEY=your_secure_qr_secret

開発中にアプリ内に擬似的な時刻を設定したい場合は以下の変数を .env 内に記載してください。

.env
NEXT_PUBLIC_MOCK_TIME="2026-05-23T10:14:00"

Google Analytics を使用する場合は以下の変数を .env 内に記載してください。

.env
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=GA-000000

Step 4: SQL の自動生成 & データベース構築

Step 3 の設定内容を反映したフルセットアップ SQL を生成し、Supabase に流し込みます。

  1. ターミナルで以下のコマンドを実行して SQL/Full.sql を生成します:
    npx tsx SQL/generate_full.ts
  2. Supabase ダッシュボードの左メニューから 「SQL Editor」 を開きます。
  3. 「New query」 を作成します。
  4. 生成された SQL/Full.sql の内容をすべてコピーして貼り付け、右下の 「Run」 を押して実行します。
  5. 「Success. No rows returned」と表示されれば、イベント専用のテーブル・RLS・関数が一括構築されます。

投票機能を使用する場合: vote.json の生成

custom.config.ts で投票機能を有効 features.vote: true にしている場合、フロントエンドの投票候補一覧を描画するための静的 JSON を生成します。

  1. Supabase の SQL Editor で SQL/06_generate_votejson.sql を実行します。
  2. クエリの実行結果 (JSON 配列データ) をコピーし、フロントエンドの public/data/vote.json に保存してください。

Step 5: 開発サーバー起動 & セキュリティ監査

ローカル開発サーバーを起動してアプリにアクセスします。

npm run dev

ブラウザで http://localhost:3000 にアクセスし、FesTime の画面が表示されれば導入完了です！

セキュリティ・権限設定の監査テスト

Supabase の RLS (アクセス制御) や不正投票防止ロジックが正しく動作しているかを以下のコマンドで一括テストできます:

npx tsx --env-file-if-exists=.env src/lib/Misc/audit_security.ts

すべてのテスト項目で 「Attack failed」 (攻撃の遮断に成功) と表示されれば、本番でも安全に運用できる状態です。