このチュートリアルでは、SDKのメソッドを使用して実装する方法を示します：

• ユーザー登録
• 登録確認メールの再送依頼
• ユーザーログイン
• ユーザーパスワードリセット

ソースコード

GitHubでこれらの例のソースコードを参照してください。

ユーザー登録を実装する

ウェジットを作成する

1. Content Browserに移動して、UIディレクトリを作成します。コンテクストメニューで、User Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のインターフェース要素を追加します：
   • ユーザー名欄
   • ユーザーメールアドレス欄
   • ユーザーパスワード欄
   • 登録ボタン

次の図は、ページ構成の一例です。

3. レベルの設計図を開きます：
   1. Content Browserのレベルを選択します。
   2. メインメニューで、Blueprints > Open Level Blueprintに移動します。
4. レベル起動時のウィジェット表示を実装します。そのためには、以下のようにノードを追加します。CreateWidgetノードで、作成したウィジェットを指定します。

イベントハンドリングを追加する

1. Hierarchyパネルで、登録ボタンを選択します。
2. Detailsパネルで、On Clickedイベントの側にある+アイコンをクリックします。

3. Graphのビューを開きます。
4. XsollaLoginSubsystemオブジェクト上のRegisterUserメソッドコールをOnClickedノードにリンクし、ユーザーが入力したデータの受け渡しを追加します。
5. コールバック機能を追加します：
   • OnRegistered — 登録が成功した場合に呼び出される
   • OnError — エラーが発生した場合に呼び出される

6. ウィジェットのデバッグを開始するには、レベルを開始します。

イベントハンドリングの実装例：

登録の確認メールを設定する

登録に成功すると、ユーザーは指定したアドレスに登録確認メールを受け取ります。アドミンページで、ユーザーに送られるメールはカスタマイズできます。

Androidアプリケーションを開発している場合、ユーザーが登録を確認した後、アプリケーションに戻るためのディープリンクをセットアップします。

登録確認メールの再送依頼を実装する

ウェジットを作成する

1. Content Browserに移動して、UIディレクトリを開きます。コンテクストメニューで、User Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のインターフェース要素を追加します：
   • ユーザー名/メールアドレス欄
   • メール再送信ボタン

次の図は、ページ構成の一例です。

3. レベルの設計図を開きます：
   1. Content Browserのレベルを選択します。
   2. メインメニューで、Blueprints > Open Level Blueprintに移動します。
4. CreateWidgetノードで、作成したウィジェットを指定します。

イベントハンドリングを追加する

1. Hierarchyパネルで、メール再送信ボタンを選択します。
2. Detailsパネルで、On Clickedイベントの側にある+アイコンをクリックします。

3. Graphのビューを開きます。
4. XsollaLoginSubsystemオブジェクト上のResendAccountConfirmationEmailメソッドコールをOnClickedノードにリンクし、ユーザーによって入力されたデータの受け渡しを追加します。
5. OnEmailResentとOnErrorコールバック機能こーを追加します。
6. ウィジェットのデバッグを開始するには、レベルを開始します。

リクエストが成功した場合、ユーザーは登録時に指定したメールアドレスに登録確認メールを受け取ります。

イベントハンドリングの実装例：

ユーザーログインを実装する

ウェジットを作成する

1. Content Browserに移動して、UIディレクトリを開きます。コンテクストメニューで、User Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のインターフェース要素を追加します：
   • ユーザー名欄
   • パスワード欄
   • ログイン状態を保存するチェックボックス
   • ログインボタン

次の図は、ページ構成の一例です。

3. レベルの設計図を開きます：
   1. Content Browserのレベルを選択します。
   2. メインメニューで、Blueprints > Open Level Blueprintに移動します。
4. CreateWidgetノードで、作成したウィジェットを指定します。

イベントハンドリングを追加する

1. Hierarchyパネルで、ログインボタンを選択します。
2. Detailsパネルで、On Clickedイベントの側にある+アイコンをクリックします。

