Chat Message

Chat Message UIパターンを使用すると、通知またはチャット画面に会話の投稿を表示できます。写真、テキスト、画像、配信時間、ステータスなどのコンテンツを表示するために使用できます。

Chat Message UIパターンの使用方法

この例では、ユーザーが問い合わせを入力できるフォームがアプリにすでに含まれています。ユーザーがメッセージを送信すると、Chat Messageウィジェットを使用して会話の投稿としてメッセージが表示されます。

1.Service StudioのツールボックスでChat Messageを検索します。

Chat Messageウィジェットが表示されます。

![](<images/chatmessage-1-ss.png>)

1.ツールボックスから、Chat Messageウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

![](<images/chatmessage-2-ss.png>)

デフォルトで、Chat Messageウィジェットには［Image］、［Name］、［Content］、［Actions］の各プレースホルダが含まれています。

1.関連するコンテンツをプレースホルダに追加します。

* この例では、ユーザーがフォームに入力した名前が表示されるようにするため、［Name］プレースホルダをExpressionに変換して関連するロジックを入力しています。これを行うには、［Name］プレースホルダを右クリックして［**Convert to Expression**］を選択し、［**Expression Value**］ポップアップでNameアトリビュートに移動して［**Done**］をクリックします。

    ![](<images/chatmessage-4-ss.png>)

    ![](<images/chatmessage-5-ss.png>)

* ユーザーがフォームに入力したメッセージが表示されるようにするため、［Content］プレースホルダをExpressionに変換して関連するロジックを入力しています。これを行うには、前の手順を繰り返しますが、今度はMessageアトリビュートに移動します。

    ![](<images/chatmessage-8-ss.png>)

1.［Properties］タブで（オプションの）プロパティを設定し、Chat Messageのルックアンドフィールをカスタマイズできます。

![](<images/chatmessage-9-ss.png>)

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

この例の結果は以下のようになります。