bosyuさんもどきをBubbleで作ってみる！（初級者向け）～１０：マイページを作ろう
皆さん、こんにちは！
Bubble初級者向け講座第２弾「bosyuさんもどきをBubbleで作ってみる！」も第１０回目を迎えました！今回はマイページを作成しましょう！
マイページはログイン後のトップページです。自分の募集や、応募情報を表示させます。
nosyu全体の機能内容や前提条件等はこちらをご覧ください。 本シリーズのリンクもこちらに全てあります。
前回はメッセージのやりとりを行う画面でした。
マイページ機能について
マイページでは情報表示が主になっています。
機能ポイント
- カレントユーザが作成した募集の一覧を表示
- カレントユーザが作成した募集への応募一覧を表示
- 募集の削除機能
マイページの画面遷移
マイページでは情報表示以外にも他画面への遷移も行っています。
今回の記事で出てくる画面です。
- マイページ：mypage
- 募集作成画面：nosyu-regist
- 募集詳細画面：nosyu
- メッセージ画面：nosyu-message
画面遷移も以下に示します。
募集をつくる
↓
nosyu-regist：募集作成画面へ遷移募集一覧をクリック
↓
nosyu：詳細画面へ遷移応募一覧をクリック
↓
nosyu-message：メッセージ画面へ遷移
マイページを作ろう
それではマイページ覧画面を作っていきましょう。
画面サイズは、毎回おなじみの横：1200pxとし、「Make this element fixed-width」のチェックは外し、 「Preset page width」を「Full Screen」にしてください。
削除アイコンをクリックすると、下のポップアップを表示します。
※削除アイコンは上の画像では隠れてしまっていますが、「下書き」と同じ場所に表示されます（同時に表示されることはありません）
画面項目について
画面項目について詳しくみてみましょう。
- 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から判定します。
メッセージ内容は以下のようにしています。
「こちら」の部分は下線で、リンクにしています。リンク先は、プロフィール画面になっています。
直接タグを囲んでもできますが、「Rich text editor」を利用する便利ですよ。
募集一覧
カレントユーザが作成した募集のみ表示させます。
募集の作成日降順にしています。
XX人が応募しています
募集単位で、何人応募しているか表示させます。
応募人数は、OuboDataから検索して表示させます。
ただし、まだ下書きの状態はこのテキスト自体を非表示にし、応募人数が0の場合は表示する内容を「まだ応募がありません」に変更しています。
下書き
「下書き」は、下書きのときのみ表示するようにしてください。
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で網掛けと「募集停止」の文言を表示させます。
テキストを傾かせるには、「Rotation angle」を設定します。
まだ募集はありませんメッセージ
募集一覧が0件の場合のみ表示させます。
応募一覧タイトル
応募一覧のタイトルには「新着応募（【未読の応募数】）」と表示させます。 未読の応募数は、OuboDataのIsAlreadyReadがnoになっていて、かつ、募集が自分で作成したもののcountで取得できます。
OuboDataにNosyuDataを持っていますので、さらにNosyuDataを検索し、「in」を使って条件にします。その時のNosyuDataの検索条件は以下の画像のようにします。
応募一覧
カレントユーザが作成した募集に対しての応募の一覧です。
応募停止しているものは省きます。
NosyuDataのinの条件は以下のようになります。
未読アイコン
応募がまだ未読だった場合、アイコンを表示させます。
OuboDataのIsAlreadyReadがnoの場合のみ表示させるようにしましょう。
XXXXさんから応募がありました
【XXXX】の部分は、応募者のニックネームを表示させます。
まだ応募がありませんメッセージ
応募が0件の場合に表示させます。
削除ポップアップ
募集削除する時、確認処理をいれるため、ポップアップを表示させます。
ポップアップの表示内容自体は画像に載っているように配置すれば大丈夫ですが、Type of ContentにNosyuDataを設定させてください。
NosyuDataの表示もしないのになぜか？
なぜなら削除処理対象のNosyuDataを知るためです。
Custom stateに設定するようにしても良いと思います。
ワークフロー設定
画面ができたところで、ワークフローを設定していきましょう。
初期設定
まずはページロードのイベントで初期値を設定していきます。
Step1では、この画面はログインユーザのみ表示するため、HeaderのisOnlyLoginはyesに設定します。
Step2、Step3ではAlertメッセージを表示させます。
Step2では、nosyu画面で募集を削除すると、mypageに遷移しますが、その時にのみ「削除しました」というAlertを出します。
遷移前の画面から「delete」というパラメータを渡されているかどうかで判定します。 ちなみにnosyu画面の削除については以下の記事に記しています。
Step3では、削除ではなく、signup画面から登録処理をした場合、mypage画面に遷移し、「登録しました」というAlertメッセージを表示させます。
ちなみにsignup画面については以下の記事に記しています。
募集作成画面へ遷移しよう
募集をつくるボタンをクリックすると、募集作成画面（nosyu-regist）へ遷移するようにしましょう。
募集詳細画面へ遷移しよう
募集一覧の各行をクリックすると、対象募集の詳細画面（nosyu）へ遷移させます。
応募メッセージ画面へ遷移しよう
応募一覧の各行をクリックすると、対象応募メッセージ画面（nosyu-message）へ遷移させます。
募集を削除しよう
nosyu画面でも募集削除できましたが、mypageでも削除のみできるようになっています。
募集一覧部分の削除アイコンから削除できます。
まずは、アイコンをクリックされたらポップアップを表示します。
Step1でポップアップを表示すためのShowアクション、Step2で、Display dataアクションを選択し、選択された行のNosyuDataを設定しましょう。
Display dataはElement ActionsのGroupにあります。ポップアップのType of contentにNosyuDataを設定しましたね。Display dataで、それの中身が設定できます！設定すると、NosyuDataにアクセスできるようになります。ちなみにReset dataというのもありますが、こちらは初期化されます。
それでは実際に削除しましょう。
ポップアップの「募集削除する」ボタンをクリックしたら削除します。
| Step | Action | 処理内容 | 設定内容 |
|---|---|---|---|
| Step1 | Delete a list of things | Message削除 |  |
| Step2 | Delete a list of things | OuboData削除 |  |
| Step3 | Delete thing | NosyuData削除 |  |
| 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を呼ぶことができます。
キャンセルしよう
ポップアップのキャンセルボタンをクリックするとポップアップを非表示にします。Hideのアクションで行います。
これで、マイページが一通りできました！！
まとめ
マイページまで終わり、 早いもので、あとは残すところプロフィール画面のみとなりました！！ （当初の予定とは順番等若干違いますけど・・・）
次回、最後の画面です！お楽しみに。
ここまで読んでいただきありがとうございました！