3. Graphのビューを開きます。
4. XsollaLoginSubsystemオブジェクト上のAuthenticateUserメソッドコールをOnClickedノードにリンクし、ユーザーによって入力されたデータの受け渡しを追加します。
5. OnAuthenticatedとOnErrorコールバック機能こーを追加します。

6. ウィジェットのデバッグを開始するには、レベルを開始します。

イベントハンドリングの実装例：

パスワードリセットを実装する

ウェジットを作成する

1. Content Browserに移動して、UIディレクトリを開きます。コンテクストメニューで、User Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のインターフェース要素を追加します：
   • ユーザー名/ユーザーメールアドレス欄
   • パスワードリセットボタン

次の図は、ページ構成の一例です。

3. レベルの設計図を開きます：
   1. Content Browserのレベルを選択します。
   2. メインメニューで、Blueprints > Open Level Blueprintに移動します。
4. CreateWidgetノードで、作成したウィジェットを指定します。

イベントハンドリングを追加する

1. Hierarchyパネルで、パスワードリセットボタンを選択します。
2. Detailsパネルで、On Clickedイベントの側にある+アイコンをクリックします。

3. Graphのビューを開きます。
4. XsollaLoginSubsystemオブジェクト上のResetUserPasswordメソッドコールをOnClickedノードにリンクし、ユーザーによって入力されたデータの受け渡しを追加します。
5. OnEmailSentとOnErrorコールバック機能こーを追加します。
6. ウィジェットのデバッグを開始するには、レベルを開始します。

イベントハンドリングの実装例：

パスワード再設定のリクエストに成功すると、ユーザーにパスワード再設定用のリンクが記載されたメールが送信されます。アドミンページ> ログインプロジェクト > セキュリティ > OAuth 2.0 > OAuth 2.0リダイレクトURIで、認証に成功した後、メールによる確認、またはパスワードのリセット後に、ユーザーがリダイレクトされるURLアドレスまたはパスを設定することができます。

このガイドでは、SDKメソッドを使用して、ユーザーのサインアップとソーシャルネットワークアカウントによるログインを実装する方法を紹介します。

ユーザー名／ユーザーのメールアドレスとパスワードによるユーザー認証とは異なり、ユーザーのサインアップのために別のロジックを実装する必要はありません。ユーザーの初回ログインがソーシャルネットワーク経由の場合、新しいアカウントが自動的に作成されます。

別の認証方法としてアプリケーションにソーシャルログインを実装している場合、以下の条件を満たすと、ソーシャルネットワークアカウントは既存のユーザーアカウントに自動的にリンクします。

• ユーザー名/メールアドレスとパスワードでサインアップしたユーザーが、ソーシャルネットワークアカウントを介してアプリケーションにログインしました。
• ソーシャルネットワークでは、メールアドレスを返します。
• ソーシャルネットワークでのユーザーのメールアドレスは、アプリケーションで登録に使用したメールアドレスと同じです。

ソースコード

GitHubでこれらの例のソースコードを参照してください。

この例では、Twitterアカウントによるユーザーログインを設定しています。すべてのソーシャルネットワークを同じ方法で設定できます。

例題の論理とインターフェースは、お客様のアプリケーションでの使用よりも複雑ではありません。認証システムの実装方法は、デモプロジェクトで紹介されています。

ウェジットを作成する

1. Content Browserに移動して、UIディレクトリを作成します。
2. コンテキストメニューで、User Interface > Widget Blueprintに移動します。
3. ウィジェットブループリントで、ソーシャルログインボタンを追加します。

次の図は、ページ構成の一例です。

4. レベルの設計図を開きます：
   1. Content Browserのレベルを選択します。
   2. メインメニューで、Blueprints > Open Level Blueprintに移動します。
5. レベル起動時のウィジェット表示を実装します。そのためには、以下のようにノードを追加します。CreateWidgetノードで、作成したウィジェットを指定します。

