Bubble で作るシンプルなマッチングサイト（初級者向け）６：Reusable element の作成②

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

blog.nocodelab.jp

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

今回は本サンプルアプリで使用する Reusable element の作成です。作成する範囲は、第3回のサインアップ周りとプロフィール画面の作成と、第4回のReusable element の作成①で作成した以外の残りを作成していきます。

1. 役割と完成図
2. Reusable element の作成
次回
コンテンツ

全部で17個ありますが、そのほとんどが主に Job type に登録されたデータを表示する為のものです。

基本的にはメインとなる「Job Card」というお仕事情報カードの呼び出しを、「募集中」や「応募中」「契約済み」といった条件が異なったもので一覧表示しているものが多くなっています。

1. 役割と完成図

それぞれの役割と完成図（Bubbleエディタ版と Preview版）は以下を順にご参考ください。

1.1. Job Card

Job Card は Job type に登録されている仕事の概要を表示する Reusable element です。Job type の定義については、第2回記事の項番 3.2. Job をご参考ください。

1.2. Job Detail

Job Detail は、各 Job type の詳細データを表示します。仕事紹介（job）ページや、応募フォーム（entry）ページなどで使用します。

1.3. Job Proposal

Job Proposal は、指定された Job type の応募状況を表示する Reusable element です。

1.4. Job Summary

Job Summary はクライアントが仕事の管理画面（job-offers）で確認できる募集状況の Reusable element です。

1.5. Link Category

Link Category は Job Card や Job Detail の中で呼び出す Reusable element で、Job の Category や SubCategory 情報を表示します。Text をクリックすると、仕事検索（jobs）ページへ遷移し、該当する仕事一覧を表示します。

1.6. Link Client's User

Link Client's User は Job Card や Job Detail の中で呼び出す Reusable element で、クライアント情報を表示します。クリックすると、該当するクライアントも紹介（client）ページへ遷移します。

1.7. Link Worker's User

Link Client's User のワーカー版です。クリックすると、ワーカーの紹介（ worker）ページへ遷移します。

契約ワーカー（myworkers）ページで表示される Link Worker’s User

1.8. List Bookmark Jobs All

該当するユーザーの「気になる！」に登録されている仕事一覧を表示する Reusable element です。

ワーカーのマイページ（dashboard）で表示される List Bookmark Jobs All

1.9. List Close Jobs All / List Close Jobs Top3

該当するクライアントが、募集を終了した仕事一覧を表示します。ALL は全件を表示し、Top3 は上位3件を表示します。

クライアントのマイページ（dashboard）で表示される List Close Jobs Top3

1.10. List Contract Jobs All / List Contract Jobs Top3

該当するワーカーが、契約した仕事一覧を表示します。ALL は全件を表示し、Top3 は上位3件を表示します。

ワーカーのマイページ（dashboard）で表示される List Contract Jobs Top3

1.11. List Entry Jobs All / List Entry Jobs Top3

該当するワーカーが、応募した仕事一覧を表示します。ALL は全件を表示し、Top3 は上位3件を表示します。

ワーカーのマイページ（dashboard）で表示される List Entry Jobs Top3

1.12. List Offer Jobs All / List Offer Jobs Top3

該当するクライアントが、募集中の仕事一覧を表示します。ALL は全件を表示し、Top3 は上位3件を表示します。

クライアントのマイページ（dashboard）で表示される List Offer Jobs Top3

1.13. List Remarks

List Remarks は Job Detail の中で呼び出す Reusable element で、該当する仕事の特記情報を表示します。

2. Reusable element の作成

それでは、実際に Reusable element を作成していきます！まずは、ネストして呼び出されている Reusable element から先に作成していきます。

2.1. Link Category

Job Card の中で呼び出す Link Category を作成します。Add a new reusable element... で Element name を「Link Category」として CREATE します。

次に Appearance で Type of content を「Job」にして、Background style を「None」にします。Layout の Container layout で「Row」を選択し、Min heitht を「25」くらいにしておきます。

Text をひとつ配置して、テキストの値を「Parent group's Jobs Category's Display」として、カテゴリー名を表示するようにします。Layout では、文字幅にフィットするように Fit width to content のチェックを「オン」にしておきましょう。

次にカテゴリー名とサブカテゴリー名の区切り文字となるように値を「 / 」とした Text をひとつ配置しておきます。

最後に、値を「Parent group's Jobs SubCategory's Display」とした Text を配置して Link Category の Design が完了です。

Workflow タブでは、カテゴリー、サブカテゴリーの Text がクリックされたら「Go to page...」するように Action を追加しておきましょう。Destination は「jobs」ページが作成できたら追加します。

2.2. Link Client's User

次は Link Client's User を作成します。「Link Client's User」という名前で、新しく Reusable element を CREATE して、Type of content を「User」、Background style を「None」にします。Container layout を「Row」、Min width を「320」、Mid height を「36」に設定します。

