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

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

blog.nocodelab.jp

前回の第3回では、トップページとサインアップ周り、プロフィール画面を作成しました。今回は、ヘッダーやメニュー、その他非ユーザーの閉め出し処理を行う Reusable element を作成していきたいと思います。

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

1. Header
2. Menu
3. profile ページの修正
次回
コンテンツ

今回作成する Reusable elements は、下図の Header と Menu の大きく2つですが、Header の中にはいくつか別の Reusable elements を持っているため、全部で６つ作成します。

名前	詳細
Header	各ページ共通で表示するヘッダー（一部ページを除く）。ログインしている場合はユーザーアイコンなどを表示し、未ログインの場合は signup、login ページへの誘導を行う。
Menu	各ページ共通で表示するメニュー（一部ページを除く）。ワーカー用とクライアント用のメニューがあり、ワンクリックで表示を切り替える。
Check Initial setting	初期登録済みかを確認する。初期登録が終わっていないユーザーは initial ページへ強制遷移させる内部処理を行うための Reusable element。
Check Login	未ログインユーザーの場合は、ログインページへ強制遷移させる。Check Initial setting と同様に内部処理を行う。
Notice	お知らせ（notice）ページへ遷移する。もし未読のお知らせがあればバッジを表示する。
User Icon S	指定したユーザーのアイコン画像を表示する。第2回で作成した User Icon L のミニ版。

● Header の中で使用している Reusable elements

では、順番に作成していきます。

1. Header

「Header」の出来上がりは以下の図のようなイメージです。

New reusable element で「Header」と入力し CREATE します。

Layout の Container layout で「Align to parent」を選択し、Max width を「1000」に、Min height を「55」に設定しておきます。

アプリのタイトルテキストを作成し、右寄りに配置させます。

次に、未ログイン版を作成します。「Row」の Group を１つ作成して、左寄りに配置します。This element is visible on page load のチェックを「オフ」にして、Condirional で「Current User is logged out」の時に、This element is visible になるように設定します。Group 名前は「Group Logout User」としました。

次に「会員登録する」と「ログイン」ボタンを作成します。「ログイン」は、Icon と Text を Column の Group でまとめて作成しています。

ログイン済みのエリアを作成してきます。Group Logout User と重ねて作成していくので、Element tree を利用して Group Logout User は非表示状態にしておきましょう。

先ほどと同じように、今度は「Group Login User」を作成します。

Group Login User の中に、Current User's Name を表示した Text と、▼ マークの Icon を配置して Group でまとめます。

次に ▼ がクリックされたら、メニューが表示されるように Layout が Column の GroupFocus を1つ配置します。Group Focus の中には、Profile ページへ遷移する Text とログアウトを作成しておきます。Profile の Text には「Page Title」Option sets の Display を使用しています。

Group Focus の Reference element には ▼マークを選択して、 Offset top を「12」、Offset left を「-120」ぐらいにして、ちょうどヘッダーの下辺りに表示されるように設定します。

User Icon と Notice については作成後に追加するので、一旦ここまでの Workflow を作成していきましょう。

サイトタイトルがクリックされたら未ログインユーザーの場合は「index」に遷移するようにします。Event の Only when を「Current User is logged out」として、Go to page index の Action を追加しておきます。

ログインしている場合は、ユーザーのダッシュボード（dashboard）へ遷移するように作成します。（dashboard は作成後に追加するので、空欄でおいておきます。）

次に「会員登録」がクリックされたら、signup ページへ、「ログイン」がクリックされたら、login ページへ遷移するように設定します。

ユーザー情報をまとめている Group がクリックされたら、GroupFocus のメニューを Show するように設定します。

メニューの「プロフィール編集」がクリックされたら profile ページへ、「ログアウト」がクリックされたら「Log the user out」して、login ページへ遷移させます。

Header は一旦ここまでです。

1.1. Check Initial setting

「Check Initial setting」は、アカウントとして登録している User type の Slag が未登録であった場合に、強制で initial ページへ遷移させる Reusable element です。サインアップだけして、離脱してしまったユーザーは、次回ログイン時に Slug が未登録のまま dashboard ページへ遷移されてしまうので、この Reusable element でチェックして登録を促します。

Group の Width と Height を「10」で設定し、Roundness を「5」にして丸い形にします。Background color もお好みで設定してください。

今回のサンプルでは、分かりやすいように視覚的にも見える程度の Element として作成しましたが、Workflow 自体は内部処理となるため、縦横 1px 程度のものでも問題ありません。

