ノーコード開発アプリbubbleを勉強しています。本記事はチュートリアル2の備忘録です。
今回作成するアプリの遷移図は下記の通りです。
部品の配置
まず、最初に各部品を配置します。各部品の種類を図2にまとめました。
Inputの設定
EmailとPasswordを入力する箇所がInputになっています。それぞれの設定を見ていきましょう。
Inputの設定項目を2つ設定設定します。PlaceholderとContent formatです。
Placeholderは、アプリ上でInputの中に表示する文字列です。今回は、Emailとします。また、Content formatはInputの入力の型を指定する項目です。今回は、プルダウンからEmailを設定します。あらかじめInputの型を決められるのは、bubbleの良いところだと思いました。
以上の説明を図3にまとめました。
Password
Emailと同様です。図4にまとめました。
なお、Content formatでPasswordを選択するとデフォルトで入力時に伏字にしてくれます。
Buttonの設定
Signup・Login・LogoutがButtonになっています。Buttonはワークフローの設定が必要なので、ちょっと難しいです。それぞれの設定を見ていきましょう。 なお、今回作成するアプリにおいてButtonはSignup→Logout→Loginの順でクリックして使います。なので、この順番で説明します。
Signup
SignupのButtonも2か所設定します。図5にまとめました。
次にワークフローの設定をします。SignupのButtonをクリックすることで、ユーザアカウントの登録ができるように設定します。
ワークフローの設定は二段階に分かれています。一段階目はワークフロー全体の設定です。今回の場合、Signupをクリックした際のワークフロー全体で共通の設定を行います。二段階目は各ワークの設定です。ワークフローを構成する各ワークを設定します。
まず、一段階目のワークフロー全体の設定です。図6にまとめました。
次に、各ワークを設定します。今回の場合、アカウントのSignup（登録）をしたいので、AcountのSign the user upを選択し、さらにSign the user upの設定を行います（図7）。
Logout
LogoutのButtonの設定は、SignupのButtonと設定は似ています。そのため、ワークフローについてのみ説明します。
Logoutについては、AccountのLog the user outを設定します。Log the user outさえ選択すれば追加で設定することはありません。
Login
Loginについてもワークフローのみ説明します。AccountのLog the user inを選択しその中身を設定します（図9）。
Textの設定
Textの設定をします。今回の場合、Textボックス内にログインしているユーザのEmailを記載します。そのための設定が図10です。
Groupの設定
Groupは特に設定することはなく、単純にTextとLog outのButtonを囲んでおけば問題ないです。
ワークフローの設定
最後にUserがLog inしている状態の場合はGroupを表示させ、Log outしている状態の場合はGroupを表示させないというワークフローを設定します。 ここで大切なことは、Groupに対してワークフローを設定しないことです。
Groupに対してワークフローを設定しない理由は、Groupきっかけで何かしらのワークフローが動き出すわけではないからです。今回は、Log inもしくはLog outきっかけでGroupの表示・非表示が切り替わります。 ワークフローの設定は原因側に設定すると私は覚えることにしました。
Log in状態に対するワークフロー
図11にまとめました。
Log out状態に対するワークフロー
Log in 状態に対するワークフローの設定とほぼ変わらないです。図12にまとめました。
まとめ
私は今回下記のことを学びました。
- Inputを使うことで型指定でEmail、Passwordを入力させることができる
- ワークフローを使うことで、簡単にアカウント登録できる
- 原因側にワークフローを設定する
