Bubble：チャット機能

データベースの作成

１．チャットに参加するユーザー情報を格納するデータベースの作成

　①データベース（以下、Chat Groupと称す）を作成する

　②List型でUser型のField（以下、Usersと称す）を作成する

　③最後のメッセージを格納するField（以下、Last Textと称す）を作成する

２．メッセージを格納するデータベース（以下、Chatと称す）を作る

　①データベース（以下、Chatと称す）を作る

　②メッセージを格納するText型のField（以下、Textと称す）を作成する

　③Chat Groupと連携するためのField（以下、Chat Groupと称す）を作成する

　　※型は、Chat Groupを選択

　④既読機能のためのList型でUser型のField（以下、Readと称す）を作成する

デザインの作成

１．マッチングページの作成

　　　

２．チャットページの作成

　　　

　ア：戻るアイコンを設置

　イ：テキストを設置

　ウ： アとイをグループ化（Row型）

　エ：RepeatingGroupを設置

　　　　・Min height of rowはキ以下の数値に設定

　オ：エの中にImageを設置

　カ：エの中にTextを設置

　　　　・Min widthは0px

　　　　・Max widthは250px程度

　　　　・Min heightは35px程度

　　　　・Max widthは設定しない

　　　　・Fit width to contentにチェック

　　　　・左上以外の角を丸くする

　キ：オとカをグループ化（Row型）

　ク：後述するキ、オ、カのデータベース表示設定をしてから、

　　　キをコピペし、Imageを削除

　ケ：・Textを右寄せ

　　　・背景を変更

　　　・右上以外の角を丸くする

　コ：FoatingGroupを設置

　　　　・Vertically float relative toをBottomに設定

　　　　・Contaner layautをRowに設定

　サ：MultilineInputを設置

　　　　・Min heightは60px程度

　　　　・Max widthは200px程度

　シ：送信アイコンを設定

　　　　・単独でグループ化（ワークフロー設定のため）

３．チャットリストページの作成

　　　

　ア：RepeatingGroupを設置

　イ：アの中にImageを設置

　ウ：アの中にTextを設置

　エ：アの中にTextを設置

　オ：ウとエをグループ化（Column型）

　カ：イとオをグループ化（Row型）

　キ：アの中にTextを設置

　　　　・背景を赤に設定

　　　　・文字を白に設定

　ク：フッターを設置

ワークフローの設定

１．ユーザーディテールページの「いいねしてない時アイコン」のワークフロー

　　いいね機能の詳細はこちら

　①マッチングしたタイミングで、

　　Chat Groupにレコードが作成されるように設定する

　　⇒ページ遷移ワークフローの前に、以下のワークフローを追加

　　　

　②ページ遷移ワークフローに、データ送信の設定をする

　　（いいねした相手の情報を送る）

　　　

　③マッチングページにて、データを受け取る設定をする

　　　

２．マッチングページの「チャットページへ移動する」ボタンのワークフロー

　①チャットページへ遷移する設定をする

　②１の①にて作成したデータを送信する設定をする

　　　

　③チャットページにて、データを受け取る設定をする

　　　

３．チャットページのメッセージ送信アイコン（シ）のワークフロー

　①Chatに新たなレコードが作成されるよう設定

　　　

　②ChatのLast Textに①のTextの情報が上書きされるように設定

　　　

　③送信後、Inputが空になるように設定

　　　

４．チャットページの「ウ」のワークフロー

　チャットリストへ遷移するよう設定する

　　　

５．チャットリストページの「ケ」のワークフロー

　①Chatデータの内、Chat Groupをキーして、

　　該当する全レコードのReadにログイン中ユーザーが登録されるよう設定

　　　

　②チャットページへ遷移するよう設定

　③セルのデータを送信するよう設定

　　　

データベースの内容を表示

１．チャットページ

　イ：マッチング相手のユーザー名を表示

　　⇒ページ遷移時に受け取ったデータの内、

　　　マッチング相手のユーザー名のみ表示されるように設定する

　　　

　エ：ChatのデータからChat Groupをキーにして、

　　　該当するレコードを一覧表示するように設定

　　　

　キ：マッチング相手のメッセージを表示

　　　①Chatのデータを表示するよう設定

　　　

　　　②マッチング相手のメッセージでなければ、

　　　　表示しないように設定

　　　

　　　③ページが読み込まれた際、表示されないように設定

　　　

　オ：マッチング相手のアイコンを表示するように設定

　　　

　カ：メッセージを表示するよう設定

　　　

　ク：キ、オ、カの設定後、キをコピペし、クとする。

　　　ログイン中ユーザーのメッセージでなければ、

　　　表示しないように設定

　　　

２．チャットリストページ

　ア：Chat Groupのデータから、

　　　Usersにログイン中ユーザーを含むレコードを、

　　　更新日時順で一覧表示するように設定

　　　

　カ：親グループのデータを引き継ぐよう設定

　　　

　イ：マッチング相手のアイコンを表示するように設定

　　　

　オ：親グループのデータを引き継ぐよう設定

　　　

　ウ：マッチング相手のユーザー名を表示

　　　

　エ：最後のメッセージ（30文字）を表示

　　　

　キ：未読メッセージ数を表示

　　①Chatデータの内、該当のChat Group且つ、

　　　Readにログイン中ユーザーが含まれないレコード数を表示させるよう設定　　　

　　　

　　②ページ読み込み時には非表示になるよう設定

　　　

　　③カウントが1以上の時に表示するよう設定