Treevia

README

Treevia

バイナリツリー構造の組織図管理アプリ（MLM・ネットワーク組織向け）。Google／メールでログインし、複数端末から同じデータにアクセスできます。

機能

バイナリツリー表示 — 左右2分木の組織図をビジュアルで管理
ログイン — Googleログイン／メールアドレス登録（Gmailを持たない人向け）の2方式
リアルタイム同期 — Firestoreでスマホ・PCのデータを自動同期
ドラッグ&ドロップ — サブツリーごと移動可能
元に戻す — 最大20回分の操作を記録（メモリ上）
写真対応 — メンバー写真を160×160pxにリサイズして保存
役職カラー — PDCM / DCM / ECM / PM / GM の5段階

セットアップ手順

1. リポジトリをクローン

git clone https://github.com/<your-username>/treevia.git
cd treevia
npm install

2. Firebase プロジェクトを作成

Firebase Console でプロジェクト新規作成
Authentication → ログイン方法 → Google と メール/パスワード を有効化
Firestore Database → データベース作成（本番モードで開始）
プロジェクト設定 → マイアプリ → ウェブアプリ追加 → SDK設定をコピー

3. 環境変数を設定

cp .env.example .env.local

.env.local を開いて Firebase の値を入力：

VITE_FIREBASE_API_KEY=AIza...
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=1:123:web:abc...

4. Firestore セキュリティルールを適用

Firebase Console → Firestore → ルールタブを開き、firestore.rules の内容を貼り付けて公開。

または Firebase CLI を使う場合：

npm install -g firebase-tools
firebase login
firebase init firestore   # プロジェクト選択、既存ファイルを使用
firebase deploy --only firestore:rules

5. ローカル開発サーバーを起動

npm run dev

ブラウザで http://localhost:5173/treevia/ を開く。

GitHub Pages へのデプロイ

1. GitHub Secrets を設定

リポジトリ → Settings → Secrets and variables → Actions → New repository secret で以下を登録：

Secret名	値
`VITE_FIREBASE_API_KEY`	FirebaseのapiKey
`VITE_FIREBASE_AUTH_DOMAIN`	FirebaseのauthDomain
`VITE_FIREBASE_PROJECT_ID`	FirebaseのprojectId
`VITE_FIREBASE_STORAGE_BUCKET`	FirebaseのstorageBucket
`VITE_FIREBASE_MESSAGING_SENDER_ID`	FirebaseのmessagingSenderId
`VITE_FIREBASE_APP_ID`	FirebaseのappId

2. GitHub Pages を有効化

リポジトリ → Settings → Pages → Source を GitHub Actions に設定。

3. main ブランチにプッシュ

git add .
git commit -m "initial commit"
git push origin main

Actions タブで自動ビルド&デプロイが走ります。完了後は以下のURLでアクセス可能：

https://<your-username>.github.io/treevia/

4. Firebase の承認済みドメインに追加

Firebase Console → Authentication → Settings → 承認済みドメイン → <your-username>.github.io を追加。

操作方法

ノード追加

PC: ノードにマウスオーバー → 下に表示される＋ボタンをクリック
スマホ: ノードを500ms長押し → ＋ボタンをタップ

ノード編集

ノードをクリック → 右側の編集パネルで名前・役職・写真を変更 → 保存

ノード削除

PC: ノードにマウスオーバー → 右上の 🗑️ ボタンをクリック
削除すると配下のメンバーも一緒に削除されます

ドラッグ&ドロップ（移動）

ノードをドラッグ → 緑の点線ゾーンにドロップ
移動前に確認ダイアログが表示されます
ルートノードはドラッグ不可

元に戻す

右上の 元に戻す ボタンまたは Ctrl+Z / Cmd+Z

画面操作

ズーム: マウスホイール / ピンチ
パン: 背景をドラッグ
全体表示: 右下の ⊞ 全体表示 ボタン

運用スクリプト（`scripts/`）

どれも Cloud Shell で実行する。setup_monitoring.py 以外は読み取り専用。

スクリプト	用途
`user_stats.py`	総ユーザー数・新規登録・利用者数・有料プラン人数などを集計
`chart_stats.py`	組織図ごとのメンバー数の分布と、無料プランで100人に近い組織図を集計
`daily_report.py`	日次報告（新規登録・有料人数・無料人数の人数帯別とそのアクティブ数）。`--detail` でアラートなどの詳細も出す
`reconcile.py`	Stripe の有効サブスクと Firestore のプランのずれを照合
`setup_monitoring.py`	Cloud Functions の死活監視とアラートを作成

TOKEN=$(gcloud auth print-access-token) python3 scripts/user_stats.py

user_stats.py / chart_stats.py / daily_report.py は、TOKEN の代わりに環境変数 TREEVIA_GCP_SA_B64 （読み取り専用サービスアカウントの鍵JSONを base64 にしたもの）でも認証できる。 Claude Code on the web の環境変数に登録しておけば、Cloud Shell を開かずに集計できる。このサービスアカウントには閲覧系のロール（roles/datastore.viewer / roles/firebaseauth.viewer / roles/serviceusage.serviceUsageConsumer）だけを付け、Stripe の秘密鍵（Secret Manager）にはアクセスさせない。そのため reconcile.py は引き続き Cloud Shell で実行する。

user_stats.py と chart_stats.py は、環境変数 TREEVIA_EXCLUDE にメールアドレスか uid （複数ならカンマ区切り）を入れると、そのユーザーを集計から外す（運営者自身の確認用アカウントなど）。

reconcile.py と setup_monitoring.py の詳細は BILLING_SETUP.md を参照。

技術スタック

技術	用途
React 18 + Vite	UIフレームワーク
Firebase v10	認証・データベース
Zustand	状態管理
Tailwind CSS	スタイリング
GitHub Actions	自動デプロイ