カスタムテキストチャットUI

この例では、TextChatServiceクラスを使用して独自のフロントエンドを設計する方法を示します。これは、CreateDefaultTextChannelsからデフォルトのテキストチャネルを再利用し、デフォルトのUIと比較して非常にシンプルです。

1. スタジオのプロパティウィンドウで、ChatWindowConfiguration.EnabledとChatInputBarConfiguration.Enabledプロパティをfalseに設定して、TextChatServiceに付属するデフォルトのUIを無効にします。

2. チャット入力バーの代替を作成します。これは、ユーザーがEnterを押したときにメッセージを送信するテキストボックスです。

   1. ScreenGuiを作成し、それをStarterGuiに親として設定します。

   2. TextBoxを作成し、それを新しいScreenGuiに親として設定し、再配置およびサイズ変更を行います。

   3. LocalScriptを作成し、それを新しいTextBoxに親として設定します。

   4. LocalScriptに以下のコードを追加します：

      Client

      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneralはデフォルトの公開チャネルです
      local RBXGeneral = TextChatService:FindFirstChild("TextChannels"):WaitForChild("RBXGeneral")
      
      local textBox = script.Parent
      textBox.FocusLost:Connect(function(enterPressed)
      	local text = textBox.Text
      	if enterPressed and #text > 0 then
      		local success, response = pcall(function()
      			return RBXGeneral:SendAsync(textBox.Text)
      		end)
      
      		if not success then
      			RBXGeneral:DisplaySystemMessage("メッセージの送信に失敗しました")
      		end
      
      		-- ユーザーはメッセージ送信後に入力ボックスがクリアされることを期待しています
      		textBox.Text = ""
      	end
      end)

3. チャットウィンドウの代替を作成します。これは、TextChatService.MessageReceivedから受信したメッセージを表示するScrollingFrameです。このステップでは、メッセージを自動的にレイアウトするためにUIListLayoutも作成します。

   1. もう一つ新しいScreenGuiを作成し、それをStarterGuiに親として設定します。

   2. ScrollingFrameを作成し、それをScreenGuiに親として設定し、再配置およびサイズ変更を行います。

   3. UIListLayoutを作成し、それをScrollingFrameに親として設定します。

   4. LocalScriptを作成し、それをScrollingFrameに親として設定します。

   5. LocalScriptに以下のコードを追加します：

      Client

      local TextChatService = game:GetService("TextChatService")
      
      -- 受信した各メッセージのために新しいテキストラベルを作成する関数
      local function addMessageGui(textChatMessage: TextChatMessage)
      	local isOutgoingMessage = textChatMessage.Status == Enum.TextChatMessageStatus.Sending
      
      	local parent = script.Parent
      
      	local originalLabel = parent:FindFirstChild(textChatMessage.MessageId)
      	if originalLabel then
      		originalLabel.Text = textChatMessage.Text
      		originalLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
      	else
      		local textLabel = Instance.new("TextLabel")
      		textLabel.BorderSizePixel = 0
      		textLabel.Font = Enum.Font.BuilderSans
      		textLabel.TextSize = 18
      		textLabel.TextXAlignment = Enum.TextXAlignment.Left
      		textLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
      		textLabel.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
      		textLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
      		textLabel.Name = textChatMessage.MessageId
      		textLabel.AutomaticSize = Enum.AutomaticSize.XY
      		textLabel.Text = textChatMessage.Text
      		textLabel.Parent = parent
      	end
      end
      
      -- 受信メッセージのリスニングを開始
      TextChatService.MessageReceived:Connect(addMessageGui)

      TextChatService.MessageReceivedイベントを使用する際は、メッセージがチャットウィンドウに既に存在するかどうかを確認することが重要です。このイベントは、送信時に一度、サーバーからメッセージを受信したときに一度呼び出されます。

4. チャット入力バーでメッセージを送信してゲームをテストします。メッセージがチャットウィンドウに表示されるのを確認できます。この例を拡張して、キーが押されたときにTextBoxにフォーカスを当てたり、チャットタグを追加したりする機能を追加できます。