こんにちは、「CYBIRD Advent Calendar 2025」2日目を担当する@cy_ssssです。
1日目は@cy_hinano_imaiさんの「GASのススメ！（プロンプト例入り）」でした。
2年連続の初日投稿、昨年と同じ題材でアップデートされた内容……内容もさることながらその姿勢を見習いたいところです。
前段
なぜ見習いたいと言ったか。
それは私がアドベントカレンダーに参加しようにも、「書けるネタが全然思いつかない」 状態だったからです。
そこで今回は開き直って、ChatGPT に「今からでも書ける記事って何かある？」と相談してみました。
すると、
- Unity 2021 でも 6000 でも動く（普段の作業で使っているバージョン）
- 追加インストール不要
- 今日触って明日投稿できる
- 記事映えする
- 読まれやすい
という条件をすべて満たす案として、「UI Toolkit で最小のエディタ拡張を作る」 という提案が返ってきました。
これまで UI Toolkit をほとんど触っていなかったこともあり、触れてみるにはちょうど良い機会だと感じたため、今回 ChatGPT の案を採用して実際に作ってみた、というのがこの記事の背景です。
なんと恐ろしいことに、
- 記事本文（全章の完成版）
- スクショ撮影ガイド（どの画面を撮ればいいか）
- 投稿前チェックリスト
まで用意してくれたので、その指示に従って画像を追加をし、レイアウトを調整して用意した記事本文を以下に記載します。
スクリーンショットについて特記されていないものは全てUnity2021のものです。
**** ChatGPT作記事本文 ここから↓ ****
はじめに
Unity では長らく IMGUI を使ったエディタ拡張が主流でしたが、
2021 LTS 以降は UI Toolkit が強く推され、
2023〜6000 では Unity Editor の大半が UI Toolkit 化されつつあります。
とはいえ、
「UI Toolkit をまだ触ったことがない」
「UXML や USS が何なのかよくわからない」
という方はかなり多いのではないでしょうか。
私自身も最近まで IMGUI でのツール作りが中心で、
UI Toolkit を理解しないまま放置していました。
そこで今回、
- Unity 2021.3.56f2
- Unity 6000.0.58f2
という二つの環境で、
UI Toolkit を使った “最小のエディタ拡張” を実際に作ってみました。
この記事では、
- EditorWindow + CreateGUI の最小サンプル
- ボタンを押すと Cube を生成するエディタツール
- UXML + USS を使ったレイアウト分離の基本
- 2021 と 6000 での挙動の違い
を簡単にまとめます。
UI Toolkit の基礎：EditorWindow + CreateGUI
UI Toolkit でのエディタ拡張は、
EditorWindow の CreateGUI() を override するところから始まります。
従来の IMGUI (OnGUI()) との違いは以下の通りです。
| IMGUI | UI Toolkit |
|---|---|
| Immediate モード（毎フレーム描画） | Retained モード（UIツリーを保持） |
| C# コードで直接 GUI を組み立てる | UXML（HTML風）や USS（CSS風）が使える |
| レイアウトが手作業になりがち | スタイル適用・再利用が簡単 |
まずは最小の EditorWindow を作ってみましょう。
using UnityEditor;
using UnityEngine.UIElements;
public class SampleWindow : EditorWindow
{
[MenuItem("Window/SampleWindow")]
public static void ShowWindow()
{
GetWindow<SampleWindow>("Sample");
}
public void CreateGUI()
{
var label = new Label("Hello UI Toolkit!");
rootVisualElement.Add(label);
}
}
Window > SampleWindowでウィンドウを開き、
画面に「Hello UI Toolkit!」 と表示されれば成功です。
シンプルなUI：ボタンを追加してみる
次に、ボタンを 1 つ追加してみます。
public void CreateGUI()
{
var button = new Button(() => Debug.Log("Button Clicked!"))
{
text = "Click Me!"
};
rootVisualElement.Add(button);
}
UI Toolkit のボタンは
イベントをラムダ式で登録できるので扱いやすいです。
Cube を生成するエディタ拡張を作る
ここからは少しだけ実用寄りの例として、
「ボタンを押したら Cube を Hierarchy に生成する」
というシンプルな EditorWindow を作ります。
public class SampleWindow : EditorWindow
{
[MenuItem("Window/SampleWindow")]
public static void ShowWindow()
{
GetWindow<SampleWindow>("Sample Tool");
}
public void CreateGUI()
{
var button = new Button(() =>
{
var cube = UnityEngine.GameObject.CreatePrimitive(UnityEngine.PrimitiveType.Cube);
cube.name = "CreatedFromUIToolkit";
UnityEngine.Debug.Log("Cube created!");
});
button.text = "Create Cube";
rootVisualElement.Add(button);
}
}
ウィンドウを開いてボタンを押すと、
Hierarchy に Cube が生成され、Console にログが表示されます。
このくらいのシンプルな動きでも、
エディタ作業がちょっと便利になります。
UXML + USS でレイアウトを外部化（最小構成）
ここまでは C# のみで UI を構築してきましたが、
UI Toolkit の本領は HTML/CSS に近い構造（UXML + USS）にあります。
今回は最小構成として、
- ウィンドウ上に Label と Button を配置
- USS でボタンに余白を付ける
ところまで実装してみます。
1. UXML を作成
プロジェクトビューで右クリック →
Create > UI Toolkit > Editor Window を選ぶと、
.uxml.uss.cs
の3ファイルが生成されます。
まずは .uxml を開き、以下のように編集します。
<ui:UXML xmlns:ui="UnityEngine.UIElements">
<ui:VisualElement>
<Style src="sample.uss" />
<ui:Label text="UIToolkit UXML Sample" />
<ui:Button text="Create Cube" name="createButton" />
</ui:VisualElement>
</ui:UXML>
2. USS を用意
style.uss に以下を書きます。
Button {
margin-top: 8px;
}
3. C# 側で読み込む
using UnityEditor;
using UnityEngine.UIElements;
public class UxmlSampleWindow : EditorWindow
{
[MenuItem("Window/UXML Sample")]
public static void ShowWindow()
{
GetWindow<UxmlSampleWindow>("UXML Sample");
}
public void CreateGUI()
{
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>(
"Assets/Editor/UXMLSample/sample.uxml");
visualTree.CloneTree(rootVisualElement);
var btn = rootVisualElement.Q<Button>("createButton");
btn.clicked += () =>
{
UnityEngine.GameObject.CreatePrimitive(UnityEngine.PrimitiveType.Cube);
UnityEngine.Debug.Log("Cube created from UXML!");
};
}
}
>UIBuilderの実際の見た目↑
C# 側では
UI の見た目は UXML/USS に任せ、処理だけを登録する
という形にできます。
UI の再利用性が IMGUI より圧倒的に良いのがメリットです。
加筆箇所
また、UI Builderでボタンのサイズやテキストカラーなど見た目の変更を行うと、ウィンドウも変化するのが確認できます。
>Unity6000での見た目↑
Unity 2021 と Unity 6000 での挙動の違い
今回の最小サンプルでは、
2021 でも 6000 でもほぼ同じ動作でした。
■ 2021で気になった点
- UI Builder のバージョンが古め（操作に少し癖）
- ボタンのデフォルトスタイルが地味
■ 6000で気になった点
- UI Builder がより安定（レイアウトしやすい）
- 生成されるテンプレートの内容が2021より整備されている
- 実行速度が軽い印象
簡単なツールを作るだけなら
2021 でも実用十分です。
触ってみて感じたメリット・デメリット
✔ 良かった点
- HTML/CSS に近い感覚なので視覚的に組みやすい
- 再利用性が高く、EditorWindow の構造化がしやすい
- ボタン等が IMGUI よりスッキリして読みやすい
✔ 気になった点
- UXML/USS の用語に最初とっつきにくさがある
- IMGUI に比べると“コードだけで完結しない”場面もある
- UI Builder を併用しないとつらいこともある
とはいえ、
2025 以降は UI Toolkit が主流になるのは確実なので、
最小サンプルを作って触っておく価値は大きいです。
まとめ
今回の記事では、
Unity 2021 と 6000 の両方で UI Toolkit を使って
- CreateGUI の最小サンプル
- ボタンで Cube を生成する EditorWindow
- UXML/USS による UI の分離
- 各バージョンの軽い比較
を行いました。
UI Toolkit は少し敷居が高い印象がありましたが、
触ってみると HTML/CSS のような感覚で組めるため、
手軽にエディタ拡張を作れるのが魅力です。
この記事が UI Toolkit に触れるきっかけになれば幸いです。
**** ChatGPT作記事本文 ここまで↑ ****
前述したスクショ撮影ガイドと投稿前チェックリストについても以下に記載します。
スクショ撮影ガイド
| No | 内容 | どこに使う？ |
|---|---|---|
| ① | SampleWindow が表示された Unity エディタ | CreateGUI() の紹介部分 |
| ② | 「Create Cube」ボタンを押した瞬間（Hierarchy に Cube が生成） | Cube生成デモ |
| ③ | UXML/USS のファイルが並んでいる Project ウィンドウ | UXML章 |
| ④ | UI Builder の画面（ボタンを置いた状態） | UXML章 |
| ⑤ | Unity 6000 側で同じウィンドウを開いたスクショ | 2021/6000比較用 |
投稿前チェックリスト
- コードはコピペして Unity 上で動作確認済み
- スクショが揃っている
- Unity のバージョン番号を記事の冒頭に追記
- UXML のパスは記事に書いたものと自分の環境で一致している
- タグに「Unity」「UI Toolkit」「Editor拡張」等を付与
おわりに
今回の記事は、ネタ作りから ChatGPT に丸投げしたところから始まりました。
実際に頼んでみると、
- 記事として成立しやすいテーマを、“普段使っている技術”, “かけられる時間”などをヒアリングした上で複数提示してくれる（その中の一案を採用）
- 普段使っているツールやバージョン（今回はUnity 2021 と 6000）に合わせて案を最適化してくれる
- コード例や作業手順を用意してくれる
- 記事本文（草案ではなく本文！）や投稿時のチェックリストまで生成してくれる
と、“自分一人では絶対にこのスピードで書き上がらない”ほどのスムーズさで記事の作成が進みました。
ちょこちょこUnityEngineが定義されてたりされてなかったりなコードが混在していましたが、おおむねコード例通りで問題なく動作しました。
唯一2021版に対してボタンのデフォルトスタイルが地味と書いていた部分については、少なくとも手元の環境では全く同じだったので疑問が残るところです。
ChatGPT に言われるまま手を動かした部分は多いものの、実際に検証してスクショを撮り、前後や一部加筆箇所を自身の言葉で補うことにより、「AI と共同執筆した記事」 という形になったのではないでしょうか。AI部分が多すぎ？それはそう。
記事の内容についても最初に知っておくと助かる部分を先回りして整理してくれ、手順なども分かりやすかったので、記事執筆のネタ作りに留まらず何か新しい技術に触れる時のガイドとして今後も活用していきたいです。