ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

bosyuさんもどきをBubbleで作ってみる!(初級者向け)~10:マイページを作ろう

f:id:korokoro-vc:20200604201053p:plain

bosyuさんもどきをBubbleで作ってみる!(初級者向け)~10:マイページを作ろう

皆さん、こんにちは!

Bubble初級者向け講座第2弾「bosyuさんもどきをBubbleで作ってみる!」も第10回目を迎えました!今回はマイページを作成しましょう!

マイページはログイン後のトップページです。自分の募集や、応募情報を表示させます。

nosyu全体の機能内容や前提条件等はこちらをご覧ください。 本シリーズのリンクもこちらに全てあります。

blog.nocodelab.jp

前回はメッセージのやりとりを行う画面でした。

blog.nocodelab.jp

マイページ機能について

マイページでは情報表示が主になっています。

機能ポイント

  • カレントユーザが作成した募集の一覧を表示
  • カレントユーザが作成した募集への応募一覧を表示
  • 募集の削除機能

マイページの画面遷移

マイページでは情報表示以外にも他画面への遷移も行っています。

今回の記事で出てくる画面です。

  • マイページ:mypage
  • 募集作成画面:nosyu-regist
  • 募集詳細画面:nosyu
  • メッセージ画面:nosyu-message

画面遷移も以下に示します。

  • 募集をつくる

    nosyu-regist:募集作成画面へ遷移

  • 募集一覧をクリック
     ↓
    nosyu:詳細画面へ遷移

  • 応募一覧をクリック
     ↓
    nosyu-message:メッセージ画面へ遷移

マイページを作ろう

それではマイページ覧画面を作っていきましょう。

画面サイズは、毎回おなじみの横:1200pxとし、「Make this element fixed-width」のチェックは外し、 「Preset page width」を「Full Screen」にしてください。

f:id:korokoro-vc:20200603143105j:plain

削除アイコンをクリックすると、下のポップアップを表示します。
※削除アイコンは上の画像では隠れてしまっていますが、「下書き」と同じ場所に表示されます(同時に表示されることはありません)

f:id:korokoro-vc:20200603143537j:plain

画面項目について

画面項目について詳しくみてみましょう。

  • Header
  • 削除しました:Alert
  • メールアドレス認証未確認メッセージ:Text
  • キャッチフレーズ:Text
  • 募集つくる:Button
  • 募集情報:Group
    • 募集一覧タイトル:Text
    • 募集一覧:Repeating Group
      • 募集タイトル:Text
      • XX人が応募しています:Text
      • 募集作成日:Text
      • 募集OGP画像:Image
      • 募集停止:Group
        • 募集停止:Text
      • 下書き:Text
      • 削除アイコン:Icon
    • まだ募集はありませんメッセージ:Text
  • 応募情報:Group
    • 応募一覧タイトル:Text
    • 応募一覧:Repeating Group
      • 募集タイトル:Text
      • 応募者画像:Image
      • 未読アイコン:Icon
      • XXXXさんから応募がありました:Text
      • 応募日:Text
    • まだ応募がありませんメッセージ:Text
  • 募集削除のポップアップ:Popup
    • ポップアップのタイトル:Text
    • ポップアップの説明:Text
    • 募集削除するボタン:Button
    • キャンセルボタン:Button

毎度おなじみですが、Headerの下に「Group Content」という横1200pxのGroupを作っていて、その中に適宜Groupを配置しています。

各項目について補足しておきます。

メールアドレス認証未確認メッセージ

メール認証が未確認の場合、このメッセージを表示させます。

表示条件は、Current Userのemail_confirmedから判定します。

f:id:korokoro-vc:20200603152543p:plain

メッセージ内容は以下のようにしています。

f:id:korokoro-vc:20200603152828p:plain

「こちら」の部分は下線で、リンクにしています。リンク先は、プロフィール画面になっています。
直接タグを囲んでもできますが、「Rich text editor」を利用する便利ですよ。

募集一覧

カレントユーザが作成した募集のみ表示させます。

f:id:korokoro-vc:20200603171550p:plain

募集の作成日降順にしています。

XX人が応募しています

募集単位で、何人応募しているか表示させます。
応募人数は、OuboDataから検索して表示させます。

f:id:korokoro-vc:20200603153649p:plain

ただし、まだ下書きの状態はこのテキスト自体を非表示にし、応募人数が0の場合は表示する内容を「まだ応募がありません」に変更しています。

f:id:korokoro-vc:20200603154035p:plain

下書き

「下書き」は、下書きのときのみ表示するようにしてください。
Conditionalで、NosyuDataのisPublicがnoのときのみ表示するようにしてください。
「This element is visible on page load」のチェックは外してください。

ゴミ箱アイコン

ゴミ箱アイコンは公開されている募集のみ表示させます。
Conditionalで、NosyuDataのisPublicがyesのときのみ表示するようにしてください。
「This element is visible on page load」のチェックは外してください。

OGP画像

ここでは、OGPの画像のサイズは固定にしていますので、 Appearanceの「Make this element fixed-width」にチェックを入れます。

募集停止

募集停止している募集は、OGP画像の上にGroup+Textで網掛けと「募集停止」の文言を表示させます。

f:id:korokoro-vc:20200603160606p:plain

テキストを傾かせるには、「Rotation angle」を設定します。

f:id:korokoro-vc:20200603161630j:plain

まだ募集はありませんメッセージ

募集一覧が0件の場合のみ表示させます。

f:id:korokoro-vc:20200603161900p:plain

応募一覧タイトル