イベントハンドリングを追加する

1. Hierarchyパネルで、ログインボタンを選択します。
2. Detailsパネルで、On Clickedイベントの側にある+アイコンをクリックします。

3. Graphビューを開きます。
4. ビルドインブラウザで開くログインページを実装します：

1. 1. XsollaLoginSubsystemオブジェクトに接続されたAuthenticateViaSocialNetworkメソッドコールをOnClickedノードに追加し、ユーザーが入力したデータの受け渡しを追加しました。ProviderNameパラメータにTwitterの値を渡します。
   2. コールバック関数を追加します：
      • OnSocialAuthSuccess — 認証成功後に呼び出されます。
      • OnSocialAuthCancel — 認証がキャンセルされた場合に呼び出されます。
      • OnSocialAuthError — エラーが発生した場合に呼び出されます。

このチュートリアルでは、SDKメソッドを使って、インゲームストアに以下のアイテムを表示する方法を紹介します：

• 仮想アイテム
• 仮想アイテムのグループ
• バンドル
• 仮想通貨のパッケージ

ソースコード

GitHubでこれらの例のソースコードを参照してください。

始める前に、アドミンページの項目を設定します：

1. バーチャルアイテムとバーチャルアイテムのグループを設定します。
2. 仮想通貨のパッケージを設定します。
3. バンドルを設定します。

例のロジックとインターフェイスは、アプリケーションよりも複雑ではありません。インゲームストアの実装オプションで可能なアイテムカタログについては、デモプロジェクトで説明しています。

カタログページ用のウィジェットを作成する

1. Content Browserに移動して、UIディレクトリを作成します。
2. コンテキストメニューで、User Interface > Widget Blueprintに移動します。
3. ウィジェットブループリントで、以下のUI要素を追加します：

1. • アイテムの表示と仮想通貨パッケージを切り替えるためのボタン
   • アイテムのグループの表示エリア
   • アイテムリストの表示エリア
   • 仮想通貨パッケージのリストの表示エリア

次の図は、ページ構成の一例です。

4. レベルの設計図を開きます：
   1. Content Browserのレベルを選択します。
   2. メインメニューで、Blueprints > Open Level Blueprintに移動します。
5. レベル起動時のウィジェット表示を実装します。そのためには、以下のようにノードを追加します。CreateWidgetノードで、作成したウィジェットを指定します。

カタログページのウィジェットイベント処理を追加する

1. Hierarchyパネルで、アイテムのリストに切り替えるためのボタンを選択します。
2. Detailsパネルで、On Clickedイベントの側にある+アイコンをクリックします。

3. Hierarchyパネルで、仮想通貨パッケージのリストに切り替えるためのボタンを選択します。
4. Detailsパネルで、On Clickedイベントの側にある+アイコンをクリックします。

5. Graphビューを開きます。
6. リストを切り替えるためのロジックを実装します。これを行うには、以下の図のようにノードを追加します。

仮想アイテムグループの表示を実装する

アイテムグループのクラスを作成する

1. Content Browserに移動します。そこで、コンテキストメニューで、Blueprint Classをクリックします。
2. All classesセクションで、Objectを選択してSelectをクリックします。
3. BP_ItemGroupDataをクラス名として使用します。
4. 作成したクラスのブループリントを開きます。
5. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
6. Detailsパネルで：

1. 1. Variable NameフィールドでGroupDataを指定します。
   2. Variable TypeフィールドでXsollaItemGroupを選択します。
   3. Instance EditableとExpose on Spawnボックスをチェックを入れます。

アイテムグループのウィジェットを作成する

1. Content Browserに移動してUIディレクトリを作成して、コンテキストメニューでUser Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントで、アイテムグループ名の要素を追加します。

次の図は、ウィジェットの構造の一例です。

