セッションチャットUIの追加 - セッションチャット - (Unreal Engineモジュール)

Last updated on February 4, 2026

注釈：本資料はAI技術を用いて翻訳されています。

このチュートリアルの内容

このチュートリアルでは、セッションチャットの表示と送信に使用するウィジェットの準備方法を学びます。ウィジェットはリソースセクションで入手でき、以下が含まれます:

• SessionChatWidget_Starter: チャットメッセージの表示と送信に使用されるC++クラスです。

  • ヘッダーファイル: /Source/AccelByteWars/TutorialModules/Social/SessionChat/UI/SessionChatWidget_Starter.h
  • CPPファイル: /Source/AccelByteWars/TutorialModules/Social/SessionChat/UI/SessionChatWidget_Starter.cpp
  • Blueprintウィジェット: /Content/TutorialModules/Social/SessionChat/UI/W_SessionChat_Starter.uasset

• ChatWidget: SessionChatWidget_Starter内で使用され、すべてのチャットエントリを表示し、送信するメッセージのユーザー入力を受け取るC++クラスです。

  • ヘッダーファイル: /Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidget.h
  • CPPファイル: /Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidget.cpp
  • Blueprintウィジェット: /Content/TutorialModules/Social/ChatEssentials/UI/W_Chat.uasset

• ChatWidgetEntry: ChatWidget内で使用され、個々のチャットメッセージエントリを表示するC++クラスです。

  • ヘッダーファイル: /Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidgetEntry.h
  • CPPファイル: /Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidgetEntry.cpp
  • Blueprintウィジェット: /Content/TutorialModules/Social/ChatEssentials/UI/W_ChatEntry.uasset

これらのウィジェットの構成方法の詳細については、以下のセクションを参照してください。

セッションチャットウィジェット

このウィジェットは主にChatWidgetクラスの2つのインスタンスと、ゲームセッションチャットとパーティーチャットを切り替え、それに応じてチャットメッセージを表示するためのいくつかのヘルパー変数を含んでいます。

ウィジェットコンポーネントはヘッダーファイルで宣言されています:

protected:
// ...
    EAccelByteChatRoomType CurrentChatRoomType = EAccelByteChatRoomType::SESSION_V2;

    UPROPERTY()
    UChatWidget* W_ActiveChat = nullptr;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UWidgetSwitcher* Ws_ChatMessageType;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UCommonButtonBase* Btn_Back;

#pragma region Game Session Chat
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UWidget* W_GameSessionChatOuter;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UChatWidget* W_GameSessionChat;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UCommonButtonBase* Btn_SessionChat;
#pragma endregion

#pragma region Party Chat
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UWidget* W_PartyChatOuter;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UChatWidget* W_PartyChat;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UCommonButtonBase* Btn_PartyChat;
#pragma endregion

ゲームセッションチャットとパーティーチャット間を切り替えるには、SwitchChatMessageType()ヘルパー関数を使用できます。CurrentChatRoomTypeは、現在ゲームセッションチャットとパーティーチャットのどちらにいるかを保存するヘルパー変数です。現在のアクティブなチャットがゲームセッションチャットの場合、W_GameSessionChatが表示され、それ以外の場合はW_PartyChatが表示されてパーティーチャットが表示されます。アクティブなチャットウィジェットは、簡単にアクセスできるようにW_ActiveChatヘルパー変数に保存されます。

void USessionChatWidget_Starter::SwitchChatMessageType(const EAccelByteChatRoomType ChatRoomType)
{
    // Switch chat message active panel based on type.
    switch(ChatRoomType) 
    {
    case EAccelByteChatRoomType::SESSION_V2:
        Ws_ChatMessageType->SetActiveWidget(W_GameSessionChatOuter);
        W_ActiveChat = W_GameSessionChat;
        break;
    case EAccelByteChatRoomType::PARTY_V2:
        Ws_ChatMessageType->SetActiveWidget(W_PartyChatOuter);
        W_ActiveChat = W_PartyChat;
        break;
    }

    CurrentChatRoomType = ChatRoomType;
// ...
}

チャットウィジェット

このウィジェットには、事前定義された状態を持つカスタムWidget SwitcherであるAccelByteWarsWidgetSwitcherが含まれています。チャット入力用の編集可能なテキストボックス、チャットメッセージエントリを表示するリストビュー、メッセージを送信するボタンが含まれています。

ウィジェットコンポーネントはヘッダーファイルで宣言されています:

private:
// ...
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UAccelByteWarsWidgetSwitcher* Ws_ChatMessage;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UEditableText* Edt_ChatMessage;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UListView* Lv_ChatMessage;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UCommonButtonBase* Btn_Send;

