Godot入門：SplitContainerの使い方と活用法

はじめに
SplitContainerとは？
このノードを使うべき場面
主なプロパティと機能
1. 基本的な使い方（HSplitContainer の例）
2. dragged シグナルで比率を記録する例
もっと使いこなす：カスタマイズできるパラメータ
1. collapsed でサイドパネルをトグルする例
2. minimum_size で縮めすぎを防ぐ例
まとめ
シリーズ：Godot 4 ノード解説

はじめに

ファイルブラウザやコードエディタのような「左にリスト、右に詳細」という2ペイン構成のUIを作りたいとき、SplitContainer が活躍します。ドラッグで仕切りを動かせるリサイザブルなレイアウトを、数ステップで実現できるノードです。

この記事では、SplitContainer の役割・基本的な使い方・よく触るプロパティを紹介します。

SplitContainerとは？

SplitContainer は 2つの子ノードを並べて配置し、その境界にドラッグ可能な仕切りを置くUIコンテナです。ユーザーが仕切りをドラッグすることで、2つのエリアのサイズ比率を自由に変えられます。

スライドドアの引き手をイメージしてください。左右どちらかにずらすと、隣り合う2部屋の広さが変わる——SplitContainer はまさにその仕組みです。

SplitContainer は Container → Control → CanvasItem → Node という継承ツリーを持ちます。直接の子クラスとして HSplitContainer（水平分割）と VSplitContainer（垂直分割）があり、実際の開発ではこれらを使うことがほとんどです。SplitContainer 自体は両者の共通機能を持つ基底クラスです。

このノードを使うべき場面

2ペインのファイルブラウザ：左にフォルダツリー、右にファイル一覧を並べてサイズを自由に調整させたいとき
コードエディタ風UI：左にソースコード、右にプレビューや出力ログを表示するとき
インスペクタ・プロパティパネル：左にオブジェクト一覧、右にその詳細プロパティを表示するとき
地図+詳細情報の画面：左にマップビュー、右にアイテム説明や統計情報を並べるとき
リサイザブルなデバッグパネル：開発ツールとして実行ログや変数監視を横に並べたいとき

別のノードが適切な場面：

比率を固定したい（ユーザーにリサイズさせない）→ HBoxContainer / VBoxContainer + size_flags で対応
タブで切り替えて1画面に1つずつ表示したい → TabContainer

主なプロパティと機能

プロパティ / メソッド	役割	使用例
`split_offset`	仕切りの位置をピクセル単位でオフセット指定。0が中央	起動時に特定の比率に設定する
`dragger_visibility`	仕切りの表示モード（VISIBLE / HIDDEN / HIDDEN_COLLAPSED）	ユーザーにリサイズさせたくない場合は HIDDEN_COLLAPSED
`collapsed`	2番目のペインを折りたたんで非表示にする	サイドパネルの開閉トグルに使う
`get_minimum_size()`	コンテナ全体の最小サイズを返す	レイアウト計算の補助
シグナル `dragged(offset)`	仕切りがドラッグされたときに発火。引数は現在のオフセット値	分割比率の変化を他の処理に反映させる

基本的な使い方（HSplitContainer の例）

extends Control

@onready var split = $HSplitContainer

func _ready():
    # 起動時に左ペインを200pxに設定
    split.split_offset = -split.size.x / 2 + 200

dragged シグナルで比率を記録する例

func _on_h_split_container_dragged(offset: int):
    # ドラッグ後のオフセットを保存しておく
    GameSettings.split_offset = offset
    print("仕切り位置: ", offset)

もっと使いこなす：カスタマイズできるパラメータ

まずは基本を動かしてみてから、余裕が出たら試してみてください。

パラメータ	変えると何が起きるか	設定例
`split_offset`	仕切りの初期位置をピクセルで調整。負値は中央より左（上）、正値は右（下）に寄る	`split_offset = -100` → 左ペインが広め
`dragger_visibility`	VISIBLE：常に表示 / HIDDEN：非表示でもドラッグ可 / HIDDEN_COLLAPSED：完全に固定	`dragger_visibility = SplitContainer.DRAGGER_HIDDEN_COLLAPSED`
`collapsed`	true にすると2番目の子が折りたたまれ、仕切りが端に寄る	ボタンで `split.collapsed = !split.collapsed`
子ノードの `custom_minimum_size`	各ペインが縮められる最小幅を設定。これ以上は仕切りをドラッグできなくなる	LeftPanel の custom_minimum_size.x = 150
`theme` の `separation`	仕切り領域の幅（px）を変更。細くすると洗練された見た目に、太くするとタッチ操作向きに	テーマエディタで separation = 8 など

collapsed でサイドパネルをトグルする例

@onready var split = $HSplitContainer
@onready var toggle_btn = $ToggleButton

func _on_toggle_button_pressed():
    split.collapsed = !split.collapsed
    toggle_btn.text = "◀" if split.collapsed else "▶"

minimum_size で縮めすぎを防ぐ例

func _ready():
    # 左パネルは最低150px確保
    $HSplitContainer/LeftPanel.custom_minimum_size.x = 150
    # 右パネルも最低200px確保
    $HSplitContainer/RightPanel.custom_minimum_size.x = 200