bosyuさんもどきをBubbleで作ってみる！（初級者向け）～７：募集の詳細を作ろう２
皆さん、こんにちは！
Bubble初級者向け講座第２弾「bosyuさんもどきをBubbleで作ってみる！」第７回目は募集の詳細画面の続きです。
前回では、OGPの設定方法や募集に対する応募までできるようになりました。 今回はそれ以外の募集停止、削除、公開等他の処理について説明します。
機能内容や前提条件等はこちらをご覧ください。 本シリーズのリンクもこちらに全てあります。
前回の詳細画面その１はこちらです。
詳細画面の仕様もこちらで説明していますので、こちらでご確認ください。
今回の記事はこんな内容を含んでいます。
- データの削除
- 動的URLからTwitterログインする方法
- URLツイート方法
募集詳細画面を作ろう
早速詳細画面の続きを行うことにしましょう！！
応募一覧の画面項目
前回では、募集詳細と応募欄を表示させるようにしました。 今回は、募集した人のみが見れる応募一覧部分について説明します。
ここで表示させる項目はGroupに一つにまとめましょう。ここでは「Group OuboList」という名称にしています。
条件は、上の画像にもあるとおり、Current UserとNosyuのCreatorが同じ場合のみ表示するようにします。
さらに、応募は公開済みのもしかできないので、公開されているかどうかも条件に入れます。
忘れずにページロードは非表示にし、「Collapse this element's height when hidden」にも必ずチェックしてください。
専用のメニューも表示させます。
募集終了メニューをクリックするとポップアップを表示します。
募集削除メニューをクリックするときもポップアップを表示します。
それでは、画面項目を詳しく見ていきましょう。
- 応募人数：Text
- 更新アイコン：Icon
- メニューアイコン：Icon
- 募集作成日：Text
- Twitterに投稿：TwitterArea
- 応募一覧タイトル：Text
- 応募がありません：Text
- 応募一覧：Repeating Group
- 応募者の画像：Image
- 応募者のニックネーム：Text
- 応募日：Text
- 応募者のTwitterアイコン：TwitterIcon
- 応募メッセージ：Text
- メッセージの終了コメント：Text
- 募集を再開するボタン：Button
- メニュー：GroupFocus
- 募集を終了するメニュー：Text
- 募集を削除するメニュー：Text
- 募集終了のポップアップ：Popup
- ポップアップのタイトル：Text
- ポップアップの説明：Icon＋Text
- 募集を終了するボタン：Button
- キャンセルボタン：Button
- 募集削除のポップアップ：Popup
- ポップアップのタイトル：Text
- ポップアップの説明：Icon＋Text
- 募集を削除するボタン：Button
- キャンセルボタン：Button
各項目について補足します。
応募人数
応募人数はOuboDataの検索した件数になります。
更新アイコン
募集終了されているときは更新させたくないので、更新のアイコンを非表示にするよう条件設定してください。
NosyuDataのisNosyuStopがnoの場合のみ表示になります。
メニュー
メニューアイコンをクリックした時に、募集終了、募集削除のメニューを表示させます。
メニューはヘッダーのメニューと同様にGroupFocusを使用します。
参照エレメントはメニューアイコンです。
「募集を終了する」のメニューは募集終了している時は非表示にさせます。更新ボタンと同じ条件、NosyuDataのisNosyuStopがnoの場合のみ表示させます。
募集作成日
NosyuDataのCreation Dateを表示させます。デフォルトだと英語の形式になっているので、フォーマットをお馴染みのyyyy/mm/ddにしましょう。他のフォーマットも可能ですので、お好きなように。
Twitterに投稿
Twitterに投稿ボタン、URL等は、Reusable elementにしています。
名称は「TwitterArea」です。
Reusable elementにする方法は以前お伝えしていますね。
※実はこの画面以外にはTwitter投稿する場所はないので、Reusable elementにしなくても大丈夫です。
以下のように配置してください。
- Twitterに投稿するボタン：Button
- クリップボードのメッセージ：Alert
- URL：Input
- クリップボードアイコン：Icon
このURLはツイートした募集の詳細画面のURLです。
nosyu画面のURLは、【Website home URL】nosyu/【NosyuDataのunique id】なので、このように設定してください。
「Website home URL」でhttps://～/までのホームアドレスが取得できます。Developだと「version-test/」まで含まれるため、
DevelopでもLiveでも私たちは意識する必要はありません。（便利！）
ただ、Reusable elementにしない場合は、「This url」で今のURLが取得できるので、わざわざ上のURLにしなくてもThis urlでも大丈夫です。
また、URLのInputはdisabledにしておいてください。
応募がありません
応募一覧（後述するOuboDataのRepeating Groupです）が0件の場合、「応募がありません」というメッセージを表示します。
応募一覧
応募してきた人の一覧表示です。Repeating Groupを用います。 OuboDataの一覧になり、条件は以下の条件です。
応募者の情報
応募者の情報は、OuboDataのCreatorからひっぱってこれますね。
Twitterアイコン
前回に作成したReusable element「TwitterIcon」を利用します。
応募日
応募日はOuboDataのCreation Dateを表示しますが、フォーマットをyyyy/mm/ddにしています。
応募メッセージ
応募メッセージは応募一覧のOuboDataのMessageから取得できます。
ただし、何件もある場合どれが表示されるか分からないので、いつのを表示させるか決めましょう。
ここでは、一番初めの応募した時のメッセージを表示するようにします。
Created Date昇順でソートし、そのfirst itemのMessageを表示させればできます。
応募停止メッセージ
応募されたものを停止することができます。
その時に表示させるメッセージです。OuboDataのisOuboStopがyesの場合のみ表示させましょう。
募集再開ボタン
募集終了されているときのみ表示するよう条件設定してください。
NosyuDataのisNosyuStopがyesの場合のみ表示になります。
下書き時の募集／未ログイン／存在しない募集の画面項目
最後に下書き状態の募集、未ログイン時、募集が存在しない場合の画面項目についてまとめて説明します。
- 下書き時の表示内容：Group
- 募集タイトル：Text
- メニューボタン：Icon
- メニュー：GroupFocus
- 募集を削除するメニュー：Text
- 現在日時～募集作成日時の差分日時：diff-nowdate（上の画像ではメニューに隠れてしまっています・・・）
- 募集を公開する：Button
- 募集内容を編集する：Button
- 未ログイン時の表示内容：Group
- メッセージ：Text
- Twitterでログインするボタン：Button
- 募集が存在しない時の表示内容：Group
- 存在しない旨のメッセージ：Text
- トップページへボタン：Button
下書き時の募集、未ログイン、存在しない募集はそれぞれ条件によって表示・非表示が決まりますので、今までと同じように必ずそれぞれGroupにわけ、Groupの表示条件を設定します。
| 表示内容 | 条件 |
|---|---|
| 下書き時 |  |
| 未ログイン時 |  |
| 募集が存在しない時 |  |
他の項目は特に表示条件はないので、画像を見て配置してください。
ワークフロー設定
それでは、詳細画面の残りのワークフローの設定を行いましょう！
募集を更新しよう
募集作成ユーザの場合、募集を更新することができます。実際には更新画面（nosyu-regist）で更新するのでここでのアクションは画面遷移のみです。
応募一覧のGroupに更新アイコン、と下書き募集のGroupに募集内容を編集するボタンがありましたね。
どちらも同じ処理なので、Custom eventを作成し、共通化しましょう。
この時、NosyuDataのunique id をパラメータに渡しましょう。 nosyu-regist（遷移先）で、パラメータが渡されたら、NosyuDataを検索するようにしています。Key名は必ず双方同じにすることにご注意ください。
Custom eventが作成できたら、あとは実際の更新アイコン又はボタンのワークフローからこのイベントを呼べばO.K.です。
募集を削除しよう
募集作成したユーザは募集削除もこの画面でできます。
「募集を削除する」メニューが2か所ありますね。
募集を削除するメニューをクリックすると、削除ポップアップを表示するようにします。※メニューは2か所ですが、削除ポップアップは共通のものを利用します。
この時、それぞれのメニューのGroupFocusを非表示することをお忘れなく。自動で非表示にはなりません。
実際の削除は、ポップアップの「募集削除する」ボタンをクリックした時です。
募集削除は物理削除にしています。
削除するデータはNosyuData、OuboData、Messageです。
削除したらNosyuDataがなくなるので、mypageへ遷移するようにします。
Cutom eventにしていますが、削除処理を行うのは削除ポップアップからの「募集削除する」ボタン1か所からなので、特にCustom eventにする必要はありません。
| Step | Action | 処理内容 | 設定内容 |
|---|---|---|---|
| Step1 | Delete a list of things | Message削除 |  |
| Step2 | Delete a list of things | OuboData削除 |  |
| Step3 | Delete thing | NosyuData削除 |  |
| Step4 | Hide | Delete Popupを非表示 | |
| Step5 | Hide | Group Contentを非表示 | |
| Step6 | Go to page | mypageに遷移 |  |
複数のデータを削除する場合は、「Delete a list of things」を使用します。
また、関連付けされているデータを削除する際は、順番に気をつけましょう。
NosyuData、OuboData、Messageと３つのDataを削除しますが、例えば初めにNosyuDataを削除してしまうと、それに紐づくOuboDataが分からなくなります。なので、削除する際は、関係性を考えて順番に気をつけて削除するようにしましょう。
Step5のGroup Contentを隠す処理ですが、削除すると「存在しません」のメッセージが表示されるので、それを表示させないために隠しています。Group Contentはヘッダーの下の画面項目全てを配置しているGroupです。
Step6ではmypageに遷移する際、「delete」というパラメータを渡しています。
mypageに遷移したとき「削除しました」というメッセージを表示するためにこのパラメータを渡しています。
また、ポップアップ「キャンセル」ボタンのワークフローも追加しましょう。アクションはポップアップ自身を非表示にするのみです。
募集を終了しよう
「募集を終了する」メニューをクリックした場合も削除と同様、終了のポップアップをまずは表示させます。
ポップアップの「募集を終了する」ボタンをクリックした時のに実際に募集終了させますが、NosyuDataのフラグを変更するのみです。
| Step | Action | 処理内容 | 設定内容 |
|---|---|---|---|
| Step1 | Make changes to thing | 終了フラグの更新 |  |
| Step2 | Hide | 募集終了ポップアップの非表示 | |
| Step3 | Show message | メッセージの表示 |  |
募集終了した時は画面遷移はありません。この画面でメッセージを表示させます。メッセージは「応募しました」と同じエレメントを利用しています。「Change the alert message」にチェックをいれるとメッセージを変更することができるので、適当に変更しましょう。
また、ポップアップ「キャンセル」ボタンのアクションは、削除ポップアップと同じくポップアップ自身を非表示にするのみです。
募集を公開しよう
下書き中の募集のみ、「募集を公開する」ボタンをクリックすると、下書きから公開に変更します。NosyuDataのフラグを変更するだけです。
| Step | Action | 処理内容 | 設定内容 |
|---|---|---|---|
| Step1 | Make changes to thing | 公開フラグの更新 |  |
| Step2 | Show message | メッセージの表示 |  |
更新処理後、募集停止と同じように、「応募しました」と同じエレメントを利用してメッセージを変更し表示させています。
Twitterに投稿しよう
Twitterに投稿するには、Twitterが用意してくれているURLを使用します。
シェアするリンク方法は色々ありますが、ここではBubbleのエレメントをシェアボタンにしています。さらにシェアボタンをクリックすると、別ウィンドウを開くようにします。
上記のようにするには、前回に引き続きJavascriptを書かねばなりません・・・！！（２度目の不覚！）ToolboxプラグインのRun javascriptを利用します。
window.open('http://twitter.com/share?text='
+ encodeURIComponent('【NosyuDataのTitle】') + '&url=' + encodeURIComponent('【nosyu画面のURL】') + '&hashtags=nosyu', 'tweetwindow', 'width=650, height=270, personalbar=0, toolbar=0, scrollbars=1, sizable=1');
【】で囲んでいるところは、Insert dynamic dataから設定してください。
このJavascriptでツイートできる画面が開き、その画面からツイートできるようになります。
ちなみに、Twitterシェアボタンは、Twitterが提供しているHTMLを利用することも可能です（下記リンク参考）。HTMLエレメントに設定すればそのまま使えます。
https://help.twitter.com/ja/using-twitter/twitter-buttons
今回は、BubbleのButtonを利用したかったため、上記のTwitterの提供しているHTMLタグを利用せず、Javascriptを利用しました。
文字列をコピーしよう
Twitterに投稿するボタンの下にアドレスとコピーボタンのアイコンがあります。 そのアイコンをクリックすると、アドレスがクリップボードにコピーされます。
「Air Copy To Clipboard」というプラグインを利用してコピーします。
Pluginsの「Copy to clipboard」アクションを選択し、コピー内容を設定します。
Step2では、コピーされました、というメッセージを表示させています。
応募メッセージ画面へ遷移しよう
応募一覧の各行をクリックすると、応募メッセージ一覧画面（nosyu-message）に遷移します。各行を一つのGroupにしてください。そのGroupのワークフローになります。
Data to sendでCurrent cellのOuboDataを設定しましょう。 nosyu-message画面のType of contentにOuboDataを設定しないとエラーになるので、予めnosyu-message画面のType of contentに設定しておきましょう。
メニューを表示しよう
メニューは公開用と下書き用とがありますが、それぞれのアイコンのワークフローにそれぞれのメニューのGroupFocusをShowアクションで表示させてください。
トップページに遷移しよう
指定した募集が削除済みだったり、募集が未指定の場合、「トップページへ」ボタンを表示するようにしています。
index画面に遷移するようにしてください。ログイン中はmypage、未ログイン中はindexと条件をわけて遷移しても良いですね。
ログインしよう
未ログイン中は、「Twitterでログインする」ボタンを表示させています。
ここで、一つ注意することがあります。
Twitterログインを行う場合、コールバックURLの設定が必要になります。
この画面（nosyu）で直接Twitterログインする場合、このnosyuのURL「https://【ドメイン】/nosyu/【NosyuDataのunique id】」をコールバックURLにしなければなりません。
しかし、unique idは動的です。
ではどう設定するのか？！詰んでしまった・・・？！と思うかもしれません！
が、
ちゃんと対応方法はあります！！
以下の記事に詳しくは書いていますが、「Twitterログインアクションを行う画面を一つに決め、そこを経由する」です。
nosyuで「ログインアクションを行う画面」は、indexです。indexではすでにTwitteログインを行いましたね！
なので、ここでは、indexに遷移だけさせましょう。
それをすることで、あたかもnosyu画面でログインをし、再表示されるように見せることができます！ただ、画面遷移のチラつきは気になってしまうかもしれません・・・。もう少しスムーズに行ければよいですけど
単純にログインだけではなく、またnosyu画面に戻ってくるようにします。
そのため、NosyuDataのunique idをパラメータに渡します。
nosyuではこれで設定おしまいです。
ただし、index画面でこの対応をしなければなりませんので、index画面も変更してしまいましょう！！
index画面を変更しよう
nosyu画面から遷移してきたら強制的にTwitterログインし、nosyu画面に遷移させるように対応していきましょう！ それには、Page loadedイベントで行います。
ページロードの条件にはパラメータがあるかどうかの条件もいれています。
これでnosyu画面からきたことを判定しています。
| Step | Action | 処理内容 | 設定内容 |
|---|---|---|---|
| Step1 | Signup/login with a social network | Twitterログイン |  |
| Step2 | Go to page | nosyu画面へ遷移 |  |
Step1ではCustom eventを呼ぶようにしていますが、この中身は単純にStep1のみのSignup/login with a social networkアクションでプロバイダをTwitter選択しているだけです。共通化するほどではないので、こちらはお好きにしてください。
また、Step1では、ログインしていない時を条件にしていますが、パラメータ「denied」がないとき、という条件も含まれていることにお気づきでしょうか？
これは今までどこにも出てきていないパラメータです。なぜならTwitterのパラメータなので。
これは、ログインを拒否された場合に再度ログインしようとしないためです。
ログインを拒否というは、初めて対象アプリでTwitterログインする場合、このアプリを認証してよいか？というTwitterの確認画面がでてきます。
許可にするともちろんそのままログインになりますが、キャンセルにすると、ログインできません。
このアプリではindex画面→Twitterログイン（Twitterの画面へ）→index画面という画面遷移が発生しています。今回、ページロードでTwitterログインを行うことにより、アプリ拒否しても無限ループのようにTwitterログインの画面に遷移してしまうのです。
それを阻止するため、「denied」のパラメータを見るようにし、deniedがあればログイン拒否という判定でTwitterログインはしないようにしています。
自動でログインするときは要注意しなければなりませんね。
さらに、ページロードの条件にも追加しておきましょう。
nosyu画面からのパラメータがない場合のみmypageに遷移するようにします。
ちなみに、nosyu画面からログインする場合、初ログインの場合は、サインアップ画面に行きますが、今回はサインアップ後にnosyu画面に遷移するようにはしていません。
もしサインアップ後にまたnosyu画面に戻ってきたい場合は、Go to pageの「Send current page parameters」にチェックいれると、その画面のパラメータ全て次の画面にも渡せるので利用すると良いでしょう。
次回
2回に渡って募集詳細画面の説明をしてきました。
処理自体は複雑なものはないですが、一つの画面に多くの処理が入っていたため長くなってしまいましたね。
次回は、応募一覧画面を説明します！
ここまで読んでいただきありがとうございました！ 次回もお楽しみに！
