> For the complete documentation index, see [llms.txt](/llms.txt)

# MoneyStore(GS2 UIKit for Unity) のサンプル

GS2 UIKit for Unity を使用した GS2-Money + GS2-Showcase の機能実装サンプルの紹介



課金通貨の販売機能を実装します。

## リポジトリ

https://github.com/gs2io/gs2-uikit-for-unity-sample/tree/main/MoneyStore

## GS2-Deploy テンプレート

https://github.com/gs2io/gs2-uikit-for-unity-sample/blob/main/MoneyStore/initialize_money_store_template.yaml

## プロジェクト内容

![img.png](img.png)

プロジェクトを開くと上記の通りになります。

![img_1.png](img_1.png)

実行すると、こちらのように販売されている商品の一覧が表示されます。

「¥100 x100」の「Buy」をクリックします。

![img_2.png](img_2.png)

残高が 100 になりました。
Editor では表示されませんが、iOS や Android で実行すると決済シーケンスが挟まります。

## プロジェクトの解説

![img_3.png](img_3.png)

シーンのヒエラルキーに注目してください。

### Canvas/MoneyStoreWindow/Wallet

課金通貨の残高を表示しています。

[Moneyのサンプル]() で解説していますので、そちらを参照ください。

### Canvas/MoneyStoreWindow/Store

![img_4.png](img_4.png)

**Gs2ShowcaseOwnShowcaseContext**

この GameObject 以下のノードで取り扱う GS2-Showcase の陳列棚を指定しています。

![img_6.png](img_6.png)
![img_5.png](img_5.png)

今回は、GS2-Showcase の showcase-0001 というネームスペースの GenStore という名前の陳列棚を指定しています。

**Gs2ShowcaseOwnShowcaseFetcher**

Gs2ShowcaseOwnShowcaseContext で指定した陳列棚の情報を取得します。

### Canvas/MoneyStoreWindow/Store/.../Content

![img_7.png](img_7.png)

**Gs2ShowcaseOwnDisplayItemList**

Gs2ShowcaseOwnShowcaseFetcher で取得した陳列棚に陳列された商品を指定されたプレハブに割り当てて生成します。
Maximum Items にはプレハブを生成する最大数を指定します。

![img_8.png](img_8.png)

今回は子ノードにいる DisplayItem をプレハブとして指定しています。
フレハブとして指定された GameObject がシーン内にある場合、その GameObject は無効化され、それ以外に Maximum Items で指定された数だけ GameObject が生成されます。

### Canvas/MoneyStoreWindow/Store/.../Content/DisplayItem

![img_10.png](img_10.png)

**Gs2ShowcaseOwnDisplayItemContext**

この GameObject 以下のノードで取り扱う商品を指定しています。
コンテキストの内容は Gs2ShowcaseOwnDisplayItemList によって割り当てられます。

**Gs2ShowcaseOwnDisplayItemFetcher**

陳列されている商品の詳細を取得します。

### Canvas/MoneyStoreWindow/Store/.../Content/DisplayItem/Icon

![img_11.png](img_11.png)

**Gs2ShowcaseOwnSalesItemNameEnabler**

陳列されている商品の名前を使用して GameObject の表示・非表示を制御します。
商品によって表示する画像を切り替えるのに使用しています。

### Canvas/MoneyStoreWindow/Store/.../Content/DisplayItem/Price

![img_12.png](img_12.png)

**Gs2MoneyDepositByUserIdFetcher**

DisplayItem の AcquireActions から Gs2MoneyDepositByUserId を取り出します。

**Gs2MoneyDepositByUserIdLabel**

Gs2MoneyDepositByUserId に設定されたパラメーターを Format で指定された形式に整形します。
整形されたテキストは OnUpdate(String) にコールバックされ、そこから Text コンポーネントに値を反映しています。

### Canvas/MoneyStoreWindow/Store/.../Content/DisplayItem/Count

![img_12.png](img_12.png)

**Gs2MoneyDepositByUserIdFetcher**

DisplayItem の AcquireActions から Gs2MoneyDepositByUserId を取り出します。

**Gs2MoneyDepositByUserIdLabel**

Gs2MoneyDepositByUserId に設定されたパラメーターを Format で指定された形式に整形します。
整形されたテキストは OnUpdate(String) にコールバックされ、そこから Text コンポーネントに値を反映しています。

### Canvas/MoneyStoreWindow/Store/.../Content/DisplayItem/Buy/Gs2ShowcaseShowcaseBuyAction

![img_13.png](img_13.png)

こちらのコンテキストメニューよりプレハブを追加できます。

**Gs2ShowcaseShowcaseBuyAction**

Quantity で購入する数量を指定できます。

プレハブを有効化することで Gs2ShowcaseDisplayItemContext で指定した商品を購入します。

### Process/Gs2AutoLogin

ログイン処理を実行するプレハブが設定されています。

[Accountのサンプル]() で解説していますので、そちらを参照ください。