アップグレードアカウントメニューを追加 - ゲーム内登録 - (Unreal Engine モジュール)

Last updated on February 4, 2026

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

メニューの内容

このチュートリアルでは、ヘッドレスアカウントを完全な AccelByte Gaming Services (AGS) アカウントにアップグレードするために使用するウィジェットを準備する方法を説明します。ウィジェットはリソースセクションで入手でき、以下のファイルで構成されています:

UpgradeAccountOptionWidget_Starter: アカウントアップグレードオプションを表示するために使用する C++ クラスです。
- ヘッダーファイル: /Source/AccelByteWars/TutorialModules/Access/RegisterUserInGame/UI/UpgradeAccountOptionWidget_Starter.h
- CPP ファイル: /Source/AccelByteWars/TutorialModules/Access/RegisterUserInGame/UI/UpgradeAccountOptionWidget_Starter.cpp
- Blueprint ウィジェット: /Content/TutorialModules/Access/RegisterUserInGame/UI/W_UpgradeAccount_StarterOption.uasset
UpgradeAccountWidget_Starter: アカウントアップグレードフォームを表示するために使用する C++ クラスです。
- ヘッダーファイル: /Source/AccelByteWars/TutorialModules/Access/RegisterUserInGame/UI/UpgradeAccountWidget_Starter.h
- CPP ファイル: /Source/AccelByteWars/TutorialModules/Access/RegisterUserInGame/UI/UpgradeAccountWidget_Starter.cpp
- Blueprint ウィジェット: /Content/TutorialModules/Access/RegisterUserInGame/UI/W_UpgradeAccount_Starter.uasset
VerifyAccountWidget_Starter: アカウントアップグレードのメール検証フォームを表示するために使用する C++ クラスです。
- ヘッダーファイル: /Source/AccelByteWars/TutorialModules/Access/RegisterUserInGame/UI/VerifyAccountWidget_Starter.h
- CPP ファイル: /Source/AccelByteWars/TutorialModules/Access/RegisterUserInGame/UI/VerifyAccountWidget_Starter.cpp
- Blueprint ウィジェット: /Content/TutorialModules/Access/RegisterUserInGame/UI/W_VerifyAccount_Starter.uasset

これらのウィジェットがどのように構築されているかの詳細を見てみましょう。

アップグレードアカウントオプションウィジェット

このウィジェットは、プレイヤーがヘッドレスアカウントを完全なアカウントにアップグレードできるようにするボタンを表示します。以下は W_UpgradeAccount_StarterOption Blueprint ウィジェットのプレビューです。

Upgrade account option widget Unreal Byte Wars In-game registration

以下は、このウィジェットで使用される UI コンポーネントの宣言です。宣言は UpgradeAccountOptionWidget_Starter クラスのヘッダーファイルにあります。

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

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

アップグレードアカウントウィジェット

このウィジェットは、ヘッドレスアカウントを完全なアカウントにアップグレードするために必要なフィールドを含むフォームを表示します。必須フィールドは、ユーザー名、メールアドレス、パスワード、およびパスワードの再入力です。以下は W_UpgradeAccount_Starter Blueprint ウィジェットのプレビューです。

Upgrade account widget Unreal Byte Wars In-game registration

以下は、このウィジェットで使用される UI コンポーネントの宣言です。宣言は UpgradeAccountWidget_Starter クラスのヘッダーファイルにあります。

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

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

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

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

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

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

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

アカウント検証ウィジェット

このウィジェットは、ヘッドレスアカウントを完全なアカウントにアップグレードするためにメールアドレスを検証するフォームを表示します。以下は W_VerifyAccount_Starter Blueprint ウィジェットのプレビューです。

Verify account widget Unreal Byte Wars In-game registration

以下は、このウィジェットで使用される UI コンポーネントの宣言です。宣言は VerifyAccountWidget_Starter クラスのヘッダーファイルにあります。

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

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

	UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
	UAccelByteWarsWidgetSwitcher* Ws_VerifyAccount;

	UPROPERTY(BlueprintReadOnly, meta = (BindWidgetOptional, BlueprintProtected = true, AllowPrivateAccess = true))
	UAccelByteWarsButtonBase* Btn_Resend;

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

UI の準備

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

UpgradeAccountOptionWidget_Starter クラスのヘッダーファイルを開きます。次に、以下の関数を宣言します:
```
protected:
// ...
	void ProceedToUpgradeAccount();
	void SkipUpgradeAccount();
```

UpgradeAccountOptionWidget_Starter クラスの CPP ファイルを開き、上記の関数を実装します。これらの関数は、プレイヤーがアカウントアップグレードオプションまたはスキップボタンを選択したときにそれぞれトリガーされます。