次に、Reusable element の「User Icon S」を配置して、Data source を「Link Client’s User's User」として User type を引き渡しておきます。

次に「Link Client's User's User's Name」として名前を表示させる Text をひとつ配置して、Style を整えておきます。ここでは Margins Left を「10」にして User Icon の間に余白を設定しています。

Workflow を作成します。An element is clicked でクリックイベントを作成し、Element で「Link Client’s User」を選択し、Setp1 に「Go to page...」を設定しておきます。Destination は「client」ページを作成した後に設定します。

2.3. Link Worker's User

次に Link Worker's User を作成しますが、こちらは先ほど作成した「Link Client’s User」をコピーしてあげるだけで作成完了です。Workflow の Go to page... は「worker」ページを作成後に指定します。

2.4. List Remarks

次に List Remarks を作成します。名前を「List Remarks」として、Type of content を「Job」とします。Background Style は「None」にして、Layout を「Row」、Min height を「30」としておきます。

Job type に登録されている Remarks field は複数登録されている可能性があるため Repeating group を配置して一覧を表示させます。

Type of content を Option sets の「Remarks」を選択して Data source には「List Remarks's Job's Remarks」とします。横並びの一覧にする為に、Scroll direction を「Wrapped horiaontally」にしておきます。

Repeating group の中に Text をひとつ配置して、値を「Current cell’s Remarks’s Display」としておきます。Stype はお好みのものに設定してください。ここでは Background color を黄色に Roundness を「5」にして角丸にしています。

2.5. Job Card

次に Job Card を作成していきます。

Type of content は「Job」にしておきます。Container layout は「Column」として、Style を整えておきます。ここでは、Background color を「#FFFFFF」、Border を「Solid」の「#6B6B6B」、Roundness を「5」とした「Group Card」という Style を適用しています。

次に Container layout「Row」の Group をひとつ配置します。Group の名前を「Group Head」としました。Container alignment を「Space between」として、Fit height to content のチェックを「オン」にしておきます。

Group Head の中に「Job Card’s Job′s Title」とした Text を配置します。Font size を少しだけ大きくしてタイトルっぽくしておきます。

Group Head の中に「Column」の Group をひとつ作成して、更にその中にクライアントが自分の募集に対して「応募あり」かどうかを判定する Text を配置しておきます。自分の Job である場合のみに表示させたいので、This element is visible on page load のチェックは「オフ」にしておきましょう。

「応募あり」Text の表示は Conditional で設定します。When には「応募しているワーカーが一人以上でかつ、この Job が自分の募集である場合」という意味の「Job Card's Job's Entry Workers:count > 0 and Job Card's Job's Client is Current User」とします。

「応募あり」Text の横に「Job Card's Job's Status's Display」として、Status field の値を表示する Text を配置します。値が「募集終了」と「募集中」とで Background color が変更されるように Conditional を設定しておきます。ここでは「募集終了」がブルーグレーっぽく、「募集中」が水色になるように設定しています。

Group Head の下に、先ほど作成した「Link Category」Reusable element を配置します。Data source には「Job Card’s Job」として、Fit width to content のチェックを「オン」にしておきます。

次に「Group Bottom」という名前の「Row」Group をひとつ配置します。Container alignment を「Space between」にしておきます。

Group Bottom の中に「Link Client's User」Reusable element を配置します。Data source を「Job Card's Job's Client」として、Fit width to content のチェックを「オン」にしておきます。

次に Group Bottom の中に、さらに「Row」layout の Group をひとつ配置して、Container alignment を「Right-aligned」にしておき、更に「掲載日（Publish Date）」と「更新日（Modified Date）」を表示する Text を追加します。

日付は「:formatted as...」で Format type を「Custom」にして「yyyy/m/d」としておきます。

以上で、Job Card の完成です。

2.6. Job Detail

次に Job Detail を作成していきます。

Type of content を「Job」にして、Background style を「None」にしておきます。Container type は「Column」にして Min width を「320」に、Padding を「10」ぐらいにしておきます。

Job Card と同じ要領で、仕事のタイトル（Job Detail Job’s Title）と Link Client’s User の Reusable element を配置します。Data source も忘れずに設定しましょう。

次に「仕事の詳細」とした見出しとなる Text を配置します。見出しとなるようなスタイルは再利用することが多いので、Styles タブで定義しておくと便利ですね。ここでは「Section Title」という Style を作成しました。

「Link Category」と「List Remarks」の Reusable element も配置しておきます。

次に、仕事の詳細情報（Discription）を表示する部分を作成していきます。詳細情報は、「▼ さらに詳しく見る」をクリックした場合に表示し、「▲ 詳細を閉じる」をクリックした場合に非表示となるようにしていきたいと思いますので、切り替えを判断する為の Custom state をひとつ用意します。

Job Detail のプロパティウィンドウから「isVisible」という名前で「yes/no」型の Custom state を作成します。Default value は「いいえ」としておきましょう。