3. Graphビューを開きます。
4. Class settingsをクリックします。
5. Detailsパネルで、Interfaces > Implemented interfacesに移動します。
6. AddをクリックしてUserObjectListEntryを選択します。これは、UIプリミティブがリストの要素に対して通常の動作を実装できるようにする、UEの標準的なインターフェースです。
7. アイテムのグループを作成するロジックを実装します：

1. 1. EventOnListItemObjectSetノードを追加して、リストの要素を作成し、ウィジェットを初期化します。
   2. グループに関するデータを含むオブジェクトの値を、グループの名前を持つ要素に渡します。これを行うには、次の図のようにノードを追加します。

1. 3. Allのカテゴリーを持つすべてのアイテムを表示するロジックを実装します。これを行うには、以下の図のようにブループリントを編集します。

8. リストで選択されているアイテムのグループを強調表示するためのロジックを実装します。これを行うには、次の図に示すようにノードを追加します。

カタログページにアイテムグループのリストを追加する

1. カタログページのウィジェットのブループリントを開きます。
2. アイテムグループの表示エリアにList View要素を追加します。
3. Detailsパネルで、Entry Widget Classフィールドで、アイテムグループ用に以前に作成したクラスを選択します。
4. グループにアイテムを追加するためのロジックを実装します：

1. 1. Graphビューを開きます。
   2. XsollaLoginSubsystemオブジェクトに接続されたGetItemGroups SDKメソッド呼び出しをEventConstructノードにリンクし、ユーザーが入力したデータの受け渡しを追加します。
   3. グループにアイテムを追加するためのロジックを実装します。このアクションは、仮想アイテムグループのローカルキャッシュの正常な更新を処理しているときに実行する必要があります。これを行うには、次の図に示すようにノードを追加します。

5. Allのカテゴリーを持つすべてのアイテムを表示するロジックを実装します。これを行うには、以下の図のようにブループリントを編集します。

仮想アイテムの表示を実装する

アイテムのクラスを作成する

1. Content Browserに移動します。そこで、コンテキストメニューで、Blueprint Classをクリックします。
2. All classesセクションで、Objectを選択してSelectをクリックします。
3. BP_CatalogItemDataをクラス名として使用します。
4. 作成したクラスのブループリントを開きます。
5. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
6. Detailsパネルで：

1. 1. Variable NameフィールドでCatalogItemを指定します。
   2. Variable TypeフィールドでStoreItemを選択します。
   3. Instance EditableとExpose on Spawnボックスをチェックを入れます。

アイテムのウィジェットを作成する

1. Content Browserに移動して、UIディレクトリを作成します。コンテクストメニューで、User Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のUI要素を追加します：
   • アイテム名
   • アイテム価格

次の図は、ウィジェットの構造の一例です。

3. Graphビューを開きます。
4. Class settingsをクリックします。
5. Detailsパネルで、Interfaces > Implemented interfacesに移動します。
6. AddをクリックしてUserObjectListEntryを選択します。これは、UIプリミティブがリストの要素に対して通常の動作を実装できるようにする、UEの標準的なインターフェースです。
7. アイテムのグループを作成するロジックを実装します：

1. 1. EventOnListItemObjectSetノードを追加して、リストの要素を作成し、ウィジェットを初期化します。
   2. アイテムに関するデータを含むオブジェクトから、アイテムの名前と価格を持つ要素に値を渡します。これを行うには、次の図のようにノードを追加します。

カタログページにアイテムのリストを追加する

1. カタログページのウィジェットのブループリントを開きます。
2. アイテムリストの表示エリアにList View要素を追加します。
3. Detailsパネルで、Entry Widget Classフィールドで、アイテム用に以前に作成したクラスを選択します。
4. グループにアイテムを追加するためのロジックを実装します：

1. 1. Graphビューを開きます。
   2. XsollaLoginSubsystemオブジェクトに接続されたGetVirtualItems SDKメソッド呼び出しをEventConstructノードにリンクし、ユーザーが入力したデータの受け渡しを追加します。
   3. グループにアイテムを追加するためのロジックを実装します。このアクションは、仮想アイテムグループのローカルキャッシュの正常な更新を処理しているときに実行する必要があります。これを行うには、次の図に示すようにノードを追加します。

