Illuminote

Illuminote は、ステージ照明のプランニングとビジュアライズを支援する Web アプリケーションです。Unity WebGL によるレンダリングと Reactで作成したフロントエンドを組み合わせ、プロジェクト単位のライトシーン管理やユーザー認証機能を提供します。

主な機能

• ログイン / 新規登録 / ログアウトによる簡易認証機能（メール・パスワード）
• プロジェクト・シーンの一覧表示と詳細編集画面
• Unity WebGL を用いたライトシーンのプレビュー描画
• プロフィール編集とローカル JSON への永続化
• 通知やステージ選択（将来的に拡張）

技術スタック

• 言語: JavaScript（フロントエンド）, TypeScript（バックエンド）
• フロントエンド: React 19, Vite, React Router, Unity WebGL 連携
• スタイリング: プレーン CSS（App.css / index.css）
• バックエンド: Hono (Node.js)

リポジトリ構成

• backend/: Hono ベースの API サーバー。
  • src/index.ts: 認証・プロフィール・ライト設定 API を定義するエントリポイント。
  • data/: ユーザー情報やライト設定を保持する JSON ファイル群。
  • docker-compose.yml: MySQL 開発用コンテナ定義（将来の DB 移行を想定）。
• frontend/: React + Vite による SPA。
  • src/pages/: ログイン、プロジェクト一覧などのページコンポーネント。
  • src/layouts/: 認証レイアウトとメインレイアウトのラッパー。
  • src/api/: 認証 API との通信ヘルパー。
  • src/unity.js / src/UnityRoot.jsx: Unity WebGL の初期化と表示制御ロジック。
  • public/WebGLBuild/: Unity のビルド成果物を配置するディレクトリ。
• README.md: このドキュメント。

セットアップ

前提条件

• Node.js 20 以降（推奨）
• npm 10 以降

1. バックエンドの起動

cd backend
npm install
npm run dev

2. フロントエンドの起動

cd frontend
npm install
npm run dev

• http://localhost:5173 が起動します。

3. ブラウザでアクセス

• フロントエンド起動後、http://localhost:5173 へアクセスするとログイン画面が表示されます @frontend/src/App.jsx#20-41。
• 新規登録実行後は自動的にプロジェクト一覧へ遷移します。

環境変数

変数名	定義場所	説明
VITE_API_BASE_URL	frontend/.env	フロントエンドから直接 fetch する API エンドポイントのベース URL。
VITE_API_PROXY_TARGET	システム環境変数	Vite の開発サーバープロキシが参照するバックエンド URL。未設定時は http://192.168.17.45:3100 を利用します @frontend/vite.config.js#6-19。
HOST, PORT	バックエンド	serve 呼び出し時に参照され、API サーバーの待受アドレス/ポートを制御します @backend/src/index.ts#374-383。

API 概要

メソッド	パス	説明
POST	/api/auth/register	ユーザー登録。入力バリデーションと重複チェックを実行します。
POST	/api/auth/login	ログイン。トークン（疑似値）とユーザーデータを返却します。
POST	/api/auth/logout	現在のユーザー情報をリセットします。
GET	/api/profile	アクティブユーザーのプロフィール取得。
PUT	/api/profile	プロフィール更新とパスワード変更。
GET	/api/projects/:projectId/scenes/:sceneId/light	ライト設定 JSON を取得。
PUT	/api/projects/:projectId/scenes/:sceneId/light	ライト設定 JSON を保存。
GET	/api/health	ヘルスチェック。

フロントエンド構成

• ルーティングは App.jsx で定義されています。認証系とメインレイアウトを分離し、/projects 以下に主要機能が集約されています。
• Unity WebGL の描画キャンバスは UnityRoot.jsx と unity.js で管理され、対象ページでのみ初期化されます。
• API との通信は src/api/auth.js の薄いラッパーを通じて行います。

Docker

backend/docker-compose.yml には MySQL 8 のコンテナ定義が含まれていますが、現状の実装はファイルベースのストレージを使用しており、MySQL への依存はありません。今後の拡張時に活用する予定です。