void UUpgradeAccountOptionWidget_Starter::ProceedToUpgradeAccount()
{
	if (!GameInstance) 
	{
		UE_LOG_REGISTERUSERINGAME(Warning, TEXT("Failed to proceed to upgrade account. Game instance is null."));
		return;
	}

	UAccelByteWarsBaseUI* BaseUIWidget = Cast<UAccelByteWarsBaseUI>(GameInstance->GetBaseUIWidget());
	if (!BaseUIWidget) 
	{
		UE_LOG_REGISTERUSERINGAME(Warning, TEXT("Failed to proceed to upgrade account. Base UI widget is null."));
		return;
	}

	BaseUIWidget->PushWidgetToStack(EBaseUIStackType::Menu, UpgradeAccountWidgetClass);
}

void UUpgradeAccountOptionWidget_Starter::SkipUpgradeAccount()
{
	if (!GameInstance)
	{
		UE_LOG_REGISTERUSERINGAME(Warning, TEXT("Failed to skip upgrade account. Game instance is null."));
		return;
	}

	UAccelByteWarsBaseUI* BaseUIWidget = Cast<UAccelByteWarsBaseUI>(GameInstance->GetBaseUIWidget());
	if (!BaseUIWidget)
	{
		UE_LOG_REGISTERUSERINGAME(Warning, TEXT("Failed to skip upgrade account. Base UI widget is null."));
		return;
	}

	BaseUIWidget->PushWidgetToStack(EBaseUIStackType::Menu, MainMenuWidgetClass);
}

次に、上記の関数を呼び出すために各ボタンをバインドします。事前定義された NativeOnActivated() 関数を見つけて、以下のコードを追加します。

void UUpgradeAccountOptionWidget_Starter::NativeOnActivated()
{
// ...
	Super::NativeOnActivated();

	Btn_Upgrade->OnClicked().AddUObject(this, &ThisClass::ProceedToUpgradeAccount);
	Btn_Skip->OnClicked().AddUObject(this, &ThisClass::SkipUpgradeAccount);
}

次に、UpgradeAccountWidget_Starter クラスのヘッダーファイルを開き、以下の関数を宣言します。
```
protected:
// ...
	void UpgradeAccount();
```

UpgradeAccountWidget_Starter クラスの CPP ファイルを開き、以下のコードを追加して上記の関数を定義します。この関数はいくつかのローカル入力検証を実行し、その後アカウントアップグレード検証ウィジェットを開きます。後で、追加の入力検証を実行するためにバックエンドにリクエストを送信します。

void UUpgradeAccountWidget_Starter::UpgradeAccount()
{
	const FString Username = Edt_Username->GetText().ToString();
	const FString DisplayName = Edt_DisplayName->GetText().ToString();
	const FString Email = Edt_Email->GetText().ToString();
	const FString Password = Edt_Password->GetText().ToString();
	const FString RetypePassword = Edt_RetypePassword->GetText().ToString();

	ToggleWarningText(false);

	// Basic local input validations.
	if (Username.IsEmpty() || DisplayName.IsEmpty() || Email.IsEmpty() || Password.IsEmpty() || RetypePassword.IsEmpty()) 
	{
		ToggleWarningText(true, EMPTY_REQUIRED_FIELDS_ERROR);
		return;
	}
	else if (!AccelByteWarsUtility::IsValidEmailAddress(Email))
	{
		ToggleWarningText(true, EMAIL_INPUT_VIOLATION_ERROR);
		return;
	}
	else if (!Password.Equals(RetypePassword, ESearchCase::Type::CaseSensitive))
	{
		ToggleWarningText(true, PASSWORD_NOT_MATCH_ERROR);
		return;
	}
// ...
}

次に、上記の関数を呼び出すためにボタンをバインドします。事前定義された NativeOnActivated() 関数を見つけて、以下のハイライトされた行を追加します。

void UUpgradeAccountWidget_Starter::NativeOnActivated()
{
// ...
	Btn_Back->OnClicked().AddUObject(this, &ThisClass::DeactivateWidget);
	Btn_Upgrade->OnClicked().AddUObject(this, &ThisClass::UpgradeAccount);
}

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

protected:
// ...
	void SendVerificationCode(const bool bForceResend = false);
	void UpgradeAndVerifyAccount();
	
	void StartRequestVerificationCodeCooldown();
	void UpdateRequestVerificationCodeCooldown(float DeltaTime);
	void ResetRequestVerificationCodeCooldown();

