スタジオでは、カスタムウィジェットを作成し、ツールや拡張機能として使用する力を手に入れます。これらのウィジェットはスタジオ内のカスタムウィンドウ/パネルのように振る舞い、インターフェース内にドッキングするか、別のウィンドウとして浮かせることができます。
ウィジェットUIの作成
すべてのスタジオウィジェットは DockWidgetPluginGui オブジェクトとして始まり、テキストラベルやボタンなどの GuiObjects で埋めることができます。空のウィジェットGUIを作成するには、CreateDockWidgetPluginGui() 関数を呼び出し、IDと DockWidgetPluginGuiInfo オブジェクトを渡します。
DockWidgetPluginGuiInfo.new() コンストラクタは、そのパラメータを特定の順序で期待しています。次の通りです:
| # | プロパティ | 型 | 説明 |
|---|---|---|---|
| 1 | Enum.InitialDockState | Enum | Enum.InitialDockState 列挙の1つ。 |
| 2 | InitialEnabled | Boolean | ウィジェットGUIの初期の有効(表示)状態。 |
| 3 | InitialEnabledShouldOverrideRestore | Boolean | true の場合、InitialEnabled の値が以前に保存された有効状態を上書きします。 |
| 4 | FloatingXSize | Integer | InitialDockState が Enum.InitialDockState.Float に設定されているときのGUIの初期幅。 |
| 5 | FloatingYSize | Integer | InitialDockState が Enum.InitialDockState.Float に設定されているときのGUIの初期高さ。 |
| 6 | MinWidth | Integer | GUIの最小幅(プラットフォームに特有の変更があります)。 |
| 7 | MinHeight | Integer | GUIの最小高さ(プラットフォームに特有の変更があります)。 |
-- 新しい "DockWidgetPluginGuiInfo" オブジェクトを作成local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, -- ウィジェットは浮かぶパネルに初期化されますtrue, -- ウィジェットは初期的に有効になりますfalse, -- 前の有効状態を上書きしません200, -- 浮かぶウィンドウのデフォルト幅300, -- 浮かぶウィンドウのデフォルト高さ150, -- 浮かぶウィンドウの最小幅150 -- 浮かぶウィンドウの最小高さ)-- 新しいウィジェットGUIを作成local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)testWidget.Title = "テストウィジェット" -- オプションのウィジェットタイトル
ウィジェットUIのカスタマイズ
ウィジェットを作成したら、GuiObjects である情報を提供する TextLabels や対話式の ImageButtons でユーザーインターフェイスをカスタマイズできます。例えば、次のコードは基本的な TextButton をGUIウィンドウに追加します:
-- 新しいウィジェットGUIを作成local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)testWidget.Title = "テストウィジェット" -- オプションのウィジェットタイトルlocal testButton = Instance.new("TextButton")testButton.BorderSizePixel = 0testButton.TextSize = 20testButton.TextColor3 = Color3.new(1,0.2,0.4)testButton.AnchorPoint = Vector2.new(0.5,0.5)testButton.Size = UDim2.new(1,0,1,0)testButton.Position = UDim2.new(0.5,0,0.5,0)testButton.SizeConstraint = Enum.SizeConstraint.RelativeYYtestButton.Text = "クリックしてください"testButton.Parent = testWidget
スタジオのカラーテーマを変更
効果的なスタジオウィジェットは、理想的にはスタジオのテーマ設定に一致し、テーマが変更されたときに動的に調整されます。たとえば、開発者がダークテーマを使用している場合、ウィジェットの背景色、画像、およびテキストラベルは、スタジオのネイティブテーマ色の横で美しく見えるべきです。
次のコード追加は、最初に GUI オブジェクトのテーブルと共に呼び出される syncGuiColors() 関数を使用します。関数内では、ネストされた setColors() 関数がオブジェクトをループし、GetColor()と Enum.StudioStyleGuideColor 列挙を使用して特定の側面を同期します。この setColors() 関数は、スタジオテーマを同期するために即座に実行され、将来のテーマ変更を検出するために ThemeChanged イベントに接続されます。
testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in objects do
-- 背景色を同期
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- テキスト色を同期
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- 'setColors()' 関数を実行して初期的に色を同期
setColors()
-- 'ThemeChanged' イベントを 'setColors()' 関数に接続
settings().Studio.ThemeChanged:Connect(setColors)
end
-- 提供されたオブジェクトの色を同期するために 'syncGuiColors()' 関数を実行
syncGuiColors({testButton})
マウスカーソルのカスタマイズ
ウィジェット要素との期待されるインタラクションを改善するために、MouseEnter や MouseLeave といったGUIイベントにシステム固有のマウスカーソルを設定できます。次のコードは、testButtonの MouseEnter および MouseLeave イベントに関数を接続し、マウスカーソルを変更する方法を示しています:
local function setCursor(cursorAsset)
plugin:GetMouse().Icon = cursorAsset
end
testButton.MouseEnter:Connect(function()
setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
setCursor("")
end)
以下の表を参照して、マウスカーソルのリストとその潜在的な使用例を確認してください:
| マウスカーソルアイコン | アセット | 使用例 |
|---|---|---|
| rbxasset://SystemCursors/Arrow | デフォルトのクリックおよび選択。 | |
| rbxasset://SystemCursors/PointingHand | アクティブなリンク/ボタンにホバーしている。 | |
| rbxasset://SystemCursors/OpenHand | ドラッグ可能なアイテムにホバーしている。 | |
| rbxasset://SystemCursors/ClosedHand | アイテムをドラッグ中。 | |
| rbxasset://SystemCursors/IBeam | テキストフィールドにホバーしている。 | |
| rbxasset://SystemCursors/SizeNS | 垂直リサイズハンドルにホバー。 | |
| rbxasset://SystemCursors/SizeEW | 水平リサイズハンドルにホバー。 | |
| rbxasset://SystemCursors/SizeNESW | コーナーリサイズハンドルにホバー。 | |
| rbxasset://SystemCursors/SizeNWSE | コーナーリサイズハンドルにホバー。 | |
| rbxasset://SystemCursors/SizeAll | 多方向リサイズハンドルにホバー。 | |
| rbxasset://SystemCursors/SplitNS | 垂直「スプリット」ハンドルにホバー。 | |
| rbxasset://SystemCursors/SplitEW | 水平「スプリット」ハンドルにホバー。 | |
| rbxasset://SystemCursors/Forbidden | ロックされている/禁止されているアイテムにホバー。 | |
| rbxasset://SystemCursors/Wait | アクションが進行中であることを示しています。 | |
| rbxasset://SystemCursors/Busy | システムがビジーであることを示しています。 | |
| rbxasset://SystemCursors/Cross | ポイント選択エリアにホバー。 |
ユーザー入力の収集
TextBox や TextButton のようなUI要素は、スタジオウィジェット内で通常通りに動作し、Roblox上で通常のようにインターフェースを構築できます。ただし、UserInputService はこれらのサービスがメインのエクスペリエンスウィンドウがフォーカスされていることを前提としているため、動作しません。
一般的な入力イベントの回避策として、透明な Frame を作成し、画面全体上にオーバーレイします。次のコードサンプルは、フレームを作成し、ユーザーがフレームをクリックしたときに GuiObject.InputBegan イベントがそのフレーム上のキーボード入力をキャプチャするものです:
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- フレームを非表示にする
frame.Size = UDim2.new(1, 0, 1, 0) -- 画面全体を覆う
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- ここで入力オブジェクトを処理します、例えばキー押下を検出する
end
frame.InputBegan:Connect(onInputBegan)
ドラッグアンドドロップインタラクション
ウィジェットのためのドラッグアンドドロップインタラクションを使用することは、データの流れを改善する簡単な方法です。このインタラクションを作成するには、ドラッグする要素を定義し、ドラッグを開始し、ドロップターゲットを作成し、ドロップアクションを処理する必要があります。
ドラッグソースを作成
ユーザーがUI要素、通常はウィジェット内の TextButton や ImageButton の上でマウスボタンを押したときに、Plugin:StartDrag() を呼び出すことでドラッグアクションを開始できます。次のコードサンプルは、テキストボタンが内側にあるウィンドウウィジェットを作成します。
-- まずウィジェットを作成local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)dragSourceWidget.Title = "ドラッグソース"-- ドラッグを開始するTextButtonを作成local dragButton = Instance.new("TextButton")dragButton.Size = UDim2.new(1, 0, 1, 0)dragButton.Text = "ドラッグしてください!"dragButton.Parent = dragSourceWidget
ドラッグを開始
ユーザーが TextButton をクリックしたときに、MouseButton1Down() イベントを介してドラッグを開始できます。このイベントはユーザーがマウスボタンを押したときにすぐに発火します。
接続された関数内で、ドラッグするデータを決定します。データのタイプは MimeType キーに、ドラッグの内容は Data キーに、送信者は Sender キーに記述する必要があります。詳細は Plugin:StartDrag() ページを参照してください。
local function onButton1Down()
local dragInfo = {
Data = "こんにちは、世界", -- ドラッグされるデータ
MimeType = "text/plain", -- データのMIMEタイプを記述
Sender = "SomeDragSource", -- データの発信元を記述
MouseIcon = "", -- カーソル用に使用する画像コンテンツ
DragIcon = "", -- ドラッグ中にカーソルの下に表示する画像コンテンツ
HotSpot = Vector2.zero -- DragIconの中心にカーソルを置く場所
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
ドロップターゲットを作成
ユーザーがドラッグ中にウィンドウ上でマウスを離したときに PluginGui.PluginDragDropped イベントが発火します。この現象が発生したときに、TextLabel のある2つ目のウィジェットといったドロップターゲットを定義する必要があります。
local dragTargetWidget = plugin:CreateDockWidgetPluginGui("Drop Target", widgetInfo)dragTargetWidget.Title = "ドロップターゲット"-- このTextLabelはドロップされたものを表示しますlocal textLabel = Instance.new("TextLabel")textLabel.Size = UDim2.new(1, 0, 1, 0)textLabel.Text = "ここにドロップ..."textLabel.Parent = dragTargetWidget
ドロップアクションを処理
ドロップターゲット作成後、ドロップターゲットウィジェットで PluginGui.PluginDragDropped イベントを接続します:
local function onDragDrop(dragData)
print("PluginDragDropped")
if dragData.MimeType == "text/plain" then
textLabel.Text = dragData.Data
else
textLabel.Text = dragData.MimeType
end
end
dragTargetWidget.PluginDragDropped:Connect(onDragDrop)
ドラッグが進行中の間、これらの3つのイベントは、ユーザーがウィジェット上でマウスを移動させると発火します:
- PluginDragEntered – ユーザーがウィンドウ上にマウスをホバーしたときに発火します
- PluginDragMoved – ユーザーがウィンドウ上でマウスを移動させるときに繰り返し発火します。これは「ここにドロップ!」メッセージを表示するために便利です。
- PluginDragLeft – ユーザーのカーソルがウィンドウを離れたときに発火します。これは「ここにドロップ!」メッセージを非表示にするために便利です。















