# 承認フロー検討会ダッシュボード 接続手順

## 構成

- ソース管理: PORTALから独立したGitHubリポジトリ
- 配信: Cloudflare Pages（静的ファイルのみ。サーバー処理なし）
- 認証: Supabase Authの匿名サインイン。参加者の操作は不要
- 参加者名: 初回に表示名を1回入力し、ブラウザへ保存する
- 永続保存: Supabase Postgres
- リアルタイム同期: Supabase Realtime（DB変更、Presence、Broadcast）
- 出力: ブラウザからJSONファイルをダウンロード

URLを知っている人は誰でも閲覧・編集できる。社外秘を扱わない前提の構成。扱う場合はこの手順を使わず、認証と許可リストを入れる。

PORTALとは接続しない。会議結果は25様式と変更履歴をJSONで出力する。

## 1. Supabaseプロジェクトを作る

1. Supabaseで新規プロジェクトを作成する。リージョンはTokyoを選ぶ。
2. Authentication > Sign In / Providers で Anonymous sign-ins を有効にする。
3. SQL Editorで `supabase/approval-flow-workshop.sql` を貼り付けて実行する。
4. Project Settings > API で Project URL と Publishable key を控える。

`service_role` keyはブラウザやリポジトリへ絶対に置かない。画面で使うのはPublishable keyだけとする。

Publishable keyはブラウザへ配信される前提の鍵なので、リポジトリへコミットして構わない。

## 2. 参加者の識別

ログインはない。初回アクセス時に表示名の入力画面が出る。入力した名前は参加者一覧、共有カーソル、変更履歴に使われ、ブラウザへ保存されるため次回以降は聞かれない。

名前は会議情報を開いて「表示名を変更」から変えられる。

同じ名前を複数人が入れても動作するが、履歴が読みにくくなる。会議前に名字で統一するなど決めておく。

## 3. フロントエンドを接続する

`scripts/approval-flow-workshop-config.js` の空欄を設定する。

```js
window.JRG_FLOW_WORKSHOP_CONFIG = Object.freeze({
  supabaseUrl: "https://PROJECT_REF.supabase.co",
  supabasePublishableKey: "sb_publishable_xxx",
  defaultSessionId: "approval-flow-review-2026",
});
```

設定が空の場合はローカル共同編集モードになる。同じURLを複数タブで開くと、保存、同期、参加者表示、共有カーソルを確認できる。

## 4. 公開先

Cloudflare Pagesへ配信する。GitHub Freeプランの非公開リポジトリでも使える。

1. Cloudflareでアカウントを作る。
2. Workers & Pages > Create > Pages > Connect to Git でこのリポジトリを選ぶ。
3. ビルド設定は空のままにする。フレームワークなし、ビルドコマンドなし、出力ディレクトリはルート。
4. デプロイ後に `https://<project>.pages.dev` が発行される。以後はmainへpushするたび自動で更新される。

Supabase側のURL Configurationで、Site URLとRedirect URLへ公開URLを登録する。匿名サインインでもリダイレクト設定が効く場面があるため入れておく。

会議当日だけローカル配信する選択肢も残る。その場合は専用PCから配信し、参加者が同じURLへアクセスする。

## 5. 会議の進め方

1. 独立サイトの「承認フロー検討会」を開く。
2. 初回は表示名を入力して「参加する」を押す。以後は自動で参加する。
3. 会議名、ルーム名、招待リンク、参加者表示は既定で折りたたまれている。様式名の右にある「会議情報」で開閉する。開閉状態はブラウザに保存される。
4. 招待リンクは「会議情報」を開いて「招待リンクをコピー」から共有する。
5. 開いた直後は全体一覧シートを表示する。画面下部の小型シートタブから25様式の議題へ切り替え、左端のボタンで全体一覧と個別編集を行き来する。その隣の「全様式」で一覧を開いて直接移動でき、左右ボタンでもタブ列を送れる。
6. フロー列を横方向へ、各ステップを上下または別のフロー列へドラッグして並べ替える。
   - 横ドラッグ中は画面の左右約20%を自動送り領域として検知し、端へ近づくほど高速になる。ボード末端ではページも送られる。
   - フローボード上でトラックパッドをピンチするか、マウスホイールを回すと55〜145%の範囲で拡大縮小できる。入力後は慣性で滑らかに減速する。倍率ボタンでも操作できる。
7. フロー名称、役割、担当者を直接入力して編集する。処理は選択式で、承認3種、決裁、確認3種から選ぶ。候補にない名称は「その他を入力…」から登録でき、その段の選択肢として残る。
8. 必要に応じてフロー列やフロー内のステップを追加する。
9. 担当者候補の名前をフローへドラッグして割り当てる。
10. 結論が出た様式を「確定済み」にする。
11. 必要に応じて様式名の右にある ↶ ↷ ボタンと変更履歴を使う。Macは `⌘Z` / `⌘Shift+Z`、Windowsは `Ctrl+Z` / `Ctrl+Y`（または `Ctrl+Shift+Z`）でも操作できる。
12. 会議終了時に「会議を完了」を押し、「JSON」で保存する。

左端の「A案」「B案」「C案」でダッシュボード全体を切り替える。案ごとに別々の保存領域を持ち、片方の変更はもう片方へ影響しない。初めて開く案は初期データから始まる。参加者へは、見せたい案を開いた状態で招待リンクをコピーして渡す。

「JSON」の隣の「初期状態に戻す」で、25様式の経路と担当者、検討状況、会議メモを初期データへ戻せる。会議中の変更はすべて消える。確認のダイアログが出る。他の参加者の画面にも即座に反映される。

## 6. 運用上の注意

Supabaseの無料枠は7日間アクセスがないとプロジェクトが一時停止する。会議の前日に公開URLを一度開いて起動を確認する。

会社のネットワークが外部サービスへの通信を制限している場合、Supabaseへ接続できないことがある。事前に参加者1人へ公開URLを開いてもらい、編集できるか確認する。

## 7. 全体一覧シート

起動時の初期表示。25様式の承認・確認フローを読み取り専用で並べる。様式ごとに1列を作り、フロー名とステップを上から順に並べる。列は右へ続くので横スクロールで最後まで送る。各ステップは役割、処理、担当者の3列を同じ幅で並べ、線で区切る。個別編集での変更はそのまま一覧へ反映される。様式名を押すとその様式の個別編集へ移動し、画面下部左端の「全体一覧」で戻る。

参加者欄の「隠す」で、参加者・担当者候補・変更履歴パネルを閉じられる。非表示時は画面右端の「参加者を表示」で戻せる。表示設定はブラウザに保存される。

JSONには25様式の承認・確認経路、確定状態、会議メモ、更新情報、操作履歴が含まれる。