応募一覧のタイトルには「新着応募(【未読の応募数】)」と表示させます。 未読の応募数は、OuboDataのIsAlreadyReadがnoになっていて、かつ、募集が自分で作成したもののcountで取得できます。

f:id:korokoro-vc:20200603172107p:plain

OuboDataにNosyuDataを持っていますので、さらにNosyuDataを検索し、「in」を使って条件にします。その時のNosyuDataの検索条件は以下の画像のようにします。

f:id:korokoro-vc:20200604090455p:plain

応募一覧

カレントユーザが作成した募集に対しての応募の一覧です。
応募停止しているものは省きます。 f:id:korokoro-vc:20200604095833p:plain

NosyuDataのinの条件は以下のようになります。

f:id:korokoro-vc:20200604100211p:plain

未読アイコン

応募がまだ未読だった場合、アイコンを表示させます。
OuboDataのIsAlreadyReadがnoの場合のみ表示させるようにしましょう。

XXXXさんから応募がありました

【XXXX】の部分は、応募者のニックネームを表示させます。

f:id:korokoro-vc:20200604203129p:plain

まだ応募がありませんメッセージ

応募が0件の場合に表示させます。

f:id:korokoro-vc:20200604110114p:plain

削除ポップアップ

募集削除する時、確認処理をいれるため、ポップアップを表示させます。
ポップアップの表示内容自体は画像に載っているように配置すれば大丈夫ですが、Type of ContentにNosyuDataを設定させてください。

f:id:korokoro-vc:20200604162931p:plain

NosyuDataの表示もしないのになぜか?
なぜなら削除処理対象のNosyuDataを知るためです。
Custom stateに設定するようにしても良いと思います。

ワークフロー設定

画面ができたところで、ワークフローを設定していきましょう。

初期設定

まずはページロードのイベントで初期値を設定していきます。

f:id:korokoro-vc:20200604135925p:plain

Step1では、この画面はログインユーザのみ表示するため、HeaderのisOnlyLoginはyesに設定します。

Step2、Step3ではAlertメッセージを表示させます。
Step2では、nosyu画面で募集を削除すると、mypageに遷移しますが、その時にのみ「削除しました」というAlertを出します。

f:id:korokoro-vc:20200604140423p:plain

遷移前の画面から「delete」というパラメータを渡されているかどうかで判定します。 ちなみにnosyu画面の削除については以下の記事に記しています。

blog.nocodelab.jp

Step3では、削除ではなく、signup画面から登録処理をした場合、mypage画面に遷移し、「登録しました」というAlertメッセージを表示させます。

f:id:korokoro-vc:20200604141643p:plain

ちなみにsignup画面については以下の記事に記しています。

blog.nocodelab.jp

募集作成画面へ遷移しよう

募集をつくるボタンをクリックすると、募集作成画面(nosyu-regist)へ遷移するようにしましょう。

募集詳細画面へ遷移しよう

募集一覧の各行をクリックすると、対象募集の詳細画面(nosyu)へ遷移させます。

f:id:korokoro-vc:20200604143133p:plain

応募メッセージ画面へ遷移しよう

応募一覧の各行をクリックすると、対象応募メッセージ画面(nosyu-message)へ遷移させます。

f:id:korokoro-vc:20200604143248p:plain

募集を削除しよう

nosyu画面でも募集削除できましたが、mypageでも削除のみできるようになっています。

募集一覧部分の削除アイコンから削除できます。
まずは、アイコンをクリックされたらポップアップを表示します。

f:id:korokoro-vc:20200604163328p:plain

Step1でポップアップを表示すためのShowアクション、Step2で、Display dataアクションを選択し、選択された行のNosyuDataを設定しましょう。

Display dataはElement ActionsのGroupにあります。ポップアップのType of contentにNosyuDataを設定しましたね。Display dataで、それの中身が設定できます!設定すると、NosyuDataにアクセスできるようになります。ちなみにReset dataというのもありますが、こちらは初期化されます。

それでは実際に削除しましょう。

ポップアップの「募集削除する」ボタンをクリックしたら削除します。

f:id:korokoro-vc:20200604183406p:plain

Step Action 処理内容 設定内容
Step1 Delete a list of things Message削除 f:id:korokoro-vc:20200604190902p:plain
Step2 Delete a list of things OuboData削除 f:id:korokoro-vc:20200604191105p:plain
Step3 Delete thing NosyuData削除 f:id:korokoro-vc:20200604191214p:plain
Step4 Hide 削除のポップアップを非表示
Step5 Show message 削除しましたメッセージ表示

関連しているデータを削除するときは、削除する順番に気をつけましょう。
詳細画面(nosyu)でも削除処理を行いましたが、DB削除の部分だけみると、同じなので、この部分のみ共通化しても良いですね。

ちなみに画面をまたいでワークフローを共通化する方法としては、Reusable elementにCustom eventを設定することで対応できます。 Reusable elementは普通にCustom eventを生成し、呼び出し元の画面からは、 Custom EventsのTrigger a custom event from a reusable elementよりReusable elementのCustom eventを呼ぶことができます。

f:id:korokoro-vc:20200604193808j:plain

キャンセルしよう

ポップアップのキャンセルボタンをクリックするとポップアップを非表示にします。Hideのアクションで行います。

これで、マイページが一通りできました!!

まとめ

マイページまで終わり、 早いもので、あとは残すところプロフィール画面のみとなりました!! (当初の予定とは順番等若干違いますけど・・・)

次回、最後の画面です!お楽しみに。

blog.nocodelab.jp

ここまで読んでいただきありがとうございました!