Bubble で作るシンプルなマッチングサイト（初級者向け）９：【クライアント・ワーカー共通】コンタクトページの作成

この記事は【 Bubble で作るシンプルなマッチングサイト（初級者向け）】の第９回です。本シリーズが初めての方は、以下の記事でコンテンツの説明をしていますので、ご確認いただければと思います。

blog.nocodelab.jp

デザインの細かい部分については割愛しています。不明な部分があれば、こちらのエディタで確認してみてください。

今回作成する画面は、クライアントとワーカーがメッセージをやり取りするための共通で使用するコンタクトページ（contact）を作成していきます。

また、今回主に使用する Data type は Contact type と Message type です。また、対象となるお仕事情報（Job type）も Custom state に保存して使用します。Data type の定義については第2回記事をご参考ください。

1. コンタクトページ（contact）の作成
次回
コンテンツ

1. コンタクトページ（contact）の作成

出来上がりは下図のようなイメージで、クライアントとワーカーで一部表示する内容が異なります。表示の切り替えには、Conditional を使用します。

contact には、クライアントの場合は募集管理ページ（job-offer）から、ワーカーの場合は、応募フォーム（entry）、もしくは前回作成した応募管理ページ（proposals）から遷移してきます。また、今回のサンプルアプリでは、契約を成立させることができのはクライアントのみとして作成していきます。

1.1. contact ページの Design

既存のページを利用して contact を作成していきます。ここでは、job-edit を Clone form しています。

不要な element を削除して（Alert element は残しておいてください）、Page の Type of content を「Contact」にして、タイトルと見出しを Page Title の Option sets を使って設定しておきます。

どの仕事についてやり取りしているのかが分かるように、ページに対して Job type を保存する Custom state を作成しておきます。ここでは名前を「Current Job」としました。

次に、ワーカーの場合にお仕事情報の詳細部分を表示するエリアを作成していきます。Group をひとつ作成し、This element is visible on page load のチェックを「オフ」にして、Conditional で「contanct's Current Job's Client is not Current User（=ワーカー）」の場合は This element is visible としておきます。

Group の中には「Job Detail」Reusabule element を配置して、Data source に Custom state の値「contact's Current job」を設定します。

クライアントの場合に表示するエリアを作成していきます。クライアントの場合は、お仕事の詳細情報（Job Detail Reusabule element）ではなく、ワーカーの情報と、募集管理ページ（job-offer）へ遷移するための Button を配置していきます。

Row の Group を作成して、This element is visible on page load のチェックを「オフ」、Conditional を「contanct's Current Job's Client is Current User（=クライアント）」の場合は This element is visible としておきます。

Groupの中には Job の Title を表示した Text と、「Link Worker’s User」Reusable element、「募集管理を見る」Button を配置します。Link Worker’s User Reusable element の Data source には「Current Page Contance's Member:minus item Current User:first item」として対象のワーカーを表示するようにしておきます。

次に、クライアントとワーカー共通の進捗状況を表示するエリアを作成していきます。

進捗状況は「Progress」Option sets の値を表示したいので、Repeating group を配置して、Type of content を「Progress」に、Data source を「All Progress」として設定します。Repeating group の Layout では Cell’s container layout を「Row」にしておきます。

Repeating group の中には「Current cell's Progress's Display」とした Text を配置しておきましょう。また、現在の進捗状況が分かりやすいように、Contact type に登録されている Progress field と一致する値の場合は Text のスタイルが変わるように Conditional を設定しておきます。

次にクライアントとワーカーがやり取りしているメッセージ部分を作成していきます。

Group を配置して、「メッセージ」と表示した Text を配置しておきます。

作成した Group の中に Repeating group を配置して Contact type に表示されている Message type の一覧を表示するように設定（＝Data source を Current Page Contact’s Message）します。

Repeating group の中には、Message type の _From field に登録されている User の Icon や Name を表示し、メッセージの本文（Body）と Creation Date が表示されるように設定します。

次に、メッセージの本文を入力できる MultilineInput と「相談のメッセージを送信する」Button、「メッセージ送信をして契約する」Button を配置します。