このウィジェットには、他のウィジェットが表示内容を制御し、プレイヤーの入力を受け取ることができるいくつかの関数とデリゲートが含まれています。これらの関数とデリゲートはヘッダーファイルで宣言されています:

public:
// ...
    void AppendChatMessage(UChatData* ChatData) const;
// ...
    void ClearChatMessages() const;
// ...
    void ClearInput() const;
// ...
    void SetWidgetState(const EAccelByteWarsWidgetSwitcherState State, const FText& StateMessage = FText::GetEmpty()) const;
// ...
    int32 GetMaxChatHistory() const { return MaxChatHistory; }
// ...
    FChatOnSubmit OnSubmitDelegates;

• AppendChatMessage: チャットエントリを追加します。
• ClearChatMessages: 現在表示されているチャットエントリをクリアします。
• ClearInput: 入力編集可能テキストをクリアします。
• SetWidgetState: ウィジェットの状態をローディング、エラー、空、または空でないに設定し、チャットエントリと入力テキストの表示を決定します。
• GetMaxChatHistory: 事前定義されたMaxChatHistory値を取得します。
• OnSubmitDelegates: プレイヤーがメッセージを入力中にEnterキーを押すか、送信ボタンをクリックしたときに呼び出されるデリゲートです。

また、これらの変数にも注意してください:

protected:
    UPROPERTY(EditDefaultsOnly, BlueprintReadOnly)
    int32 MaxChatHistory = 10000;

    UPROPERTY(EditDefaultsOnly, BlueprintReadOnly)
    float SendChatCooldown = 1.0f;

    // Based on the default value of chat character limit on Admin Portal
    UPROPERTY(EditDefaultsOnly, BlueprintReadOnly)
    int32 MaxMessageLength = 500;

• MaxChatHistory: これは後でバックエンドから取得するチャット数を制限するために使用されます。
• SendChatCooldown: プレイヤーがチャットを送信した後、編集可能なテキストと送信ボタンが無効になる時間を制御し、ゲームクライアントからのメッセージスパムを防ぎます。
• MaxMessageLength: 送信できるメッセージの最大長を制御します。これはバックエンドでも設定でき、後で説明します。

チャットエントリウィジェット

このウィジェットは、チャット送信者の名前とメッセージを表示するテキストで構成されています。

上記のコンポーネントはヘッダーファイルで宣言されています:

protected:
// ...
    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UTextBlock* Tb_Sender;

    UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
    UTextBlock* Tb_Message;

UIの準備

このセクションでは、前述のウィジェットを準備する方法を学び、チュートリアルに従うことができます。

1. SessionChatWidget_Starterクラスのヘッダーファイルを開きます。次に、以下の関数を宣言します。

   protected:
   // ...
       void AppendChatMessage(const FChatMessage& Message);
   
       void SendChatMessage(const FText& MessageText);
   
       void GetLastChatMessages();
       
       void OnSendChatComplete(FString UserId, FString MsgBody, FString RoomId, bool bWasSuccessful);
       void OnChatRoomMessageReceived(const FUniqueNetId& UserId, const FChatRoomId& RoomId, const TSharedRef<FChatMessage>& Message);

2. SessionChatWidget_StarterクラスのCPPファイルを開き、AppendChatMessage()関数を定義して、表示するチャットメッセージを追加します。

   void USessionChatWidget_Starter::AppendChatMessage(const FChatMessage& Message)
   {
   // ...
       if (!ensure(GetOwningPlayer()))
       {
           UE_LOG_SESSIONCHAT(Warning, TEXT("Cannot append a chat message to display. PlayerController is not valid."));
           return;
       }
   
       const ULocalPlayer* LocalPlayer = GetOwningPlayer()->GetLocalPlayer();
       if (!ensure(LocalPlayer))
       {
           UE_LOG_SESSIONCHAT(Warning, TEXT("Cannot append a chat message to display. LocalPlayer is not valid."));
           return;
       }
   
       const FUniqueNetIdAccelByteUserRef SenderABId = StaticCastSharedRef<const FUniqueNetIdAccelByteUser>(Message.GetUserId());
       if (!SenderABId.Get().IsValid())
       {
           UE_LOG_SESSIONCHAT(Warning, TEXT("Cannot append a chat message to display. Sender User Id is invalid."));
           return;
       }
   
       // Display chat message.
       UChatData* ChatData = NewObject<UChatData>();
       ChatData->Message = Message.GetBody();
   // ...
       // If the sender doesn't have display name, then use the default display name.
       ChatData->Sender = Message.GetNickname();
       if (ChatData->Sender.IsEmpty() || SenderABId.Get().GetAccelByteId().Equals(ChatData->Sender))
       {
           ChatData->Sender = UTutorialModuleOnlineUtility::GetUserDefaultDisplayName(Message.GetUserId().Get());
       }
   
       // Display chat message.
       W_ActiveChat->AppendChatMessage(ChatData);
   }

