- 1. ユーザー登録（サインアップ）画面を作る
- 2. ログイン画面を作る
- 3. ログアウト機能の作成
- 4. ログインしていないユーザーを index ページから締め出す
- 次回
- twitter のような簡単な SNS をBubble で作ってみる（入門者向け）
2020/9/2 追記
あぽとさんに協力していただき、このページの内容を動画にし、YouTube にアップしました。
動画の方が入門者の方にはわかりやすいと思いますので、是非見てみてください！
twitter のような簡単な SNS をBubble で作ってみる（入門者向け）２： サインアップとログイン/ログアウト処理
1. ユーザー登録（サインアップ）画面を作る
まず最初にユーザー登録画面を作ります。
1.1 ユーザー登録画面の新規追加
Bubble Editor の左上の Page: index と表示されている部分をクリックします。
Create a new page という画面が表示されるので、「signup」と入力し、「CREATE」ボタンを押します。
そうすると、signup というページが作られます。
1.2 ユーザー登録画面のデザイン
ここに signup 用のパーツを置いていきます。
ヘッダーの部分は index ページと同じようなデザインにして、「tweet」ボタンを外します。
ボディ部分は、ユーザー登録用の Group を作成し、その上に Input を２つ配置、その下に「ユーザー登録する」というボタンを配置します。
1.3 ユーザー登録ボタンのワークフローの作成
ユーザー登録ボタンをダブルクリックし、プロパティを表示させます。
この画面の「Start/Edit workflow」ボタンをクリックします。
すると、Workflow の画面が表示されます。
「Click here to add an action」をクリックし、「Account」の「Sign the user up」をクリックします。
すると、「Sign the user up」のプロパティが表示されるので、Email のところに 「Input email's value」、Password のところに「Input Password's value」を入力します。
これで、email と Password が入力されたら、ユーザーが登録できるようになります。
ユーザー登録したら、Form の中身をクリアして、index ページに遷移するようにします。
Step2: Reset Inputs（フォームの中身をクリア）
Step3: Go to page index（index ページへの画面遷移）
「Go to page」を選択するとプロパティが表示されるので「Destination」で「index」を選択します。
1.4 プレビューで確認
実際にプレビューを使って、ユーザー登録してみましょう。
email と Password を入れて、「ユーザー登録する」ボタンを押してみてください。
Bubble Editor の Data タブをクリックして、App Data タブをクリック、All Users を選択します。
そこに今作成したユーザーのメールアドレスが表示されていれば成功です。
2. ログイン画面を作る
続いて、signup 画面 をコピーして login 画面を作成します。
2.1 ログイン画面の追加（Signup 画面を元にする）
Bubble Editor の左上の Page: signup と表示されている部分をクリックし、Add a new page をクリックします。
Create a new page が表示されるので、Page name に login、Clone from に signup を選択し、「CREATE」ボタンを押します。
そうすると、signup ページのコピーとして、login 画面が作成されます。
2.2 ログイン画面のデザイン
ここでは２ヶ所だけ変更します。 - テキスト：「ユーザー登録」→「ログイン」 - ボタン：「ユーザーを登録する」→「ログインする」
2.3 ログインボタンのワークフローの作成
ワークフローのタブをクリックします。
先ほど作った「Sign the user up 」をログイン処理に変えたいので、まず、これを削除します。
「Sign the user up」のすぐ下の「delete」をクリックします
「Sign the user up」が消え、Step1 が「Reset relevant inputs」になります。
この「Reset relevant inputs」の左側をクリックします。
すると、「Reset relevant inputs」の左側に「Click here to add an action」が表示されるので、「Account」の「Log the user in」をクリックします。「Log the user in」のプロパティで Email: Input email's value、Password: Input Password's value を入力します。
これでログインできるようになります。
2.4 プレビューで確認
実際にプレビューを使って、ログインしてみましょう。
先ほど作成したユーザーの email と Password を入れて、「ログインする」ボタンを押してみてください。
エラー等が発生せずに、index ページに画面遷移したら OK です。
3. ログアウト機能の作成
3.1 ユーザーアイコンを作る
index ページの左上にユーザーの画像を表示できるようにして、そこを押すと、ユーザー情報の編集とログアウトができるようにします。
まずは、index ページを開きます。
Visual elements の中から Image を選択し、ヘッダーの左の方に配置します。
W:48、H:48、X:8、Y:8 で設定します。
External Source から適当な画像を持ってきます。
丸く切り抜きたいので、Border Style の隣の Roundness を 24 に設定します。
3.2 ユーザー用のメニューを作る
Containers から Group Focus を選択して、ユーザーアイコンの近くをクリックします。
Group Focus のプロパティが表示されるので、Reference Element に先ほど作成したアイコンのエレメントを選択します。
Group Focus 内に「ログアウト」ボタンと「プロフィール」ボタンを配置します。
3.3 アイコンとログアウトボタンのワークフローの作成
3.3.1 アイコンのワークフローの作成
まずは、アイコンをクリックしたら、Group Focus が表示されるようにワークフローを設定します。
アイコンのプロパティを表示させ、「Start/Edit Workflow」ボタンをクリックします。
「Click here to add an action」をクリックし、「Element Actions」の「Show」を選択します。
「Element 」で 先ほど作った Group Focus を選択します。
これで、アイコンをクリックすると Group Focus が表示されるようになります。
3.3.2 ログアウトボタンのワークフローの作成
続いて、ログアウトボタンの処理を作ります。
ログアウトボタンのプロパティを表示させ、「Start/Edit Workflow」ボタンをクリックします。
「Click here to add an action」をクリックし、「Account」の「Log the user out」を選択します。
これでログアウトができるようになりました。
4. ログインしていないユーザーを index ページから締め出す
ログインとログアウト処理ができたので、index ページをログインユーザーのみ公開する様に設定します。
なお、ログインしていないユーザーは login ページにリダイレクトします。
4.1 index ページのワークフローの設定
Workflow の画面で「Click here to add an event」をクリックします。
続いて、「General」の「User is logged out」をクリックします。
「Navigation」の「Go to page」をクリックします。
Go to page のプロパティが表示されるので、「Destination」で「login」を選択します。
これでログインしていない場合は、login 画面に表示される様になります。
4.2 プレビューで確認
ログイン、ログアウトを繰り返してみてください。
ログインしたら、index ページが表示され、ログアウトしたら、login ページに飛ばされれば OK です。
次回
次回はユーザーのプロフィール画面を作成します。
