関連のツールの紹介、使い方などをやさしく説明しています。遷移しよう募集詳細画面へ遷移しよう応募メッセージ画面へ遷移しよう募集を削除しようキャンセルしようまとめbosyuさんもどきをBubbleで作ってみる!(初級者向け)~10:マイページを作ろう皆さん、こんにちは!Bubble初級者向け講座第2弾「bosyuさんもどきをBubbleで作ってみる!」も第10回目を迎えました!今回はマイページを作成しましょう!マイページはログイン後のトップページです。自分の募集や、応募情報を表示させます。nosyu全体の機能内容や前提条件等はこちらをご覧ください。本シリーズのリンクもこちらに全てあります。blog.nocodelab.jp前回はメッセージのやりとりを行う画面でした。blog.nocodelab.jpマイページ機能についてマイページでは情報表示が主になっています。募集の削除機能マイページの画面遷移マイページでは情報表示以外にも他画面への遷移も行っています。今回の記事で出てくる画面です。マイページ:mypage募集作成画面:nosyu-regist募集詳細画面:nosyuメッセージ画面:nosyu-message画面遷移も以下に示します。応募一覧をクリック↓nosyu-message:メッセージ画面へ遷移マイページを作ろうそれではマイページ覧画面を作っていきましょう。Screen」にしてください。削除アイコンをクリックすると、下のポップアップを表示します。※削除アイコンは上の画像では隠れてしまっていますが、「下書き」と同じ場所に表示されます(同時に表示されることはありません)画面項目について画面項目について詳しくみてみましょう。Content」という横1200pxのGroupを作っていて、その中に適宜Groupを配置しています。各項目について補足しておきます。メールアドレス認証未確認メッセージメール認証が未確認の場合、このメッセージを表示させます。Userのemail_confirmedから判定します。メッセージ内容は以下のようにしています。「こちら」の部分は下線で、リンクにしています。リンク先は、プロフィール画面になっています。editor」を利用する便利ですよ。募集一覧カレントユーザが作成した募集のみ表示させます。募集の作成日降順にしています。XX人が応募しています募集単位で、何人応募しているか表示させます。応募人数は、OuboDataから検索して表示させます。下書きの状態はこのテキスト自体を非表示にし、応募人数が0の場合は表示する内容を「まだ応募がありません」に変更しています。下書き「下書き」は、下書きのときのみ表示するようにしてください。Conditionalで、NosyuDataのisPublicがnoのときのみ表示するようにしてください。load」のチェックは外してください。ゴミ箱アイコンゴミ箱アイコンは公開されている募集のみ表示させます。Conditionalで、NosyuDataのisPublicがyesのときのみ表示するようにしてください。load」のチェックは外してください。している募集は、OGP画像の上にGroup+Textで網掛けと「募集停止」の文言を表示させます。angle」を設定します。募集はありませんメッセージ募集一覧が0件の場合のみ表示させます。応募一覧タイトル応募一覧のタイトルには「新着応募(【未読の応募数】)」と表示させます。未読の応募数は、OuboDataのIsAlreadyReadがnoになっていて、かつ、募集が自分で作成したもののcountで取得できます。OuboDataにNosyuDataを持っていますので、さらにNosyuDataを検索し、「in」を使って条件にします。その時のNosyuDataの検索条件は以下の画像のようにします。応募一覧カレントユーザが作成した募集に対しての応募の一覧です。応募停止しているものは省きます。NosyuDataのinの条件は以下のようになります。未読アイコン応募がまだ未読だった場合、アイコンを表示させます。OuboDataのIsAlreadyReadがnoの場合のみ表示させるようにしましょう。XXXXさんから応募がありました【XXXX】の部分は、応募者のニックネームを表示させます。応募がありませんメッセージ応募が0件の場合に表示させます。削除ポップアップ募集削除する時、確認処理をいれるため、ポップアップを表示させます。ContentにNosyuDataを設定させてください。NosyuDataの表示もしないのになぜか?なぜなら削除処理対象のNosyuDataを知るためです。stateに設定するようにしても良いと思います。画面ができたところで、ワークフローを設定していきましょう。初期設定まずはページロードのイベントで初期値を設定していきます。Step1では、この画面はログインユーザのみ表示するため、HeaderのisOnlyLoginはyesに設定します。Step2、Step3ではAlertメッセージを表示させます。Step2では、nosyu画面で募集を削除すると、mypageに遷移しますが、その時にのみ「削除しました」というAlertを出します。遷移前の画面から「delete」というパラメータを渡されているかどうかで判定します。ちなみにnosyu画面の削除については以下の記事に記しています。blog.nocodelab.jpStep3では、削除ではなく、signup画面から登録処理をした場合、mypage画面に遷移し、「登録しました」というAlertメッセージを表示させます。ちなみにsignup画面については以下の記事に記しています。blog.nocodelab.jp募集作成画面へ遷移しよう募集をつくるボタンをクリックすると、募集作成画面(nosyu-regist)へ遷移するようにしましょう。募集詳細画面へ遷移しよう募集一覧の各行をクリックすると、対象募集の詳細画面(nosyu)へ遷移させます。応募メッセージ画面へ遷移しよう応募一覧の各行をクリックすると、対象応募メッセージ画面(nosyu-message)へ遷移させます。募集を削除しようnosyu画面でも募集削除できましたが、mypageでも削除のみできるようになっています。募集一覧部分の削除アイコンから削除できます。アイコンをクリックされたらポップアップを表示します。dataアクションを選択し、選択された行のNosyuDataを設定しましょう。ActionsのGroupにあります。contentにNosyuDataを設定しましたね。dataで、それの中身が設定できます!設定すると、NosyuDataにアクセスできるようになります。dataというのもありますが、こちらは初期化されます。それでは実際に削除しましょう。ポップアップの「募集削除する」ボタンをクリックしたら削除します。関連しているデータを削除するときは、削除する順番に気をつけましょう。詳細画面(nosyu)でも削除処理を行いましたが、DB削除の部分だけみると、同じなので、この部分のみ共通化しても良いですね。eventを設定することで対応できます。eventを呼ぶことができます。キャンセルしようポップアップのキャンセルボタンをクリックするとポップアップを非表示にします。Hideのアクションで行います。(当初の予定とは順番等若干違いますけど・・・)次回、最後の画面です!お楽しみに。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。