VerifyAccountWidget_Starter クラスの CPP ファイルを開き、SendVerificationCode() 関数を定義します。この関数を使用して、バックエンドにアカウントアップグレードのメール検証リクエストを送信します。今のところ、空のままにしておくことができます。
```
void UVerifyAccountWidget_Starter::SendVerificationCode(const bool bForceResend)
{
// ...
}
```
次に、UpgradeAndVerifyAccount() 関数を定義します。この関数を使用して、メール検証コードを送信し、アカウント情報（ユーザー名、メールアドレス、パスワード）をアップグレードして、ヘッドレスアカウントを完全なアカウントにアップグレードします。今のところ、空のままにしておくことができます。
```
void UVerifyAccountWidget_Starter::UpgradeAndVerifyAccount()
{
// ...
}
```

次に、以下のヘルパー関数を定義します。これらの関数は、メール検証リクエストが送信された後にクールダウン期間を開始し、プレイヤーがリクエストをスパムするのを防ぎます。

void UVerifyAccountWidget_Starter::StartRequestVerificationCodeCooldown()
{
	Btn_Resend->SetIsEnabled(false);
	RequestVerificationCodeTimer = (float)RequestVerificationCodeCooldown;
}

void UVerifyAccountWidget_Starter::UpdateRequestVerificationCodeCooldown(float DeltaTime)
{
	if (RequestVerificationCodeTimer <= 0)
	{
		return;
	}

	RequestVerificationCodeTimer -= DeltaTime;
	Btn_Resend->SetButtonText(FText::FromString(
		FString::Printf(TEXT("%s (%d s)"), 
		*RESEND_VERIFICATION_CODE_MESSAGE.ToString(), 
		(int32)RequestVerificationCodeTimer)));

	if (RequestVerificationCodeTimer <= 0) 
	{
		ResetRequestVerificationCodeCooldown();
	}
}

void UVerifyAccountWidget_Starter::ResetRequestVerificationCodeCooldown()
{
	if (!GetWorld() || GetWorld()->bIsTearingDown) 
	{
		return;
	}

	RequestVerificationCodeTimer = 0.0f;
	Btn_Resend->SetIsEnabled(true);
	Btn_Resend->SetButtonText(RESEND_VERIFICATION_CODE_MESSAGE);
}

次に、事前定義された NativeOnActivated()、NativeOnDeactivated()、および NativeTick() 関数を以下のコードに置き換えます。このコードは、各関数を呼び出すためにボタンをバインドします。また、ウィジェットが表示されたときにメール検証コードを送信する関数をトリガーし、クールダウンタイマーを開始します。また、ウィジェットが非アクティブ化されたときに UI コンポーネントがクリーンアップされることを保証します。

void UVerifyAccountWidget_Starter::NativeOnActivated()
{
	Super::NativeOnActivated();

	Btn_Back->OnClicked().AddUObject(this, &ThisClass::DeactivateWidget);
	Btn_Resend->OnClicked().AddUObject(this, &ThisClass::SendVerificationCode, true);
	Btn_Verify->OnClicked().AddUObject(this, &ThisClass::UpgradeAndVerifyAccount);

	ToggleWarningText(false);
	SendVerificationCode(false);
}

void UVerifyAccountWidget_Starter::NativeOnDeactivated()
{
	ResetRequestVerificationCodeCooldown();

	UpgradeAccountData.Reset();
	Edt_VerificationCode->SetText(FText::GetEmpty());

	Btn_Back->OnClicked().Clear();
	Btn_Resend->OnClicked().Clear();
	Btn_Verify->OnClicked().Clear();

	Super::NativeOnDeactivated();
}

void UVerifyAccountWidget_Starter::NativeTick(const FGeometry& MyGeometry, float InDeltaTime)
{
	Super::NativeTick(MyGeometry, InDeltaTime);

	UpdateRequestVerificationCodeCooldown(InDeltaTime);
}

次に、DefaultEngine.ini を開き、bAllowUpgradeAccount を有効にします。これにより、Byte Wars モジュールがアクティブ化され、アップグレードアカウントメニューが表示されるようになります。
```
[AccelByteTutorialModules]
bAllowUpgradeAccount=true
```
プロジェクトをビルドし、Unreal Engine エディターで開きます。エディターで、/Content/TutorialModules/Access/RegisterUserInGame/ に移動します。DA_RegisterUserInGame というデータアセットが見つかります。それを開き、Is Starter Mode Active を有効にします。次に、データアセットを保存します。これにより、ウィジェットがアクティブ化され、ゲームをプレイするときにそれらをナビゲートできるようになります。
エディターでゲームをプレイし、ログインすると、アップグレードアカウントオプションウィジェットが表示されます。Upgrade to AccelByte Account > Upgrade Account > Verify Account メニューに移動できるようになります。

リソース

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

メニューの内容​

アップグレードアカウントオプションウィジェット​

アップグレードアカウントウィジェット​

アカウント検証ウィジェット​

UI の準備​

リソース​