関連のツールの紹介、使い方などをやさしく説明しています。初期設定しようメッセージを送ろう「メッセージ送る」ボタンクリック「メッセージを終了する」ボタンクリックメッセージ終了しよう「キャンセル」ボタンクリック募集の詳細に遷移しようトップページに遷移しようログインしようindex画面を変更しよう次回bosyuさんもどきをBubbleで作ってみる!(初級者向け)~9:メッセージ画面を作ろう皆さん、こんにちは!Bubble初級者向け講座第2弾「bosyuさんもどきをBubbleで作ってみる!」第9回目はメッセージ画面を作成しましょう!この画面は、募集作成したユーザと応募したユーザとのメッセージを送信&確認する画面です。nosyu全体の機能内容や前提条件等はこちらをご覧ください。本シリーズのリンクもこちらに全てあります。blog.nocodelab.jp前回は応募一覧画面でした。応募一覧画面は、今回のメッセージ画面の遷移元画面でもあります。blog.nocodelab.jpメッセージ画面機能についてメッセージ画面は、募集作成ユーザと応募した人の1対1のメッセージのやりとりの確認ができます。今回の記事で出てくる画面です。メッセージ画面:nosyu-message募集画面:nosyuトップ画面:index今回の画面遷移です。詳細画面(nosyu)ログイン時メッセージ画面(nosyu-message)↓トップ画面(index)この画面は、詳細画面(nosyu)からの遷移と応募一覧画面(oubo-list)から遷移されてきます。メッセージ画面を作ろうそれではメッセージ覧画面を作っていきましょう。Screen」にしてください。「メッセージを終了する」ボタンをクリックした時に以下のようなポップアップを表示します。contentにはOuboDataを設定してください。遷移元で必ずOuboDataを渡すようにしましょう。画面項目についてまずは画面項目を見てみましょう。Groupメッセージ作成ユーザの画像:Imageメッセージ作成ユーザのニックネーム:Text現在日時~メッセージ作成日時の差分日時:diff-nowdateメッセージ内容:Textメッセージはありません:Textメッセージ入力欄表示:Groupメッセージ入力欄:MultilineInputメッセージ送るボタン:Buttonメッセージを終了するボタン:Buttonメッセージは終了しました:Text募集タイトル:Text応募日:Text募集ページを確認する:Text未ログイン時の表示内容:Groupメッセージ:TextTwitterでログインするボタン:Button募集が存在しない時の表示内容:Group存在しない旨のメッセージ:Textトップページへボタン:Button募集終了する時のポップアップ:Popupポップアップタイトル:Text終了するボタン:Buttonキャンセルするボタン:ButtonGroupは上の画像を参考に適宜行ってください。メッセージ情報、未ログイン時の表示内容、募集が存在しない時の表示内容はそれぞれ条件によって表示・非表示が決まりますので、今までと同じように必ずそれぞれGroupにわけ、Groupの表示条件を設定します。Content」というGroupを配置し、Header以外全てそのGroupの中に配置しています。Contentの表示条件は何もいれていません。補足が必要なエレメントを以下説明します。MessageContent」というGroupにまとめて配置します。このGroupには以下のような表示条件をつけます。メッセージ情報は、応募データに紐づいています。Userが応募したユーザまたはその応募した募集の作成者以外であれば表示させないようにします。ログインしていない場合も表示しないようにしていますが、応募ユーザ、募集作成ユーザに必ず一致しないので、なくても大丈夫です。応募ユーザの情報は、OuboDataのCreatorから取得します。OuboDataで取得できます。contentはMessageです。MessageはOuboDataで保持しているので、OuboDataから取得します。始めに応募するときはメッセージが未入力でも応募できましたね。filterでMessageが空ではないもののみにしましょう。作成日の昇順になるようにします。cellがMessageなので、そこから取得します。メッセージ作成ユーザはMessageのCreatorから取得できます。element「diff-nowdate」を使用しましょう。メッセージはありませんメッセージを入力せずに応募した場合、メッセージが存在しない場合があります。その時は、「メッセージはありません」というメッセージを表示させましょう。Groupのリストの件数が0の場合のみ表示させるようにします。Groupの中に配置しないように気をつけてください。メッセージ入力欄表示メッセージ入力欄、メッセージ送る、メッセージ終了するボタンは一つのGroupに配置しましょう。SendMessage」とします。メッセージ入力欄は、メッセージ終了していない場合のみ表示するようにします。OuboDataのisOuboStopのフラグで判定しましょう。応募するときはメッセージなしでもできましたが、ここではメッセージのやりとりがメインですので、必須入力にします。メッセージ送るボタンメッセージ送るボタンは、メッセージ入力の入力チェック(必須チェックだけですが)がvalidの場合にクリックできるようにしましょう。メッセージ終了するボタンメッセージ終了するボタンもメッセージ送る時と同様にメッセージ入力の入力チェックがvalidの場合のみクリックできるようにします。Userが募集の作成者である場合のみ表示にしましょう。メッセージは終了しましたメッセージが終了している場合のみ表示するようにします。Textだけでもよいですが、表示しない時に画面に表示場所すら見せないようにしたい場合はGroupにした方が良いです。hidden」にチェックを入れると高さを詰めてくれます。募集タイトル募集タイトルはOuboDataがNosyuを持っているので、そこから表示してください。フォーマットもしましょう。未ログイン時は、メッセージと「Twitterでログインする」ボタンを表示させます。これらを一つのGroupにします。Login」にします。表示条件は、ログインしていない時で、OuboDataが存在する時にします。応募が存在しない場合、メッセージと「トップページへ」ボタンを表示させましょう。NoData」にします。表示条件は、OuboDataが存在しない場合です。画面ができたところで、ワークフローを設定していきましょう。初期設定しようまずはページロードのイベントで初期値を設定していきます。この画面はログインユーザしかみれませんが、ログインされていない場合、ログインボタンを表示させるため、HeaderのisOnlyLoginはnoに設定します。Userが応募したユーザ又は募集作成したユーザではない場合、強制的にmypageに遷移するようにします。Step3は、募集作成したユーザが初めて応募を見た時にに未読から既読に変更するように更新処理を行います。未読と既読はnosyuではあくまで応募単位です。メッセージ単位ではないのでご注意ください。PageのOuboDataです。isAlreadyReadのフラグをyesに更新します。メッセージを送ろうこの画面のメインである、メッセージ送信処理を設定していきましょう。eventで共通のメッセージ送信処理を設定しましょう。yes/noを設定します。各Stepは以下のように設定します。応募ユーザへメール送信Step1ではMessageを新規登録し、Step2ではOuboDataのMessagesにStep1で作成したMessageを追加し、応募終了フラグ(isOuboStop)を更新します。listの項目に1つのデータを追加更新する場合は、「add」を使います。list」を使用します。Step4、Step5はメッセージ送信されたらお知らせするメールを送信します。Userではなく、メッセージを送る相手にメールを送信することに注意してください。Eventを作成し、それを呼びましょう。次はSendEmailMessageのワークフローです。Userを設定します。メッセージ送信先のUserを渡すようにします。メール内容は上の画像を参考に設定してみてください。whenに条件をつけましょう。eventでメッセージ送信処理ができたので、実際にボタンのワークフローを設定しましょう。eventのAddMessageを呼びます。thingはnoです。Step2で「メッセージ送信しました」Alertを表示させましょう。「メッセージを終了する」ボタンクリックメッセージ終了する時はポップアップを表示させて確認させてからメッセージ終了します。このボタンでは、メッセージ終了のポップアップを表示するだけです。メッセージ終了しようポップアップの「終了する」ボタンをクリックすることでメッセージ終了します。thingはyesです。Step3で「メッセージ送信しました」Alertを使って「メッセージを終了しました」というメッセージに変更してAlertを表示しましょう。「キャンセル」ボタンクリックポップアップのキャンセルボタンクリック時のワークフローは、ポップアップを非表示にしましょう。募集の詳細に遷移しよう「募集ページを確認する」をクリックしたら、nosyu画面へ遷移するようにします。ここではTextにワークフローを設定しましたが、Linkエレメントを使うとワークフローの設定はなくリンクできるので、そちらを使用しても良いでしょう。トップページに遷移しよう指定した応募が削除済みだったり、応募が未指定の場合、「トップページへ」ボタンを表示するようにしています。index画面に遷移するようにしています。ログインしよう未ログイン中は、「Twitterでログインする」ボタンを表示させています。nosyu画面と同様に、nosyu-message画面も動的URLになるため、この画面で実際にログインはできません。index画面を経由し、Twitterログイン、ログイン後、再度nosyu-message画面に戻ってくる、というようなあたかもこの画面でログインできているかのように見せるようにします。「bosyuさんもどきをBubbleで作ってみる!(初級者向け)~7:募集の詳細を作ろう2」により詳しく説明しているので、そちらをご参考ください。idをパラメータとして渡し、index画面に遷移します。nosyu-messege画面としてはここまでですが、index画面もまた対応せねばなりません。index画面も修正していきましょう。index画面を変更しようnosyu-message画面から遷移してきたら強制的にTwitterログインし、nosyu-message画面に遷移させるように対応していきましょう!これもnosyu画面時で対応したのとほぼ同じです。loadedで、nosyu-message画面からのパラメータが存在していることが条件のイベントを追加します。ここで、nosyu画面とnosyu-message画面からのパラメータ名は必ず異なる名称にしましょう!!パラメータ名によってどちらの画面から遷移してきたのかを判断させています。(もちろん画面名をパラメータにして判定しても良いですよ)各Stepは以下のように設定します。詳しい説明は「bosyuさんもどきをBubbleで作ってみる!(初級者向け)~7:募集の詳細を作ろう2」にも書いているので、そちらの記事をご覧ください。idから検索してOuboDataを送ります。通常のページロード時も修正しておきましょう。nosyu-message画面から遷移してきた場合もmypageに遷移しないよう条件をつけておきましょう。これでnosyu-message→index→nosyu-message画面でログインできるようになりました。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。