5. あるアイテムが特定のグループに属しているかどうかをチェックするロジックを実装します。そのために、次の図のようにノードを追加します。

6. グループにアイテムを追加するためのロジックを実装します。これを行うには、次の図に示すようにノードを追加します。

バーチャルアイテムのグループ別表示を実装する

1. カタログページのウィジェットのブループリントを開きます。
2. Hierarchyパネルで、アイテムグループのリストを選択します。
3. Detailsパネルで、On Item Clickedイベントの側にある+アイコンをクリックします。

4. Graphビューを開きます。
5. グループによるアイテムのフィルタリングのロジックを実装します。これを行うには、以下の図のようにノードを追加します。

バンドルの表示の実装

この命令では、バンドルと仮想アイテムが1つのリストに表示されます。さらに、同じウィジェットを使って、1つのバンドルやアイテムを表示しています。

カタログページにバンドルのリストを追加する

1. カタログページのブループリントを開きます。
2. Graphビューを開きます。
3. バンドルをリストに追加するためのロジックを完成させました。次の図のように、GetBundles SDKメソッドのコールバックをGetVirtualItemsメソッドのコールバックと一緒に追加します。

アイテムウィジェットの完成

1. アイテムウェジットのブループリントを開きます。
2. アイテム名の近くにバンドルコンテンツを表示するためのボタンを追加します。

次の図は、ウィジェットの構造の一例です。

3. Graphビューを開きます。
4. バンドルコンテンツ閲覧ボタンの表示条件を追加してアイテムを作成するロジックを完成させます。その例が以下の画像です。

バンドルコンテンツを表示するロジックを追加する

1. アイテムウィジェットのブループリントで、Designerビューを開きます。
2. Hierarchyパネルで、バンドルコンテンツを表示するためのボタンを選択します。
3. Detailsパネルで、On Clickedイベントの近くにある+アイコンをクリックします。

4. Graphビューを開きます。
5. バンドルコンテンツ（バンドル内のアイテムのリストと、バンドル内の各アイテムの数量）を表示するためのロジックを実装します。これを行うには、次の図のようにノードを追加します。

仮想通貨パッケージの表示を実装する

仮想通貨パッケージ用のクラスを作成する

1. Content Browserに移動します。そこで、コンテキストメニューで、Blueprint Classをクリックします。
2. All classesセクションで、Objectを選択してSelectをクリックします。
3. BP_VcPackItemDataをクラス名として使用します。
4. 作成したクラスのブループリントを開きます。
5. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
6. Detailsパネルで：

1. 1. Variable NameフィールドでPackItemを指定します。
   2. Variable TypeフィールドでVirtualCurrencyPackageを選択します。
   3. Instance EditableとExpose on Spawnボックスをチェックを入れます。

仮想通貨パッケージウィジェットを作成する

1. Content Browserに移動して、UIディレクトリを作成します。コンテクストメニューで、User Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のUI要素を追加します：
   • パッケージ名
   • パッケージ価格

次の図は、ウィジェットの構造の一例です。

3. Graphビューを開きます。
4. Class settingsをクリックします。
5. Detailsパネルで、Interfaces > Implemented interfacesに移動します。
6. AddをクリックしてUserObjectListEntryを選択します。これは、UIプリミティブがリストの要素に対して通常の動作を実装できるようにする、UEの標準的なインターフェースです。
7. アイテムのグループを作成するロジックを実装します：

1. 1. EventOnListItemObjectSetノードを追加して、リストの要素を作成し、ウィジェットを初期化します。
   2. パッケージに関するデータを含むオブジェクトから、パッケージの名前と価格を持つ要素に値を渡します。これを行うには、次の図のようにノードを追加します。

カタログページに仮想通貨パッケージのリストを追加する

