bosyuさんもどきをBubbleで作ってみる！（初級者向け）～８：応募一覧を作ろう
皆さん、こんにちは！
Bubble初級者向け講座第２弾「bosyuさんもどきをBubbleで作ってみる！」第８回目は応募一覧画面を作成しましょう！
応募一覧は自分が今まで応募した募集を一覧で見ることができる画面です。
機能内容や前提条件等はこちらをご覧ください。 本シリーズのリンクもこちらに全てあります。
前回の記事はコチラです。
応募一覧の機能について
応募一覧画面は、自分が応募した募集の一覧を見る画面です。
今までのBubbleの知識があれば何も難しいことはなく、簡単にできると思います！
処理は一覧を選択したらメッセージ画面へ遷移するぐらいですので、画面と仕様が分かれば説明見ずにチャレンジしてみてください。
応募一覧の画面遷移
今回の記事ででてくる画面です。
- 応募一覧画面：oubo-list
- メッセージ画面：nosyu-message
画面遷移は１か所のみです。
応募一覧の各行をクリック
↓
nosyu-messageに遷移
ちなみにヘッダーのメニューの「応募した募集」をクリックすると応募一覧画面に遷移してきます。
応募一覧画面を作ろう
それでは応募一覧画面を作っていきましょう。
画面サイズは、横：1200pxとし、レスポンシブ対応するので、 「Make this element fixed-width」のチェックは外し、 「Preset page width」を「Full Screen」にしてください
画面項目について
画面項目は以下のとおりです。
- Header
- 画面タイトル：Text
- 応募一覧：Repeating Group
- OGP画像：Image
- 募集タイトル：Text
- 応募日：Text
- 応募しているnosyuがありません メッセージ：Text
前回に比べとても少ないですねー！ 他の画面と同様に、Header以下はGroup Contentに全てまとめています。 Groupは上の画像を参考に適宜するようにしてください。
応募一覧
応募一覧はOuboDataの一覧になります。Type of Content はOuboDataにしてください。
応募はCurrent Userが作成したもののみ見れるので、条件にCreated By = Current Userをしてします。
ソートは応募日（作成日）の降順にしています。
募集の画像・タイトル
募集の画像とタイトルはOuboDataにNosyuを持っていますので、そこから検索せずに取得できます。
応募日
応募日はOuboDataのCreation dateになります。 Creation dateはBubbleがDataに自動的に追加されるフィールドで、新規登録した際に、Bubble側で自動的にその時の現在日時を登録してくれます。
表示する際は、デフォルトだと英語形式なので、フォーマットをyyyy/mm/ddに変更しましょう。
応募しているnosyuがありません
何も応募していない場合は、「応募しているnosyuがありません」のメッセージを表示させます。
上の図のように、応募一覧のRepeating GroupのListのcountで件数が取得できますので、件数が0件の場合のみ表示するようにしましょう。
ワークフローを設定
次にワークフローを設定しましょう。
初期設定をしよう
まずはページロードのイベントで初期値を設定しましょう。
この画面はログインユーザのみが見れる画面なので、 Headerで説明したように、HeaderのisOnlyLoginにyesを設定します。
メッセージ画面へ遷移しよう
一覧の募集をクリックすると、その募集に関するメッセージ画面（nosyu-message）へ遷移します。
nosyu-messageはOuboDataをType of Contentに設定しておきます。
Data to send でCurrent cellのOuboDataを設定します。
余談
今回は説明が短いので、少し抜けいていたところを補足させてください。
今まで出てきた、募集登録画面、今回の応募一覧の画面等、ログインしていないと見れない画面がいくつかありますね。
通常に操作していれば未ログインのユーザが見ることはないですが、URLを知っていればその画面を表示しようとすることはできてしまいます。
それを見れないようにするためHeaderで制御しています。
しかし、タイムラグが発生し一瞬画面が表示されることがあります。
それをしないために、Group Content（Headerより下をまとめているGroupです）
に表示条件をいれましょう。
Current Userがログインしていない時は非表示にします。
これにより、仮に未ログインのユーザが見ても、ヘッダーのみ見えるようになります。
一瞬見えるのが気になる方は設定すると良いでしょう。
次回
ここまでずっとnosyuを読んで下さった皆様でしたら、今回の画面はおそらく画面さえ見れば同じように作成できたかと思います。
次回はメッセージ画面を説明予定です！
ここまで読んでいただき、ありがとうございました！
