フレンドリストメニューを追加する - フレンドリスト - (Unreal Engine モジュール)

Last updated on February 4, 2026

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

メニューの内容​

このチュートリアルでは、プレイヤーのフレンドリストを表示するために使用するウィジェットの準備方法を学びます。ウィジェットは以下のクラスで定義されています。

  • FriendsWidget_Starter: フレンドリストを表示する関数を呼び出すために使用する C++ クラスです。

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

  • FriendWidgetEntry_Starter: 表示名、アバター、オプションボタンなど、フレンドの情報を表示するために使用する C++ クラスです。

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

  • FriendDetailsWidget: 個々のフレンド情報を表示するために使用する C++ クラスです。

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

Friends ウィジェット​

Friends ウィジェットには、リクエストステータスの各状態を表すいくつかの状態があります。空、読み込み中、エラー、空でない(フレンドリストを表示)です。これらの状態は、カスタム Widget Switcher: UAccelByteWarsWidgetSwitcher を使用して実現されます。リスト自体は Tile View を使用して作成されます。これは List View の子で、エントリウィジェットをリストではなくタイルとして表示します。以下は W_Friends_Starter Blueprint ウィジェットのプレビューです。

Accepted friends widget Unreal Byte Wars friend list

フレンドリストを表示するリストは、FriendsWidget_Starter クラスのヘッダーファイルで定義されています。

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

	UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
	UTileView* Tv_Friends;

このウィジェットの状態の変更は、Ws_Friends->SetWidgetState() を呼び出すことで行われます。

Friend Entry ウィジェット​

以下は W_FriendEntry_Starter Blueprint ウィジェットのプレビューです。このウィジェットは、表示名、アバター、オプションボタンなどのフレンド情報を表示します。以前、このウィジェットを使用していくつかのフレンドエントリを表示しました。今回は、このウィジェットを使用してプレイヤーのフレンドの情報を表示します。この場合、表示するオプションボタンはありません。

Accepted friend entry widget Unreal Byte Wars friend list

Friend Details ウィジェット​

以下は W_FriendDetails Blueprint ウィジェットのプレビューです。このウィジェットには、表示名やアバター画像など、個々のフレンド情報を表示するコンポーネントが含まれています。

Friend details widget

フレンド情報を表示する関数は、FriendDetailsWidget クラスの CPP ファイル、特に以下の関数ですでに準備されています。

void UFriendDetailsWidget::InitData(UFriendData* FriendData)
{
	if (!FriendData) 
	{
		UE_LOG_FRIENDS_ESSENTIALS(Warning, TEXT("Unable to display friend details. Friend data is not valid."));
		return;
	}
	
	CachedFriendData = FriendData;

	// Show display name or the generated display name instead if the actual display name is empty.
	Tb_GeneratedDisplayNameNotice->SetVisibility(CachedFriendData->DisplayName.IsEmpty() ? ESlateVisibility::Visible : ESlateVisibility::Collapsed);
	if (!CachedFriendData->DisplayName.IsEmpty())
	{
		Tb_DisplayName->SetText(FText::FromString(CachedFriendData->DisplayName));
	}
	else
	{
		Tb_DisplayName->SetText(FText::FromString(
			UTutorialModuleOnlineUtility::GetUserDefaultDisplayName(CachedFriendData->UserId.ToSharedRef().Get())));
	}

	// Display avatar image.
	const FString AvatarURL = CachedFriendData->AvatarURL;
	Img_Avatar->LoadImage(AvatarURL);
}

フレンド情報を表示するコンポーネントは、FriendDetailsWidget クラスのヘッダーファイルで定義されています。

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

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

UI の準備​

このセクションでは、チュートリアルに沿って進めるためにウィジェットを準備する方法を学びます。

  1. FriendsWidget_Starter クラスの CPP ファイルを開きます。そこに、以下の関数があります。後で、この関数でフレンドリストを取得して表示するいくつかの関数を呼び出します。

    void UFriendsWidget_Starter::GetFriendList()
    {
    // ...
    }

  2. 同じファイルで、以下の関数を見つけます。リスト内のフレンドエントリがクリックされると、以下の関数がトリガーされます。この関数は、個々のフレンド情報を表示するために W_FriendDetails ウィジェットを表示します。このステップでは何もする必要はありません。

    void UFriendsWidget_Starter::OnFriendEntryClicked(UObject* Item) 
    {
    	if (!Item)
    	{
    		UE_LOG_FRIENDS_ESSENTIALS(Warning, TEXT("Unable to handle friend entry on-click event. The friend entry's object item is not valid."));
    		return;
    	}

    	UFriendData* FriendData = Cast<UFriendData>(Item);
    	if (!FriendData)
    	{
    		UE_LOG_FRIENDS_ESSENTIALS(Warning, TEXT("Unable to handle friend entry on-click event. The friend entry's friend data is not valid."));
    		return;
    	}

    	UAccelByteWarsBaseUI* BaseUIWidget = Cast<UAccelByteWarsBaseUI>(GameInstance->GetBaseUIWidget());
    	if (!BaseUIWidget)
    	{
    		UE_LOG_FRIENDS_ESSENTIALS(Warning, TEXT("Unable to handle friend entry on-click event. Base UI widget is not valid."));
    		return;
    	}

    	UFriendDetailsWidget* DetailsWidget = Cast<UFriendDetailsWidget>(BaseUIWidget->PushWidgetToStack(EBaseUIStackType::Menu, FriendDetailsWidgetClass));
    	if (!DetailsWidget)
    	{
    		UE_LOG_FRIENDS_ESSENTIALS(Warning, TEXT("Unable to handle friend entry on-click event. Friend details widget is not valid."));
    		return;
    	}

    	DetailsWidget->InitData(FriendData);
    }

  3. プロジェクトをビルドし、Unreal Engine エディターで開きます。エディターでゲームをプレイし、ログインすると、Social > Friends に移動できるはずです。

リソース​

に最終更新
On this page