3. CPPファイルで、SendChatMessage()関数を定義します。この関数を使用してチャットメッセージを送信します。今のところ、このコードを安全策として追加します:

   void USessionChatWidget_Starter::SendChatMessage(const FText& MessageText)
   {
   // ...
       if (!ensure(GetOwningPlayer()))
       {
           UE_LOG_SESSIONCHAT(Warning, TEXT("Cannot send chat message. PlayerController is not valid."));
           return;
       }
   
       const ULocalPlayer* LocalPlayer = GetOwningPlayer()->GetLocalPlayer();
       if (!ensure(LocalPlayer))
       {
           UE_LOG_SESSIONCHAT(Warning, TEXT("Cannot send chat message. LocalPlayer is not valid."));
           return;
       }
   // ...
   }

4. 次に、OnSendChatComplete()関数を定義します。この関数は、新しいチャットメッセージが送信されたときのコールバックとして使用します。この関数は、新しいメッセージを追加して表示します。

   void USessionChatWidget_Starter::OnSendChatComplete(FString UserId, FString MsgBody, FString RoomId, bool bWasSuccessful)
   {
       // Abort and push a notification if failed.
       if (!bWasSuccessful) 
       {
           if (PromptSubsystem)
           {
               PromptSubsystem->PushNotification(SEND_CHAT_FAILED_MESSAGE);
           }
   
           return;
       }
   // ...
       // Display the chat if success.
       UChatData* ChatData = NewObject<UChatData>();
       ChatData->Message = MsgBody;
       ChatData->bIsSenderLocal = true;
       W_ActiveChat->AppendChatMessage(ChatData);
   }

5. OnChatRoomMessageReceived()関数を定義します。この関数は、新しいチャットメッセージを受信したときのコールバックとして使用します。この関数は、新しいメッセージを追加して表示します。

   void USessionChatWidget_Starter::OnChatRoomMessageReceived(const FUniqueNetId& UserId, const FChatRoomId& RoomId, const TSharedRef<FChatMessage>& Message)
   {
   // ...
       // Show the received chat message.
       AppendChatMessage(Message.Get());
   }

6. 最後に、GetLastChatMessages()関数を追加します。この関数は、プレイヤーがチャットメニューにいないときに受信したメッセージを取得するために使用します。今のところ、この安全策コードを追加します:

   void USessionChatWidget_Starter::GetLastChatMessages()
   {
   // ...
       if (!ensure(GetOwningPlayer()))
       {
           UE_LOG_SESSIONCHAT(Warning, TEXT("Cannot get last chat messages. PlayerController is not valid."));
           return;
       }
   
       const ULocalPlayer* LocalPlayer = GetOwningPlayer()->GetLocalPlayer();
       if (!ensure(LocalPlayer))
       {
           UE_LOG_SESSIONCHAT(Warning, TEXT("Cannot get last chat messages. LocalPlayer is not valid."));
           return;
       }
   
       if (!ensure(W_ActiveChat))
       {
           UE_LOG_SESSIONCHAT(Warning, TEXT("Cannot get last chat messages. Chat widget component is not valid."));
           return;
       }
   // ...
   }

7. プロジェクトをビルドし、Unreal Editorで開きます。

8. エディターで、コンテンツブラウザから/Content/TutorialModules/Social/SessionChat/に移動し、DA_SessionChatデータアセットを開きます。Is ActiveとIs Starter Mode Activeオプションを有効にし、データアセットを保存します。これにより、準備したウィジェットがアクティブになります。

9. エディターでゲームをプレイします。ログインし、Social > Friends >任意のフレンドを選択> Chatに移動して、セッションチャットウィジェットを開くことができるはずです。

リソース

• このチュートリアルセクションで使用されるファイルは、Unreal Byte Wars GitHubリポジトリで入手できます。

  • AccelByteWars/Content/TutorialModules/Social/SessionChat/UI/W_SessionChat_Starter.uasset
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Social/SessionChat/UI/SessionChatWidget_Starter.h
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Social/SessionChat/UI/SessionChatWidget_Starter.cpp
  • AccelByteWars/Content/TutorialModules/Social/ChatEssentials/UI/W_Chat.uasset
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidget.h
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatWidget.cpp
  • AccelByteWars/Content/TutorialModules/Social/ChatEssentials/UI/W_ChatEntry.uasset
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatEntryWidget.h
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Social/ChatEssentials/UI/ChatEntryWidget.cpp