Workflow を設定します。Slug が未登録のログインユーザーに対して強制遷移を行いたいので、「User is logged in」の Event を作成し、Only when に「Current User's Slug is empty」と追加します。

Go to page … の Action を追加して、Destination に「initial」を設定します。

次に未ログインユーザーの場合に閉め出し処理を行う「Check Login」を作成していきます。「Check Initial setting」を Clone form して、Element nameを「Check Login」とします。

「Check Initial setting」と区別できるように Background color を違うものに変更しておきます。ここでは水色からオレンジに変更しました。

Workflow を作成します。今回のサンプルでは閉め出し処理を行いたいページとそうでないページがあるため「:filtered」を使用して Workflow が実行されるユーザーの絞り込みを行います。

絞り込みの判断は「Page Title」Option set's の「Login Check」という attribute で設定していて、Header なしのページ（initila）や、非ユーザーでも閲覧できる必要があるページ（job,jobs,worker,client ...etc）などは、この閉め出し処理から除外します。

「User is logged out」の Only when で、「Page Title」Option set の「All options」を選択し、「:filtered」の Constraint: で「This Page Title's Login Check」と絞り込みを行います。次に Current Page name が、絞り込みを行った Page Title の「Page name」に含まれるか？（constrain）を設定します。

上記の条件を順に指定していくと「All Page Title:filtered's Page name contains Current page name」となります。

条件が設定できたら Step1 で「login」へ Go to page... しておきましょう。

1.3. Notice

次に「Notice」を作成します。Element name を「Notice」として CREATE します。

Group の Type of content を「User」、サイズの縦横を「35」とします。

Ionic Icon を配置して、色などをお好みに設定します。

未読のお知らせがある場合はバッジが表示されるように、Shape を配置してサイズなどを整えて、This element is visible on page load のチェックを「オフ」にしておきます。

次にバッジの表示非表示を切り替える Condirional を設定します。ユーザーのお知らせは User type の「Notice」field で管理していて、未読か既読かの判断は Notice type の「isRead」field で行います。

バッジの Shape に対して設定する Conditional は、この Reusable element の Type of content で指定した User type の Notice field を参照したいので「Notice's User's Notice」となり、「:filter」で「isRead = "no"」として絞り込みを行ってから、「:count > 0 」として、0件以上のデータがある場合は、This element is visible としてあげます。

Workflow では、Icon がクリックされた時に、Go to page ... するように設定しておきます。Destination は notice ページ作成後に設定します。

1.4. User Icon S

「User Icon S」は、前回の User Icon L をコピーして作成します。Clone from で「User Icon L」を指定し、Element name を「User Icon S」とします。

Icon の Width/Height 、Roundness を調整してサイズを小さくしておきます。

1.5. Header の仕上げ

ここまで出来たら、Header の中に作成した Reusable elements を追加しておきます。

Check Initial setting と Check Login は、サイトタイトルの Text を Row の Group でラップして、その中に配置しておきます。 Notice と User Icon S は、Group Login User の中に入れて、それぞれの Data source に「Current User」をセットしておきます。

次に Menu を作成していきます。出来上がりは下図のような状態です。

まずは「Menu」という名前で CREATE します。

Background color を設定して、Container layout を「Column」にしておきます。Width for UI builder を「1200」、Min height を「35」に設定します。

クライアント用のメニューから作成していきます。 Group をひとつ配置して、名前を「Group Client」としておきます。Container type は「Row」にして、Container alignment を「Space between」にしておきます。This element is visible on page load のチェックを「オフ」にして、Collapse when hidden のチェックを「オン」にします。Animate the collapse operarion のチェックを「オン」にして、クライアントとワーカーのメニューの切り替えが行われる際に「Slide Up/Down」されるアニメーションを指定しておきます。

visible される条件には「Current User is logged in and Current User's View type is client」として、ログイン済みで、かつ Current User の View type の値が client で指定されている場合としておきます。

クライアントのメニューリンクは「マイページ」「新しい仕事を作成」「仕事管理」「契約ワーカー」の４つ作成していきます。

Group Client 内に「Row」の Group をひとつ追加して、その中に Text を4つ追加していきます。「Page title」Option set から、それぞれのページの Display を取得し Text に設定します。次に Current page name と Page name が一致した場合は、アンダーラインが表示されるように、各 Text の Conditional を設定しておきます。