「メッセージ送信をして契約する」Button はクライアントのみの場合に表示されるように「contact's Current Job's Client is Current User」の時に This element is visible になるようにしておきます。

また、Progressが「応募」の場合にのみクリックできるように「Current Page Contact's Progress is 応募」として、This element isn's clickable のチェックを「オフ」にしておきます。なお、今回のサンプルでは、Progress の値は「応募」と「契約成立」の2種類しかありませんが、もし他にも進捗状況のステータスがあるような場合は、例えば Progress Option sets に number 型の attribute を追加して「Current Page Contact's Progress’no < 3（進捗状況が3より小さい場合）」とすることでボタンの活性状態を制御することもできます。

1.2. contact ページの Workflow

では次にＷorkflow を作成していきます。作成するのは以下4つです。

まずはページがロードされるタイミングで、「Current Job」Custom state に、Do a search for で Job type から Current Page Contanct を含むデータを取得して Set state しておきます。

次に、クライアント・ワーカー共通の処理となる「相談のメッセージを送信する」Button のワークフローを作成します。

Step1 では Message type にデータを新規作成します。Body には MultilineInput の値を、_From はメッセージの送信元となる Current User を、_To には送信先となる Contanct type の Member から自分（Current User）をマイナスした User をセットします。

Step2 では Contanct に Step1 で追加した Message type を add しておきます。

Step3 では、メッセージの送信先の相手へ通知が届くように、Notice type を登録しておきます。Step4 で User type の Notice field にも、作成した Notice type を add しておきましょう。

処理が終われば、Step5 で Alert Reusable element を呼び出してアラートを表示し、Step6 で MultilineInput の値をリセットしておきます。

次に、クライアントの場合に表示される「メッセージ送信をして契約する」Button の Workflow を作成していきます。

Step1 では「相談のメッセージを送信する」Button と同じように Message type を新規作成します。

Step2 では、Contanct の Progress を「契約成立」に更新して、Step1 で作成した Message を add しておきます。

Step3 で、Job type の Contact Workers にワーカーの User type を、_Count Contract には +1 した値をセットしておきます。+1 する時は「This Job’s _Count Contract + 1」として、元の値に対して +1 されるようにしておきましょう。

Step4 と Step5 にある Notice type の登録は「相談のメッセージを送信する」Button と同様です。

Step6 で、クライアントの User type（Current User）の _Contract Worker にワーカーの User type を add しておきます。

Step7 の Alert と、Step8 の Reset relevant inputs も「相談のメッセージを送信する」Button と同様です。

「募集管理を見る」Button もクライアント用のボタンです。クリックしたら「job-offer」ページに遷移できるように Go to page… だけ作成しておきます。

1.3. contact ページへの遷移設定

最後に contact ページが作成できたので、未設定だった Go to page contact の部分を作成していきます。

Job Card Reusable element

Job Card の Title がクリックされた場合、ワーカーが既にこの仕事に応募していたら（＝クライアントにメッセージを送信していたら）、contact ページへ遷移するように設定します。

Do when condition is true で When を「Job Cartd’s Job's Client is not Current User」としてクライアント以外のユーザーであるように絞り込みを行います。さらに「and Job Card's Job's Contact:each item's Member contains Current User」として、Contanct type の Member field に自分（Current User）が含まれている場合は、既にこのクライアントに対してメッセージを送信しているユーザーと判断されるようにしておきます。

Go to page contact の Data to send では、Job type の Contact の Member に自分（Current User）が含まれているデータで :filtered したデータをセットしておきます。

entry ページ

entry ページの「この仕事に応募する！」Button の Step8 にセットしていた Go to page contact を設定します。Data to send には、Step4 で作成した Contact をセットしましょう。

job ページ

job ページの「応募画面へ」Button のクリックイベントを新たに作成し、Only when で「Current Page Job’s Contact:each item's Member contains Current User」として、既に応募している仕事の場合は、contact ページに遷移するように設定します。

前回作成した entry ページへ遷移する「応募画面へ」Button のクリックイベントには Only when を「Current Page Job’s Contact:each item's Member doesn't contain Current User」として、また応募していない仕事の場合は entry へ遷移するように修正しておきます。