1. カタログページのウィジェットのブループリントを開きます。
2. List View要素を仮想通貨パッケージのリストの表示エリアに追加します。
3. Detailsパネルで、Entry Widget Classフィールドで、仮想通貨パッケージ用に以前に作成したクラスを選択します。
4. リストにパッケージを追加するためのロジックを実装します：

1. 1. Graphビューを開きます。
   2. XsollaStoreSubsystemオブジェクトに接続されたGetVirtualCurrencyPackageメソッドコールをEventConstructノードにリンクし、ユーザーが入力したデータの受け渡しを追加しました。
   3. パッケージをリストに追加するためのロジックを実装します。このアクションは、仮想通貨パッケージの更新が成功したときの処理中に行う必要があります。これを行うには、次の図のようにノードを追加します。

この説明では、SDKのメソッドを使用して、実際通貨で仮想アイテムの販売を実装する方法を示します。

始める前に、カタログに仮想アイテムを表示する機能を実装します。以下の例では、仮想アイテムの購入を実装する方法を説明します。他のアイテムタイプの設定も同様です。

例題のロジックとインターフェイスは、あなたのアプリケーションに比べてそれほど複雑ではありません。実際通貨でアイテムを販売し、アイテムのカタログを表示するための実装オプションの可能性については、デモプロジェクトで説明しています。

ソースコード

GitHubでこれらの例のソースコードを参照してください。

カタログページウィジェットを完成する

1. カタログページのウィジェットを開きます。
2. Graphビューを開きます。
3. ブラウザで決済ページを開くには：
   1. 決済トークンの受信を実装します：
      1. InitiatePurchaseノードを追加して、そしてXsollaStoreSubsystemオブジェクトにリンクされたFetchPaymentTokenSDKメソッドコールを、追加されたノードに接続します。
      2. FetchPaymentTokenメソッドには、購入した商品のSKUとユーザー認証トークンを渡します。

1. 2. XsollaStoreSubsystemオブジェクトにリンクされたLaunchPaymentConsole SDKメソッドを呼び出し、決済トークンを渡します。

決済ページオープン、決済状況受信の実装例：

アイテムデータクラスを強化する

1. BP_CatalogItemDataブループリントを開きます。
2. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
3. Detailsパネルで：

1. 1. Variable NameフィルドでのCatalogWidgetを指定します。
   2. Variable Typeフィルドで、W_StoreCatalogを選択します。
   3. Instance EditableとExpose on Spawn ボックスにチェックを入れます。

その結果、リストの各要素には親ウィジェットへのリンクが含まれ、そのメソッドを呼び出すことができるようになります。

カタログページへのアイテムリストの追加を完成する

1. カタログページのウィジェットのブループリントを開きます。
2. Graphビューを開きます。
3. 次の図のように、アイテムのリストを埋めるロジックを編集します。

アイテムのウィジェットを完成する

1. アイテムのウィジェットのブループリントを開きます。
2. アイテムを購入するためのボタンを追加します。

次の図は、ウィジェットの構造の一例です。

3. Hierarchyパネルで、アイテムを購入するためのボタンを選択します。
4. Detailsパネルで、On Clickedイベントの側にある+アイコンをクリックします。

5. Graphビューを開きます。
6. アイテムを購入するためのボタンをクリックするためのロジックを実装します。そのためには、以下の図のようにノードを追加します。

その結果、商品購入ボタンをクリックすると、カタログページウィジェットに実装されているロジックに従って、ブラウザ上に決済ページが表示されます。

この説明では、SDKのメソッドを使用して、仮想アイテムの仮想通貨への販売を実装する方法を示します。

始める前に、カタログに仮想アイテムを表示する機能を実装します。

お知らせ

以下の例では、仮想アイテムの購入を実装する方法を説明します。他のアイテムタイプの設定も同様です。

ソースコード

GitHubでこれらの例のソースコードを参照してください。

