---
title: コメントを自動生成してくれるコメントノードを開発した話（第4回UnrealEngine九州LT会 in バーチャル長崎）
tags: 
author: [ツバサムス](https://convert.docswell.com/user/tsubasamusu)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YE9K8D5XE3.jpg?width=480
description: ・イベントページ：https://ue-9shu.connpass.com/event/340751 ・講演動画：https://www.youtube.com/live/3m3_8pX71MM
published: March 02, 25
canonical: https://convert.docswell.com/s/tsubasamusu/KMX9EJ-auto-comment-generator
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YE9K8D5XE3.jpg)

コメントを自動生成してくれる
コメントノードを開発した話
ツバサムス
@tsubasamusu


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GE8R83Y9JD.jpg)

自己紹介
高校卒業後、富山の企業で UE5 を用いて
iOS と Android 用のアプリを開発
昨年末に退職し、現在は一時的にフリーラ
ンスで Unity や UE のお仕事をしていま
す！
「ツバサムスBlog」という技術ブログをや
っていて、最近は主に Unreal C++ につい
て書いています！
白くまバーが好き！（九州との繋がり）
ツバサムスBlog


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LELKRV4MJR.jpg)

コメントノードを拡張した経緯
自分はブループリントで処理を作成する際にそ
こそこコメントを書く方で、コメントを書くの
も楽しいけど、やっぱり少し大変…
コメントを自動で生成してくれるプラグイン
（Auto Comment Generator）を作ろう！


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4JM2RGK6JW.jpg)

Auto Comment Generator
右上の再生ボタンを押すとコメントを生成してくれる！


# Page. 5

![Page Image](https://bcdn.docswell.com/page/PJRMRZXNE9.jpg)

機能紹介① ~ボタンの見た目の調整~
Editor Preferences に「Auto Comment Generator」というカテゴリー
が出現し、そこでボタンの位置や色、サイズ等を設定できる！


# Page. 6

![Page Image](https://bcdn.docswell.com/page/PEXVR9687X.jpg)

機能紹介② ~コメントの言語の変更~
生成するコメントの言語を簡単に変更できる！
このプロパティは Editor Language のプロパティのソースコードを読
んで真似しながら作成！


# Page. 7

![Page Image](https://bcdn.docswell.com/page/3EKQRP1LED.jpg)

機能紹介③ ~言語モデルの変更と確認~


# Page. 8

![Page Image](https://bcdn.docswell.com/page/L73P8XQ6E5.jpg)

機能紹介④ ~コメント生成時の条件の指定~
コメント生成時の条件も設定できる！
この例では「answer in an angry manner（怒っている感じで答えて）
」
と指定している。


# Page. 9

![Page Image](https://bcdn.docswell.com/page/87DLM29MEG.jpg)

処理の流れ① ~ノードのクラスの作成~
SGraphNodeComment クラスを継承したオリジナルのクラスを作成し
ておく。
（ちなみにこのプラグインを開発する際に参考にさせていただいた
「Auto Size Comments」のように SGraphNode クラスを親クラスに
してコメントノードの見た目を1から作っても良い！）


# Page. 10

![Page Image](https://bcdn.docswell.com/page/VJP2R1ZQJ8.jpg)

処理の流れ② ~NodeFactory の登録~
FGraphPanelNodeFactory 構造体を継承したクラスを作成して
CreateNode() を上書きし、FCoreDelegates::OnPostEngineInit のタイ
ミングで FEdGraphUtilities::RegisterVisualNodeFactory() を使用して
オリジナルの NodeFactory を登録する。


# Page. 11

![Page Image](https://bcdn.docswell.com/page/2EVDRYWPEQ.jpg)

処理の流れ③ ~エディタの設定の登録~
ISettingsModule::RegisterSettings() でオリジナルの設定を登録する。
IDetailCustomization インターフェースを実装したオリジナルのクラ
ス（設定項目の見た目を編集する用のクラス）を
FPropertyEditorModule::RegisterCustomClassLayout() で登録する。


# Page. 12

![Page Image](https://bcdn.docswell.com/page/57GYM9DQ7L.jpg)

処理の流れ④ ~コメント生成ボタンの作成~
基本的にゲーム画面はウィ
ジェットブループリントで
作成するが、エディタ画面
の場合は Slate UI
Framework というものを
使用して作成する。
今回はコメント生成ボタン
をコメントノードの右上に
追加する。


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4EQMRW1WJP.jpg)

処理の流れ⑤ ~処理内容を JSON で表す~
コメント生成ボタンが押されたら、人間が見
ても分かりやすいようにコメントノード内の
ノードの情報を JSON で表す。
コメントノード内のノードは
UEdGraphNode_Comment::GetNodesUnder
Comment() で簡単に取得できる！
右の画像は BeginPlay ノード単体を JSON で
表した様子。


# Page. 14

![Page Image](https://bcdn.docswell.com/page/KJ4V8KR1E1.jpg)

処理の流れ⑥ ~コンテンツの作成~
HTTP リクエストに設定するコ
ンテンツ（JSON 形式の文字
列）を作成する。
ここで GPT のモデルやプロン
プトを設定する。
コメント生成時の条件や言語
もここで設定。


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LE132XQ5JG.jpg)

処理の流れ⑦ ~HTTP リクエストの送信~
FHttpModule::CreateRequest() を使用し
て IHttpRequest インターフェースの共有
参照を作成する。
（ちなみにスマートポインタについては
「Unreal C++ のスマートポインタについ
て」が参考になります）
OpenAI の API ドキュメントを見ながら
URL と Verb、Header、Content を設定
して IHttpRequest::ProcessRequest() で
送信する。


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GEWPRNMWJ2.jpg)

処理の流れ⑧ ~コメントの変更~
HTTP レスポンスが返って来たらコメントを変更して完成！
大まかな処理の流れはこのような感じですが、この間にテキストのア
ニメーションの制御やボタンの外観の変更などの処理も行っており、
これは GitHub からソースコードを全て見れます！


# Page. 17

![Page Image](https://bcdn.docswell.com/page/47ZKR3Q273.jpg)

余談① ~テクスチャの取得~
SImage::Image() 等でテクスチャを設定する際に
ISlateStyle::GetBrush() の引数を変更するだけで、普段見かけるテクス
チャを利用する事も出来る！
例えば「Persona.AssetClass.SkeletalMesh」と指定
すると、SkeletalMesh のアイコンのテクスチャを取
得できる！


# Page. 18

![Page Image](https://bcdn.docswell.com/page/YJ6QRXN6JV.jpg)

余談② ~Widget Reflector~
「エディタのこの部分
はどんな作りになって
るんだろう？」と思っ
た時は Widget
Reflector がオスス
メ！
ソースコードのファイ
ル名と行がすぐに分か
る！


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GJ5R8X5574.jpg)

最後に
UE は簡単にエディタを拡張できる作りにな
っているので、エディタ拡張で遊んでみて
はいかがでしょうか？
普段、プラグイン開発などで学んだ事を
「ツバサムスBlog」の「Unreal C++ の学習
メモ」に追加しているので良ければご覧く
ださい！
X（Twitter）でも日々発信しているのでフ
ォローしていただけると嬉しいです！
@tsubasamusu


