コンフィグ画面にタブボタン（リレー式）を実装【Unity6】

いま現在、
コンフィグ画面「システム設定」「音量設定」「テキスト設定」はそれぞれの画面を呼び出す形になっています。
なので、開閉が面倒にならないように、タブボタン（リレー式）で切り替えられるようにします。

初期設計では「タブボタン付きコンフィグ画面」を新規に作り、各設定画面をそれに載せる形で作成していましたが、
タブボタンを各設定画面に配置するだけで良い、という結論に達し「コンフィグ画面」は破棄しました。

タブボタン（リレー式）の設計案
タブボタン（リレー式）の実装
Save / Load を分けて制御する
実機での挙動

タブボタン（リレー式）の設計案

■ 柔軟性を担保する「ConfigTabController」

各パネルに配置する「タブセット」の Prefab に、Sys_ConfigTabController.cs を持たせます。
これなら、ボタンが増えても Prefab を1つ更新するだけで全画面に反映されます。

■ 運用手順：将来の追加に備える

将来「キーコンフィグ」などの設定画面を追加したくなった時の手順

新しいパネル作成：UI_KeyConfigPanel を作成。
Prefab 更新：タブセットの Prefab を開き、ボタンを1つ追加。
リストに追加：ConfigTabController の tabMappings リストに、新しいボタンとパネルを1つ追加して保存。
完了：すべての設定画面のタブが自動的に更新され、キーコンフィグへ飛べるようになります。

タブボタン（リレー式）の実装

新規スクリプト「ConfigTabController」

「親パネルをなくし、各パネルを横並びでリレーさせる」という構成は、
UnityのUI管理において非常にデバッグがしやすく、かつ拡張性の高い設計で、
インスペクタからリスト形式でボタンと遷移先を増やせる形となっています。

タブボタンの「Prefab」を作る（1回だけ）

すべての画面で使い回す「ボタンのセット」を独立した部品にします。

作業用の空のGameObjectを作成：
ヒエラルキーのどこでも良いので、ConfigTabGroup という名前で作ります。
ボタンを配置：
その下に Button_System, Button_Audio, Button_Text を並べ、見た目を整えます（横並びなど）。
スクリプトを貼る：
ConfigTabGroup に、先ほどの Sys_ConfigTabController.cs をアタッチします。
Prefab化：
Projectウィンドウにドラッグ＆ドロップして Prefab にします。
リスト入力：
Prefabを開き、Tab Mappings にボタンと、各設定パネルのスクリプト（Instanceなど）を紐付けます。
注意：シーン上の実体ではなく、Project内のPrefabにアサインする場合、直接の参照が難しいことがあります。
その場合は、Start() 内で UI_SystemSettingsPanel.Instance を探すようにコードを少し改造するのが安全。

各設定画面に配置する（各Canvasごと）

作った Prefab を各 Canvas の中に配置します。

配置先: SystemSettings_Canvas > Panel の中。
配置先: AudioSettings_Canvas > Panel の中。
配置先: TextSettings_Canvas > Panel の中。

■ システム構成図

UI_Root (Canvas)
　│
　├── SystemSettings_Canvas（UI_PanelBase 継承）
　│　　　└ Panel（実体）
　│　　　　　└ ConfigTabGroup(Prefab) ← Sys_ConfigTabController.cs
　│
　├── AudioSettings_Canvas（UI_PanelBase 継承）
　│　　　└ Panel（実体）
　│　　　　　└ ConfigTabGroup(Prefab) ← Sys_ConfigTabController.cs
　│
　└── TextSettings_Canvas（UI_PanelBase 継承）
　　　　　└ Panel（実体）
　　　　　　　└ ConfigTabGroup(Prefab) ← Sys_ConfigTabController.cs

各画面の Panel の中に置くことで、
UI_PanelBase が Panel を ON にした瞬間、このタブボタンも一緒にパッと現れます。
UI_Root 直下に置くと、どの画面が開いているかに関係なくボタンだけが浮いてしまうので、
「各画面の中」に置くのが正解。

Save / Load を分けて制御する

セーブシステム画面は、1画面を使いまわしているので、リレー式ボタンも専用に対応しないといけません。
いろいろと遠回りしましたが、
セーブ画面・ロード画面と2つに分けてしまうのが一番シンプルな方法となりました。
厳密には、ヒエラルキー上で分けるのであって、画面スクリプト自体は使いまわす感じです。

■ 「Save用」と「Load用」でCanvasを物理的に2つ作ります。

既存のセーブロードCanvasをコピーして、2つにします。
- 名前を Save_Canvas と Load_Canvas に変更。
インスペクタの設定:
- Save_Canvas の UI_SaveLoadPanel → Mode を Save に。
- Load_Canvas の UI_SaveLoadPanel → Mode を Load に。
タブプレハブの配置:
- 各Canvasの直下（Panelの兄弟要素）に、共通のタブプレハブ（ConfigTabGroup）を配置します。
- 注意: Canvasの中にCanvasを入れない（Nested Canvasを避ける）ことで、
  CanvasScalerの警告と描画負荷を回避します。