例題のロジックとインターフェイスは、あなたのアプリケーションに比べてそれほど複雑ではありません。仮想通貨でアイテムを販売し、アイテムのカタログを表示するための実装オプションの可能性については、デモプロジェクトで説明しています。

仮想通貨での仮想アイテムの販売を実装するには：

1. カタログページのウィジェットにアイテムを購入するためのロジックを追加します。
2. アイテムを購入するためのロジックを起動する仕組みをアイテムクラスに追加します。
3. カタログページへのアイテムのリストの追加を調整します。
4. アイテムのウィジェットに購入ボタンを追加します。
5. アイテムのウィジェットに、仮想通貨で購入するロジックを追加します：
   1. あるアイテムのウィジェットのブループリントを開きます。
   2. Graphビューに移動します。
   3. 下記のようにノードを追加します。

これにより、アイテムに指定された仮想通貨の価格がウィジェットに表示され、アイテムの購入に使用されます。複数の仮想通貨で価格が設定されている場合は、最初に表示された仮想通貨が表示または購入に使用されます。

このチュートリアルでは、SDKのメソッドを使ってユーザーのインベントリにアイテムを表示する方法を紹介します。

例のロジックとインターフェイスは、アプリケーションよりも複雑ではありません。インゲームストアの実装オプションで可能なアイテムカタログについては、デモプロジェクトで説明しています。

ソースコード

GitHubでこれらの例のソースコードを参照してください。

イベントリページ用のウィジェットを作成する

1. Content Browserに移動して、UIディレクトリを作成します。
2. コンテキストメニューで、User Interface > Widget Blueprintに移動します。
3. ウィジェットブループリントで、アイテムリストの表示エリアを追加します。

次の図は、イベントリの構造の一例です。

4. レベルの設計図を開きます：
   1. Content Browserのレベルを選択します。
   2. メインメニューで、Blueprints > Open Level Blueprintに移動します。
5. レベル起動時のウィジェット表示を実装します。そのためには、以下のようにノードを追加します。CreateWidgetノードで、作成したウィジェットを指定します。

アイテムのクラスを作成する

1. Content Browserに移動します。そこで、コンテキストメニューで、Blueprint Classをクリックします。
2. All classesセクションで、Objectを選択してSelectをクリックします。
3. BP_UserInventoryItemDataをクラス名として使用します。
4. 作成したクラスのブループリントを開きます。
5. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
6. Detailsパネルで：

1. 1. Variable NameフィールドでUserInventoryItemを指定します。
   2. Variable TypeフィールドでInventoryItemを選択します。
   3. Instance EditableとExpose on Spawnボックスをチェックを入れます。

7. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
8. Detailsパネルで：
   1. Variable Nameフィルドで、ExpiresInを指定します。
   2. Variable Typeフィルドで、Integer64を選択します。
   3. Instance EditableとExpose on Spawnのチェックボックスを入れます。

アイテムのウィジェットを作成する

1. Content Browserに移動して、UIディレクトリを作成し、コンテクストメニューからUser Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のUI要素を追加します：
   • アイテム名
   • アイテムの機能：
     • 期間限定アイテムの場合 — アイテムの状態（有効または期限切れ）
     • 消耗品の場合 — アイテムの数量
     • 消費されないアイテムの場合、機能は表示されません

次の図は、ウィジェットの構造の一例です。

3. Graphビューを開きます。
4. Class settingsをクリックします。
5. Detailsパネルで、Interfaces > Implemented interfacesに移動します。
6. AddをクリックしてUserObjectListEntryを選択します。これは、UIプリミティブがリストの要素に対して通常の動作を実装できるようにする、UEの標準的なインターフェースです。
7. アイテムを作成するロジックを実装します：

1. 1. OnListItemObjectSetノードを追加して、リストの要素を作成し、ウィジェットを初期化します。
   2. アイテムに関するデータを含むオブジェクトの値を、アイテムの名前を持つ要素に渡します。これを行うには、次の図のようにノードを追加します。

