関連のツールの紹介、使い方などをやさしく説明しています。募集を更新しよう募集を削除しよう募集を終了しよう募集を公開しようTwitterに投稿しよう文字列をコピーしよう応募メッセージ画面へ遷移しようメニューを表示しようトップページに遷移しようログインしようindex画面を変更しよう次回bosyuさんもどきをBubbleで作ってみる!(初級者向け)~7:募集の詳細を作ろう2皆さん、こんにちは!Bubble初級者向け講座第2弾「bosyuさんもどきをBubbleで作ってみる!」第7回目は募集の詳細画面の続きです。前回では、OGPの設定方法や募集に対する応募までできるようになりました。処理について説明します。機能内容や前提条件等はこちらをご覧ください。本シリーズのリンクもこちらに全てあります。blog.nocodelab.jp前回の詳細画面その1はこちらです。詳細画面の仕様もこちらで説明していますので、こちらでご確認ください。blog.nocodelab.jp今回の記事はこんな内容を含んでいます。前回では、募集詳細と応募欄を表示させるようにしました。今回は、募集した人のみが見れる応募一覧部分について説明します。ここで表示させる項目はGroupに一つにまとめましょう。OuboList」という名称にしています。UserとNosyuのCreatorが同じ場合のみ表示するようにします。応募は公開済みのもしかできないので、公開されているかどうかも条件に入れます。hidden」にも必ずチェックしてください。専用のメニューも表示させます。募集終了メニューをクリックするとポップアップを表示します。募集削除メニューをクリックするときもポップアップを表示します。それでは、画面項目を詳しく見ていきましょう。OuboDataの検索した件数になります。更新アイコン募集終了されているときは更新させたくないので、更新のアイコンを非表示にするよう条件設定してください。NosyuDataのisNosyuStopがnoの場合のみ表示になります。メニューを表示させます。メニューはヘッダーのメニューと同様にGroupFocusを使用します。参照エレメントはメニューアイコンです。「募集を終了する」のメニューは募集終了している時は非表示にさせます。更新ボタンと同じ条件、NosyuDataのisNosyuStopがnoの場合のみ表示させます。Dateを表示させます。デフォルトだと英語の形式になっているので、フォーマットをお馴染みのyyyy/mm/ddにしましょう。他のフォーマットも可能ですので、お好きなように。elementにしています。名称は「TwitterArea」です。elementにする方法は以前お伝えしていますね。elementにしなくても大丈夫です。以下のように配置してください。Twitterに投稿するボタン:Buttonクリップボードのメッセージ:AlertURL:Inputクリップボードアイコン:IconこのURLはツイートした募集の詳細画面のURLです。id】なので、このように設定してください。URL」でhttps://~/までのホームアドレスが取得できます。DevelopでもLiveでも私たちは意識する必要はありません。urlでも大丈夫です。URLのInputはdisabledにしておいてください。Groupです)が0件の場合、「応募がありません」というメッセージを表示します。応募してきた人の一覧表示です。Groupを用います。OuboDataの一覧になり、条件は以下の条件です。応募者の情報は、OuboDataのCreatorからひっぱってこれますね。element「TwitterIcon」を利用します。Dateを表示しますが、フォーマットをyyyy/mm/ddにしています。応募メッセージ応募メッセージは応募一覧のOuboDataのMessageから取得できます。何件もある場合どれが表示されるか分からないので、いつのを表示させるか決めましょう。ここでは、一番初めの応募した時のメッセージを表示するようにします。itemのMessageを表示させればできます。応募停止メッセージ応募されたものを停止することができます。その時に表示させるメッセージです。OuboDataのisOuboStopがyesの場合のみ表示させましょう。募集再開ボタン募集終了されているときのみ表示するよう条件設定してください。NosyuDataのisNosyuStopがyesの場合のみ表示になります。最後に下書き状態の募集、未ログイン時、募集が存在しない場合の画面項目についてまとめて説明します。他の項目は特に表示条件はないので、画像を見て配置してください。ワークフロー設定それでは、詳細画面の残りのワークフローの設定を行いましょう!募集を更新しよう募集作成ユーザの場合、募集を更新することができます。実際には更新画面(nosyu-regist)で更新するのでここでのアクションは画面遷移のみです。応募一覧のGroupに更新アイコン、と下書き募集のGroupに募集内容を編集するボタンがありましたね。eventを作成し、共通化しましょう。パラメータに渡しましょう。nosyu-regist(遷移先)で、パラメータが渡されたら、NosyuDataを検索するようにしています。Key名は必ず双方同じにすることにご注意ください。eventが作成できたら、あとは実際の更新アイコン又はボタンのワークフローからこのイベントを呼べばO.K.です。募集を削除しよう募集作成したユーザは募集削除もこの画面でできます。「募集を削除する」メニューが2か所ありますね。募集を削除するメニューをクリックすると、削除ポップアップを表示するようにします。※メニューは2か所ですが、削除ポップアップは共通のものを利用します。この時、それぞれのメニューのGroupFocusを非表示することをお忘れなく。自動で非表示にはなりません。実際の削除は、ポップアップの「募集削除する」ボタンをクリックした時です。募集削除は物理削除にしています。削除するデータはNosyuData、OuboData、Messageです。削除したらNosyuDataがなくなるので、mypageへ遷移するようにします。eventにする必要はありません。things」を使用します。関連付けされているデータを削除する際は、順番に気をつけましょう。NosyuData、OuboData、Messageと3つのDataを削除しますが、例えば初めにNosyuDataを削除してしまうと、それに紐づくOuboDataが分からなくなります。削除する際は、関係性を考えて順番に気をつけて削除するようにしましょう。Contentを隠す処理ですが、削除すると「存在しません」のメッセージが表示されるので、それを表示させないために隠しています。Contentはヘッダーの下の画面項目全てを配置しているGroupです。Step6ではmypageに遷移する際、「delete」というパラメータを渡しています。mypageに遷移したとき「削除しました」というメッセージを表示するためにこのパラメータを渡しています。ポップアップ「キャンセル」ボタンのワークフローも追加しましょう。アクションはポップアップ自身を非表示にするのみです。募集を終了しよう「募集を終了する」メニューをクリックした場合も削除と同様、終了のポップアップをまずは表示させます。ポップアップの「募集を終了する」ボタンをクリックした時のに実際に募集終了させますが、NosyuDataのフラグを変更するのみです。募集終了した時は画面遷移はありません。この画面でメッセージを表示させます。メッセージは「応募しました」と同じエレメントを利用しています。message」にチェックをいれるとメッセージを変更することができるので、適当に変更しましょう。ポップアップ「キャンセル」ボタンのアクションは、削除ポップアップと同じくポップアップ自身を非表示にするのみです。募集を公開しよう下書き中の募集のみ、「募集を公開する」ボタンをクリックすると、下書きから公開に変更します。NosyuDataのフラグを変更するだけです。同じように、「応募しました」と同じエレメントを利用してメッセージを変更し表示させています。Twitterに投稿しようTwitterに投稿するには、Twitterが用意してくれているURLを使用します。シェアするリンク方法は色々ありますが、ここではBubbleのエレメントをシェアボタンにしています。シェアボタンをクリックすると、別ウィンドウを開くようにします。javascriptを利用します。dataから設定してください。このJavascriptでツイートできる画面が開き、その画面からツイートできるようになります。ちなみに、Twitterシェアボタンは、Twitterが提供しているHTMLを利用することも可能です(下記リンク参考)。HTMLエレメントに設定すればそのまま使えます。https://help.twitter.com/ja/using-twitter/twitter-buttons今回は、BubbleのButtonを利用したかったため、上記のTwitterの提供しているHTMLタグを利用せず、Javascriptを利用しました。文字列をコピーしようTwitterに投稿するボタンの下にアドレスとコピーボタンのアイコンがあります。そのアイコンをクリックすると、アドレスがクリップボードにコピーされます。Clipboard」というプラグインを利用してコピーします。clipboard」アクションを選択し、コピー内容を設定します。Step2では、コピーされました、というメッセージを表示させています。応募メッセージ画面へ遷移しよう応募一覧の各行をクリックすると、応募メッセージ一覧画面(nosyu-message)に遷移します。各行を一つのGroupにしてください。そのGroupのワークフローになります。cellのOuboDataを設定しましょう。contentに設定しておきましょう。メニューを表示しようメニューは公開用と下書き用とがありますが、それぞれのアイコンのワークフローにそれぞれのメニューのGroupFocusをShowアクションで表示させてください。トップページに遷移しよう指定した募集が削除済みだったり、募集が未指定の場合、「トップページへ」ボタンを表示するようにしています。index画面に遷移するようにしてください。ログイン中はmypage、未ログイン中はindexと条件をわけて遷移しても良いですね。ログインしよう未ログイン中は、「Twitterでログインする」ボタンを表示させています。ここで、一つ注意することがあります。Twitterログインを行う場合、コールバックURLの設定が必要になります。id】」をコールバックURLにしなければなりません。設定するのか?!詰んでしまった・・・?!と思うかもしれません!が、ちゃんと対応方法はあります!!以下の記事に詳しくは書いていますが、「Twitterログインアクションを行う画面を一つに決め、そこを経由する」です。blog.nocodelab.jpnosyuで「ログインアクションを行う画面」は、indexです。indexではすでにTwitteログインを行いましたね!なので、ここでは、indexに遷移だけさせましょう。それをすることで、あたかもnosyu画面でログインをし、再表示されるように見せることができます!ただ、画面遷移のチラつきは気になってしまうかもしれません・・・。スムーズに行ければよいですけど単純にログインだけではなく、またnosyu画面に戻ってくるようにします。idをパラメータに渡します。nosyuではこれで設定おしまいです。loadedイベントで行います。ページロードの条件にはパラメータがあるかどうかの条件もいれています。これでnosyu画面からきたことを判定しています。networkアクションでプロバイダをTwitter選択しているだけです。共通化するほどではないので、こちらはお好きにしてください。Step1では、ログインしていない時を条件にしていますが、パラメータ「denied」がないとき、という条件も含まれていることにお気づきでしょうか?これは今までどこにも出てきていないパラメータです。Twitterのパラメータなので。これは、ログインを拒否された場合に再度ログインしようとしないためです。ログインを拒否というは、初めて対象アプリでTwitterログインする場合、このアプリを認証してよいか?というTwitterの確認画面がでてきます。許可にするともちろんそのままログインになりますが、キャンセルにすると、ログインできません。このアプリではindex画面→Twitterログイン(Twitterの画面へ)→index画面という画面遷移が発生しています。今回、ページロードでTwitterログインを行うことにより、アプリ拒否しても無限ループのようにTwitterログインの画面に遷移してしまうのです。それを阻止するため、「denied」のパラメータを見るようにし、deniedがあればログイン拒否という判定でTwitterログインはしないようにしています。自動でログインするときは要注意しなければなりませんね。ページロードの条件にも追加しておきましょう。nosyu画面からのパラメータがない場合のみmypageに遷移するようにします。ちなみに、nosyu画面からログインする場合、初ログインの場合は、サインアップ画面に行きますが、今回はサインアップ後にnosyu画面に遷移するようにはしていません。parameters」にチェックいれると、その画面のパラメータ全て次の画面にも渡せるので利用すると良いでしょう。次回2回に渡って募集詳細画面の説明をしてきました。処理自体は複雑なものはないですが、一つの画面に多くの処理が入っていたため長くなってしまいましたね。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。