タブ役割定義 (Tab Roles)
WingStats Manager のコントロールパネルには下表のタブがある（下表は主なもの。解析モードには 9〜12 の分析タブもある。設定モードには 13 アプリ設定・15 OBS 連携・14 データ管理・5 ログ取り込みなど）。各タブには明確な責務があり、新規機能を追加するときはまずどのタブに置くべきか をこのドキュメントで確認する。
責務がはみ出した状態（例: オーバーレイ設定タブにビルド情報を置く）は後の認知負荷を増やすため、避けること。
タブ一覧と責務
| # | タブ名 | コンポーネント | 責務 (置く) | 置かない |
|---|---|---|---|---|
| 0 | オーバーレイ設定 (配信モード) | SettingsSubTabs | OBS オーバーレイの見た目・配置・テーマ・パーツ ON/OFF | OBS ブラウザソース・リプレイ録画・OBS 設定ガイド (→ 15)、開発者向け情報、デバッグ、内部状態、アプリ全体の動作設定 (→ 13) |
| 1 | リアルタイム解析 | RealtimeAnalysisTab | 進行中の試合のライブ表示・現在の状態・現セッション統計 | 過去試合の集計、設定 |
| 2 | DB 閲覧 | MatchListTab | 過去試合の一覧・詳細・キャラ統計など DB データのブラウズ（選んだ行の削除・CSV 保存まで） | リアルタイム情報、設定、取り直し・整理・修復 (→ 14) |
| 3 | プレイヤー | PlayerDashboardTab | 個別プレイヤー(自分含む) の累積戦績・キャラ別勝率・推移グラフ | リアルタイム、設定、他者のメモ |
| 4 | ブラウザ自動化 (設定モード・開発者モードのみ) | BrowserAutomationTab | ヘッドレス取得の手動操作・ログイン状況・取得試行ログ（開発・調査用） | DB ブラウズ、設定（取得方式などの方針 → 13） |
| 5 | ログ取り込み (設定モード) | LogAnalysisTab | ゲームログファイルを取り込んで一括解析・DB へ投入 | リアルタイム監視、設定 |
| 6 | 使い方 | HelpTab | エンドユーザー向け UI 説明・スクリーンショット | 開発者向け情報 |
| 7 | 更新履歴 | ChangelogTab | アプリのリリースノート (ユーザー向け視点) | 開発者向けの実装ログ |
| 8 | デバッグ・性能 | DebugTab | 開発者 / トラブルシュート用 の集約画面 — ビルド情報、FPS、CPU/Mem、状態 snapshot、内部設定、BP ウィンドウの表示確認 | エンドユーザーが日常的に触る設定 |
| 13 | アプリ設定 (設定モード) | AppSettingsTab | 配信にも解析にも属さない アプリ全体の動作設定 — 配信者ではないモード、自動起動とゲーム連携、Recorder の設定スイッチ、戦績取得の方針（取得方式を含む）、ログ監視の方針、BP 窓の設定、エラーレポート送信、開発者モード | オーバーレイの見た目、OBS に関する設定 (→ 15)、その場の操作 (監視開始 / 今すぐログイン / 今すぐ取得 など)、デバッグ |
| 15 | OBS 連携 (設定モード) | ObsIntegrationTab | OBS に関するもの をまとめる — ブラウザソースの配信サーバ (ON/OFF・URL・起動時にオーバーレイ窓を開く・ポート)、自動録画 (OBS。リプレイ・試合)、OBS Studio 設定ガイド。OBS につながっていなくても他の機能に支障はないので、未接続は警告として出さない | オーバーレイの見た目 (→ 0)、OBS と関係しないアプリ全体の動作設定 (→ 13) |
| 14 | データ管理 (設定モード) | DataManagementTab | 試合データの 取り直し・取り込みへの入口・整理・修復 — アカウントを選んで全試合 / 全シーズンの取り直し、記録サービスにその場で取得させる操作、log × API 整合性、そのアカウントが入っていない試合の削除、DB の修復 | 試合の閲覧 (→ 2)、設定 (→ 13) |
配置の判断フロー
新しいカード / セクションを追加するときは、以下を順に問う：
エンドユーザー向け？ 開発者 / トラブルシュート向け？
- エンドユーザー → オーバーレイ設定 / アプリ設定 / OBS 連携 / 使い方 / リアルタイム / DB / プレイヤー
- 開発者・トラブルシュート → デバッグ・性能
オーバーレイの見た目・配置と関係する？
- Yes → オーバーレイ設定
- No → OBS とのつなぎ（ブラウザソースの配信・OBS での録画・OBS 側の設定）なら OBS 連携、アプリ全体の動作設定（起動時の動き・記録・取得の方針など）なら アプリ設定、それ以外は別のタブを検討
- OBS につながっていないことは警告にしない（OBS を使わない人・日もあり、ほかの機能に支障がない）
- アプリ設定は配信モードにも解析モードにも属さないので、「配信者ではない」モード（配信モードが閉じる）でも開ける。配信しない人も使う設定は配信モードに置かない
リアルタイム情報？ それとも過去データ？
- リアルタイム → リアルタイム解析
- 過去 → DB 閲覧 or プレイヤー
データ取り込み系？
- ファイル取り込み → ログ取り込み（データ管理から開ける）
- 取り直し・整理・修復（全試合取得、記録サービスでの今すぐ取得、整合性、DB 修復など）→ データ管理
- ヘッドレス取得のテスト（開発・調査用）→ ブラウザ自動化。取得の方針は アプリ設定
アプリの状態・性能・識別情報？
- → デバッグ・性能 (必ずここ)
開発・調査のときだけ要る表示？（内部 ID、生の API レスポンス、シミュレーション、内部状態の文字など）
- → その画面に置いてよいが、
useDeveloperMode()が true のときだけ出す（下の「開発者モード」）
- → その画面に置いてよいが、
アンチパターン
❌ オーバーレイ設定タブ (「テーマ」サブタブ) にデバッグ情報を置く
なぜダメか: タブ名が示す責務 (オーバーレイの見た目調整) から逸脱する。エンドユーザーがオーバーレイをいじるためにタブを開いたときに、関係のない情報が混ざる。
例: ビルド情報、CPU メトリクス、FPS、内部 IPC のデバッグ。 正しい配置: デバッグ・性能タブ。
❌ デバッグタブにユーザー設定を置く
なぜダメか: デバッグタブはトラブルシュート用なのに、日常的な設定変更が混在すると「触っていいのか」分からなくなる。
例: オーバーレイのテーマ切替、myUid 設定。 正しい配置: 設定タブ。
❌ OBS に関する設定をオーバーレイ設定やアプリ設定に散らす
なぜダメか: 以前は OBS ブラウザソースが「テーマ・OBS」サブタブ、OBS 設定ガイドが「詳細設定」accordion、リプレイ自動録画がアプリ設定に分かれていて、OBS を使う人が 3 か所を回る必要があった。OBS に関するものは OBS 連携タブ (15) にまとめ、オーバーレイ設定の「テーマ」には案内と「OBS 連携へ」ボタンだけを置く。「詳細設定」accordion はなくした (現在の設定プレビューはテーマの一番下にそのまま出す)。BP ウィンドウのデバッグはデバッグ・性能タブ (「BPウィンドウの表示確認」)、自動起動などアプリ全体の設定はアプリ設定タブに置く。
「デバッグ・性能」タブに置くものの基準
DebugTab には以下のような immutable / 観測専用 / 開発者向け の情報のみを置く：
| カテゴリ | 例 |
|---|---|
| Build identity | BuildInfoCard — gitSha / branch / builtAt / trigger / dirty 状態 |
| 性能メトリクス | FpsCard (renderer fps), ProcessMetricsCard (CPU/Mem per process) |
| 状態 snapshot | StateSnapshotCard — store / 各機能の ON/OFF 一覧 |
| 内部設定の可視化 | BrowserAutomationSettingsCard, BroadcastSettingsCard — 通常編集しないが見えると助かる設定 |
追加時のチェックリスト:
- [ ] エンドユーザーが触る必要がない
- [ ] トラブルシュート時に「これが分かると助かる」情報である
- [ ] タブ非アクティブ時にコストがゼロ (DebugTab の規約: 計測は
activeフラグで止める) - [ ] そのまま情報をコピーして開発者に貼り付けられる (テキスト選択 / コピーボタン)
既存タブ内のサブ構造 (補足)
設定タブ (SettingsSubTabs)
設定タブ
├── サブタブ: テーマ
│ ├── ThemeSelector — テーマ切替
│ ├── OverlayWindowSizeSection — オーバーレイ window サイズ
│ ├── OverlayMatchTypeFilterSection — Rank/Normal フィルタ
│ ├── Alert (info) — 「OBS に映す URL…は「設定 › OBS 連携」にあります」+「OBS 連携へ」ボタン (JumpToTabButton)
│ └── CurrentSettingsPreviewCard — 現在の設定プレビュー
├── サブタブ: パーツ設定
│ └── TextInputSection — オーバーレイ各 area のテキスト
└── サブタブ: レイアウト
└── LayoutAdjustmentSection — オーバーレイ各 area の位置 / 表示切替サブタブの責務: いずれも オーバーレイの操作・調整 に閉じる。アプリ全体の状態やデバッグはここに置かない。
アプリ設定タブ (AppSettingsTab)
アプリ設定タブ (設定モード → アプリ設定)
├── UsageModeSection — 使い方 (配信者ではないのでオーバーレイ機能は使わない)
├── AutoLaunchSection — 自動起動とゲーム連携 (Windows 自動起動 / トレイ / ゲーム検知 / Steam / Recorder)
├── RecorderControlSection — 記録サービス (Recorder) の設定スイッチ (今すぐ実行するボタンはデータ管理へ移した)
├── BattleRecordSettingsSection — 戦績取得 (試合終了時 / 起動時 / 要ログイン時の動き / ログインページ URL / 取得方式)
├── LogWatcherPolicySection — ログ監視 (起動時に始める / 複数プロファイル同時監視)
├── BpWindowSettingsSection — BP 窓 (BP フェーズ中のみ表示 / 登録を聞かないアカウント)
├── TelemetryUploadSection — エラーレポート・利用状況の送信
└── DeveloperModeSection — 開発者モード (開発者向けの表示を出す)責務: 「どう動くか」の方針だけを置く。監視の開始 / 停止、今すぐログイン、手動取得のような その場の操作 はライブ監視・データ管理など各画面に置く。
OBS 連携タブ (ObsIntegrationTab)
OBS 連携タブ (設定モード → OBS 連携)
├── OBSIntegrationSection — OBS 連携（ブラウザソース）(配信サーバ ON/OFF / URL + コピー / 起動時にオーバーレイ窓を開く / ポート)
├── ReplayRecordingSection — 自動録画（OBS）(接続先・パスワード・接続テスト・リプレイ/試合それぞれの ON/OFF・最近の自動録画)
└── OBSSettingsGuideCard — OBS Studio 設定ガイド (1920 × 1080 / 30 FPS)責務: OBS とのつなぎだけを置く。冒頭の説明に「OBS を使わない場合は何もしなくて構いません」と書き、未接続を警告にしない (オレンジの「接続未確認」チップや「まだ OBS との接続を確認できていません」の案内はなくした。接続テストに成功したときだけ緑の「接続確認済み」を出す)。リプレイ・試合の録画で OBS につながらなかった回は、記録サービスが通知を出さず「最近の自動録画」に「OBS につながっていなかったため録画しませんでした」(skipped) と残す。つながったあとの録画開始・停止の失敗は通知する。
データ管理タブ (DataManagementTab)
データ管理タブ (設定モード → データ管理)
├── ProfileManager — アカウントを 1 つ選ぶ (下のセクションが使う)
├── BulkFetchSection — 戦績の取り直し (「<名前>の全試合を取得」/ 全シーズン全件取得 (末尾まで＋マージ))
├── RecorderRunActionsSection — 記録サービスで取得 (Recorder 接続中だけ。今すぐ fetchSeasonOnly / 全件同期 / 全シーズン全件取得 / ブラウザ自動化を再起動 / 今すぐログイン)
├── ログの取り込み — 「ログ取り込みを開く」ボタン
├── MatchCleanupSection — 試合データの整理 (🔗 log × API 整合性 / 「<名前>が入っていない試合を削除」)
└── DbRepairSection — データベースの修復 (DB が使えないときだけ「🔄 DBを初期化する」「🗑️ 削除して再作成」)責務: ふだんは自動で記録・取得されるデータを、困ったときに取り直す・整える・直す操作だけを置く。DB閲覧は見ることに専念し、DB が使えないときは警告と「データ管理へ」ボタンだけを出す。
デバッグ・性能タブ (DebugTab)
デバッグ・性能タブ
├── BuildInfoCard ← buildId / gitSha / branch / builtAt / trigger / dirty
├── TelemetryCard ← 過去 24h サマリ / 直近エラー / login-check 集計 / dir open
│ "詳細を別ウィンドウで開く" → TelemetryDetailView (telemetry.html)
├── StateSnapshotCard ← store の中身・各機能の ON/OFF
├── FpsCard ← renderer FPS
├── ProcessMetricsCard ← プロセス別 CPU/Mem
├── BrowserAutomationSettingsCard ← BA 関連の内部設定 (読み取り中心)
├── BroadcastSettingsCard ← 配信系の内部設定 (読み取り中心)
├── BPOpponentWindowDebugPanel ← 「BPウィンドウの表示確認」(強制表示 / 非表示。非透過+フレーム・内部状態・状態再取得は開発者モードのみ)
└── API テスター / API レスポンス ← 開発者モードのみ開発者モード (useDeveloperMode)
設定モード → アプリ設定の一番下の「開発者向けの表示を出す」。値は端末 (ウィンドウ) ごとの localStorage developerMode に持ち、未設定のときは開発ビルドだけ ON、本番ビルドは OFF。 OFF のときに隠すもの:
- ライブ監視: ログ監視パネルの「デバッグ・シミュレーション」、戦績取得の「詳細設定」(URL フィルタ / ヘッドレス)
- 設定モードのサイドバーの「ブラウザ自動化」(タブごと)
- デバッグ・性能: API テスター / API レスポンス
- BP ウィンドウ: 「非透過 + フレームあり」、内部状態の文字、「状態再取得」
- プレイヤー分析 › シーズン解析: 「seasonSummary: n件」「season_show: n件」と GradeDanId の行
- 試合詳細: タイトル下の試合 ID / BattleId、「ログファイル」の欄
- ログ取り込み: ログシミュレータ (開発用)
新しく開発・調査用の表示を足すときは、新しいタブを作らずこのフックで出し分ける。
ヘッダーとモード切替
- ヘッダー: 「OBS 用 URL をコピー」「オーバーレイを編集」は配信モードのときだけ (編集窓を開いている間は「編集を終了」を出す)、「ガイド」。配信サーバが OFF で「OBS 用 URL をコピー」が押せないときのツールチップは「設定 › OBS 連携 でブラウザソース配信を ON にすると使えます」。編集窓のサイズボタンは「編集窓を縮小 / 編集窓を元に戻す」
- モード切替 (
AppModeSwitch): 「配信モード / 解析モード / 設定」の 3 ボタン。以前の右側の ⋮「その他」メニューはなくした - モードとサイドバーのタブは
src/components/tabs/tabModes.tsのMODE_TAB_INDICESで決まる。AppModeは'broadcast' | 'analysis' | 'settings'の 3 つで、settingsは[13, 15, 14, 5, 4, 6, 7, 8](アプリ設定 / OBS 連携 / データ管理 / ログ取り込み / ブラウザ自動化 / 使い方 / 更新履歴 / デバッグ・性能) の順。4 ブラウザ自動化はDEVELOPER_ONLY_TAB_INDICESに入っていて、開発者モードのときだけ出す (visibleTabsOfMode) - どのモードにも入っていない index は
indexToModeでsettings扱いになる。新しいタブを足すときは、どのモードに入れるかをMODE_TAB_INDICESに書く - 設定モードのときは、サイドバーの下 (「記録できています」の状態ボタンの上) に「更新を確認」「更新のログを開く」「ほしいものリスト」のボタンを出す
- 起動時に復元するのは配信 / 解析だけ (
ContentMode)。設定モードのまま閉じても、次は前回の配信 / 解析で開く。設定モード中に「配信者ではない」を ON にしても設定画面のまま (配信モードにいたときだけ解析モードへ移す) - 戦績サイトのログインが必要なときの案内 (
LoginRequiredDialog) の「戦績取得の設定を開く」とガイドの「戦績取得の設定へ」は、アプリ設定 › 戦績取得を開く
関連ドキュメント
- src-architecture.md — フォルダ構造全体
- sync-and-state.md — Zustand store / Sync Adapter の仕様
- telemetry-viewing.md — ローカル telemetry の確認 3 手段 (アプリ内 / ファイル直接 / Chrome devtools)
- spec:
debug-tab(内部 spec) — デバッグタブの計測 ON/OFF 規約 - spec:
local-telemetry— ローカル専用 JSONL telemetry の要件・設計
Last verified: 2026-06-01 / commit 12bb761f