1. 3. アイテムの特徴を持つ要素に、そのタイプに応じたアイテムに関するデータを渡すことで、アイテムのタイプを定義するロジックを実装します。そのためには、次の図のようにノードを追加します。

イベントリページにアイテムのリストを追加する

1. イベントリページのウィジェットのブループリントを開きます。
2. アイテムリストの表示エリアにList View要素を追加します。
3. Detailsパネルで、Entry Widget Classフィールドで、アイテムグループ用に以前に作成したクラスを選択します。
4. グループにアイテムを追加するためのロジックを実装します：

1. 1. Graphビューを開きます。
   2. 次の図のように、XsollaInventorySubsystemオブジェクトと接続されたGetInventoryとGetTimeLimitedItemsの連続したSDKメソッドコールをEventConstructノードにリンクします：

1. 3. アイテムのリストに記入するためのロジックを実装します。そのために、以下の図のようにノードを追加します。

1. 4. 期間限定アイテムの有効期限を定義するロジックを追加します。そのために、以下の図のようにノードを追加します。

このチュートリアルでは、SDKメソッドを使って、アプリ内で仮想通貨の残高を表示する方法を紹介します。

この例では、ユーザーインベントリに仮想通貨とその残高を表示しています。そのため、事前にユーザーインベントリ内のアイテムの表示を実装しておく必要があります。

例のロジックとインターフェイスは、アプリケーションよりも複雑ではありません。インゲームストアの実装オプションで可能なアイテムカタログについては、デモプロジェクトで説明しています。

ソースコード

GitHubでこれらの例のソースコードを参照してください。

残高表示用クラスを作成する

1. Content Browserに移動します。そこで、コンテキストメニューで、Blueprint Classをクリックします。
2. All classesセクションで、Objectを選択してSelectをクリックします。
3. BP_VcBalanceItemDataをクラス名として使用します。
4. 作成したクラスのブループリントを開きます。
5. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
6. Detailsパネルで：

1. 1. Variable NameフィールドでVcBalanceItemを指定します。
   2. Variable TypeフィールドでVirtualCurrencyBalanceを選択します。
   3. Instance EditableとExpose on Spawnボックスをチェックを入れます。

残高表示用のウィジェットを作成する

1. Content Browserに移動し、UIディレクトリを作成し、コンテキストメニューでUser Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のUI要素を追加します：
   • 仮想通貨名
   • 仮想通貨の数量

次の図は、ウィジェットの構造の一例です。

3. Graphのビューを開きます。
4. Class settingsをクリックします。
5. Detailsパネルで、Interfaces > Implemented interfacesに移動します。
6. AddをクリックしてUserObjectListEntryを選択します。これは、UIプリミティブがリストの要素に対して正常な動作を実装するための、標準的なUEインターフェースです。
7. 仮想通貨をリストに追加するためのロジックを実装します：

1. 1. EventOnListItemObjectSetノードを追加して、リスト要素を作成し、ウィジェットを初期化します。
   2. 仮想通貨に関するデータを含むオブジェクトから、仮想通貨名と数量を持つ要素に値を渡します。これをするには、次の図のようにノードを追加します。

インベントリー表示用のウィジェットを完成する

1. イベントリページのウィジェットのブループリントを開きます。
2. 仮想通貨のリスト表示エリアにList View要素を追加します。
3. Detailsパネルで、Entry Widget Classフィールドで、残高表示用に以前作成したクラスを選択します。
4. 仮想通貨のリストを記入するためのロジックを実装します。

1. 1. Graphビューを開きます。
   2. XsollaInventorySubsystemオブジェクトと接続されたGetVirtualCurrencyBalanceメソッドコールをEventConstructノードにリンクします。
   3. 仮想通貨のリストを埋めるためのロジックを実装します。このアクションは、仮想通貨残高の更新が成功したときに処理される必要があります。これをするには、以下の図のようにノードを追加します。