Custom state が作成できたら Text をひとつ配置して、Conditional を設定します。Job Detail's isVisibule is "yes" の場合は「▲ 詳細を閉じる」、Job Detail's isVisibule is "no" の場合は「▼ さらに詳しく見る」となるようにします。

次に「Job Detail's Job's Discription」とした Text をひとつ配置して、This element is visible on page load のチェックを「オフ」とし、Conditional で「Job Detail's isVisiblue is "yes"」の時に表示されるように設定します。また、非表示の場合は、高さがカットされるように Collapse when hidden のチェックは「オン」にしておきましょう。

最後に「掲載日（Publish Date）」を表示して Job Detail の完成です。お好みで Job Card と同じように「更新日（Modify Date）」を表示しても良いですね。

2.7. Job Proposal

次は Job Proposal を作成します。Type of content は「Job」、Min width「320」、Max width「1000」、Min height「100」とします。

次に「応募状況」とした見出しとなる Text を配置します。

見出しの下には「Row」の Group をひとつ配置して、その中に「応募した人（Job Proposal’s Job’s _Count Entry）」「契約した人（Job Proposal’s Job’s _Count Contract）」「応募人数（Job Proposal’s Job’s Num）」「気になる（Job Proposal’s Job’s _Count Bookmark）」の人数を取得して表示します。

2.8. Job Summary

次に Job Summary を作成します。Job Proposal と似た要領で作成していきますが、Job Summary は Container layout を「Row」で作成します。

取得する値は Job Proposal と同じですが、下図のようなレイアウトで表示されるように設定します。

まずは「応募」を作成して、「契約」と「募集」をコピーで作成します。取得している field は、それぞれ _Count Entry、_Count Contract、Num の値となります。

2.9. List Bookmark Jobs All

次に List Bookmark Jobs All を作成します。Type of content は「User」で、Container layout は「Column」にしておきます。

見出しとなる Text を配置して「気になる！仕事」としておきます。

次に該当データなしの場合に表示する Text を配置します。This element is visible on page load のチェックを「オフ」にして、Collapse when hidden のチェックを「オン」にします。こちらの Text も再利用できるように、Style を定義しておくと便利です。表示する際の Conditional は後ほど設定します。

次に Type of content が「Job」の Repeating group を配置します。Data source は User type の Bookmark field に登録されている Job のリストを取得したいので「List Bookmark Jobs All's User's Bookmark」として「:filtered」で「_isPublic = "yes"」として公開されている Job で絞り込みを行います。

次に Repeating group の中に Job Card を配置して Data source を「Current cell's Job」としておきます。

もう一度、次に該当データなしの場合に表示する Text に戻り、Conditional で Repeating group のデータが 0 件の場合に visible となるように、When を「RepeatingGroup Job's List of Jobs count is 0」としておきます。

2.10. その他 All / Top3 シリーズの作成

次は「募集終了」となった Job 用の Reusable element を作成します。先ほど作成した List Bookmark Jobs All をコピーして「List Close Jobs All」を作成します。

「気になる！」のテキストを「募集終了」に修正します。

次に Repeating group の Data source を修正します。Do a search for から Type of content で「Job」を選択し、検索条件に「Client = List Close Jobs All's User」「Status = 募集終了」の2つを設定します。

「List Close Jobs All」をコピーして「List Close Jobs Top3」を作成します。

「Top3」は「All」で取得したデータをトップ3件のみに絞り込み、「→すべて表示する」Text をクリックすることで、全件を表示するためのページへ遷移する Workflow を作成します。

Repeating group の Data source で3件のみ取得するように「:items until #3」を追加します。

テキストを「→すべて表示する」として Text をひとつ配置して、This element is visible on page load のチェックを「オフ」にしておきます。取得したデータが 0件以上の場合に表示するように Conditional を設定しておきます。

「→すべて表示する」Text がクリックされたら、Go to page... するように Action だけ追加しておきます。Destination はページを作成後に設定します。

同じ要領で「契約した仕事」のリストである「List Contract Jobs All / List Contract Jobs Top3」、「応募中の仕事」のリストである「List Entry Jobs All / List Entry Jobs Top3」、「募集中の仕事」のリストである「List Offer Jobs All / List Offer Jobs Top3」を作成していきます。

異なる部分は、見出しなどのテキストの内容と、Repeating group の Data source です。以下に Data source の部分をキャプチャしたものを掲載しますので参考に上記６つの Reusable element を作成してください。

「契約した仕事」リストはワーカーが参照するリストです。契約した仕事は Contract Workers に自身の User type が登録されているかで判断します。

「応募中の仕事」リストもワーカーが参照するリストです。Entry Workers に自身の User type が登録されているかで判断します。また、契約済みの場合は応募中としてではなく「契約した仕事」に表示させるため、Contract Workers には登録されていないものである必要があります。