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

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

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



テキストチャット機能を実装します。

## リポジトリ

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

## GS2-Deploy テンプレート

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

## プロジェクト内容

![img.png](img.png)

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

![img_12.png](img_12.png)

実行すると、テキスト入力欄と送信ボタンが画面下部に表示されるだけの画面が描画されます。

![img_13.png](img_13.png)

「test」と入力して送信してみます。

![img_14.png](img_14.png)

すると、投稿した日時とメッセージが表示されます。

![img_15.png](img_15.png)

もう一度、今度は「test2」と入力して送信してみます。

![img_16.png](img_16.png)

リストにも投稿されたメッセージが反映されます。

## プロジェクトの解説

![img_1.png](img_1.png)

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

### Canvas/ChatWindow

![img_2.png](img_2.png)

**Gs2ChatRoomContext**

この GameObject 以下のノードで取り扱うチャットルームを指定しています。

![img_4.png](img_4.png)
![img_3.png](img_3.png)

このサンプルでは chat-0001 というネームスペースの、room-0001 という名前のルームを指定しています。

### Canvas/ChatWindow/Messages/.../Content

![img_5.png](img_5.png)

**Gs2ChatMessageListFetcher**

RoomContext で指定されたルームのメッセージ一覧を取得します。

**Gs2ChatMessageList**

Gs2ChatMessageListFetcher で取得したメッセージを指定されたプレハブに割り当てて生成します。
Maximum Items にはプレハブを生成する最大数を指定します。

![img_6.png](img_6.png)

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

### Canvas/ChatWindow/Messages/.../Content/Message

![img_7.png](img_7.png)

**Gs2ChatMessageContext**

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

**Gs2ChatMessageFetcher**

MessageContext で指定されたメッセージを取得します。

### Canvas/ChatWindow/Messages/.../Content/Message/Text

![img_8.png](img_8.png)

**Gs2ChatMessageLabel**

Gs2ChatMessageFetcher によって取得したメッセージの内容を出力します。
今回は「{メッセージ投稿時間}:{メッセージ投稿分} {メッセージペイロード}」
で整形するよう Format に指定しています。

整形された値は OnUpdate(String) でコールバックされ、Text コンポーネントに値を反映しています。

### Canvas/ChatWindow/Input/Send/Gs2ChatMessagePostAction

**Gs2ChatMessagePostAction**

メッセージを投稿する処理を実行するプレハブです。

![img_10.png](img_10.png)

こちらのコンテキストメニューより追加が可能です。

![img_9.png](img_9.png)

投稿するメッセージの内容を Category と Metadata に指定して、プレハブを有効化します。

![img_11.png](img_11.png)

そのため、このプレハブはデフォルトでは無効化されており、メッセージの送信ボタン をクリックした際に有効化するように設定されています。

**OnPostComplete(EzMessage)**

にメッセージの送信が正常終了した際のコールバックを指定できます。
ここでは、自分自身を無効化し、チャットメッセージのテキスト入力欄を初期化する処理が設定されています。

### Process/Gs2AutoLogin

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

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

## レッツチャレンジ

ログイン処理が完了するまでは「メッセージの送信ボタン」を無効化するにはどうすればいいでしょうか？
ログイン処理が終わっているかで分岐する方法は [Accountのサンプル]() で解説しています。どうすればできそうか、考えてみてください。