ノーコード ラボ

No Code のツールやアプリについて紹介します

twitter のような簡単な SNS をBubble で作ってみる(入門者向け)2: サインアップとログイン/ログアウト処理

1. ユーザー登録(サインアップ)画面を作る

まず最初にユーザー登録画面を作ります。

1.1 ユーザー登録画面の新規追加

Bubble Editor の左上の Page: index と表示されている部分をクリックします。

スクリーンショット 2019-07-30 13.23.12.png (25.4 kB)

Create a new page という画面が表示されるので、「signup」と入力し、「CREATE」ボタンを押します。

スクリーンショット 2019-07-30 14.51.48.png (12.4 kB)

そうすると、signup というページが作られます。

スクリーンショット 2019-07-30 14.54.43.png (123.6 kB)

1.2 ユーザー登録画面のデザイン

ここに signup 用のパーツを置いていきます。 ヘッダーの部分は index ページと同じようなデザインにして、「tweet」ボタンを外します。 ボディ部分は、ユーザー登録用の Group を作成し、その上に Input を2つ配置、その下に「ユーザー登録する」というボタンを配置します。

スクリーンショット 2019-07-30 15.10.18.png (42.3 kB)

1.3 ユーザー登録ボタンのワークフローの作成

ユーザー登録ボタンをダブルクリックし、プロパティを表示させます。

スクリーンショット 2019-07-30 15.18.17.png (104.2 kB)

この画面の「Start/Edit workflow」ボタンをクリックします。 すると、Workflow の画面が表示されます。

スクリーンショット 2019-07-30 15.19.59.png (77.2 kB)

「Click here to add an action」をクリックし、「Account」の「Sign the user up」をクリックします。

スクリーンショット 2019-07-30 15.22.10.png (76.2 kB)

すると、「Sign the user up」のプロパティが表示されるので、Email のところに 「Input email's value」、Password のところに「Input Password's value」を入力します。

これで、email と Password が入力されたら、ユーザーが登録できるようになります。 ユーザー登録したら、Form の中身をクリアして、index ページに遷移するようにします。

  • Step2: Reset Inputs(フォームの中身をクリア) スクリーンショット 2019-07-30 15.36.15.png (32.4 kB)

  • Step3: Go to page index(index ページへの画面遷移) スクリーンショット 2019-07-30 15.37.36.png (29.7 kB)

「Go to page」を選択するとプロパティが表示されるので「Destination」で「index」を選択します。

スクリーンショット 2019-07-30 15.39.14.png (18.9 kB)

1.4 プレビューで確認

実際にプレビューを使って、ユーザー登録してみましょう。 email と Password を入れて、「ユーザー登録する」ボタンを押してみてください。

Bubble Editor の Data タブをクリックして、App Data タブをクリック、All Users を選択します。 そこに今作成したユーザーのメールアドレスが表示されていれば成功です。

スクリーンショット 2019-07-30 15.50.21.png (96.1 kB)

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」ボタンを押します。

スクリーンショット 2019-07-30 15.56.47.png (13.0 kB)

そうすると、signup ページのコピーとして、login 画面が作成されます。

スクリーンショット 2019-07-30 16.00.00.png (123.5 kB)

2.2 ログイン画面のデザイン

ここでは2ヶ所だけ変更します。 - テキスト:「ユーザー登録」→「ログイン」 - ボタン:「ユーザーを登録する」→「ログインする」

スクリーンショット 2019-07-30 16.02.57.png (41.9 kB)

2.3 ログインボタンのワークフローの作成

ワークフローのタブをクリックします。

スクリーンショット 2019-07-30 16.05.07.png (78.9 kB)

先ほど作った「Sign the user up 」をログイン処理に変えたいので、まず、これを削除します。 「Sign the user up」のすぐ下の「delete」をクリックします

スクリーンショット 2019-07-30 16.13.30.png (44.1 kB)

「Sign the user up」が消え、Step1 が「Reset relevant inputs」になります。 この「Reset relevant inputs」の左側をクリックします。

スクリーンショット 2019-07-30 16.17.38.png (90.7 kB)

すると、「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 を入力します。

スクリーンショット 2019-07-30 16.20.04.png (21.7 kB)

これでログインできるようになります。

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 に設定します。

スクリーンショット 2019-07-30 17.00.19.png (100.0 kB)

3.2 ユーザー用のメニューを作る

Containers から Group Focus を選択して、ユーザーアイコンの近くをクリックします。 Group Focus のプロパティが表示されるので、Reference Element に先ほど作成したアイコンのエレメントを選択します。

スクリーンショット 2019-07-30 17.12.27.png (93.2 kB)

Group Focus 内に「ログアウト」ボタンと「プロフィール」ボタンを配置します。

スクリーンショット 2019-07-30 19.10.01.png (10.6 kB)

3.3 アイコンとログアウトボタンのワークフローの作成

3.3.1 アイコンのワークフローの作成

まずは、アイコンをクリックしたら、Group Focus が表示されるようにワークフローを設定します。 アイコンのプロパティを表示させ、「Start/Edit Workflow」ボタンをクリックします。

スクリーンショット 2019-07-30 17.26.15.png (48.6 kB)

「Click here to add an action」をクリックし、「Element Actions」の「Show」を選択します。

スクリーンショット 2019-07-30 17.32.27.png (78.5 kB)

「Element 」で 先ほど作った Group Focus を選択します。 これで、アイコンをクリックすると Group Focus が表示されるようになります。

スクリーンショット 2019-07-30 17.34.09.png (12.1 kB)

3.3.2 ログアウトボタンのワークフローの作成

続いて、ログアウトボタンの処理を作ります。 ログアウトボタンのプロパティを表示させ、「Start/Edit Workflow」ボタンをクリックします。

スクリーンショット 2019-07-30 17.37.54.png (49.9 kB)

「Click here to add an action」をクリックし、「Account」の「Log the user out」を選択します。

スクリーンショット 2019-07-30 17.40.46.png (79.4 kB)

これでログアウトができるようになりました。

4. ログインしていないユーザーを index ページから締め出す

ログインとログアウト処理ができたので、index ページをログインユーザーのみ公開する様に設定します。 なお、ログインしていないユーザーは login ページにリダイレクトします。

4.1 index ページのワークフローの設定

Workflow の画面で「Click here to add an event」をクリックします。 続いて、「General」の「User is logged out」をクリックします。

スクリーンショット 2019-07-30 17.48.27.png (19.5 kB)

「Navigation」の「Go to page」をクリックします。

スクリーンショット 2019-07-30 17.49.40.png (42.7 kB)

Go to page のプロパティが表示されるので、「Destination」で「login」を選択します。

スクリーンショット 2019-07-30 17.50.33.png (18.4 kB)

これでログインしていない場合は、login 画面に表示される様になります。

4.2 プレビューで確認

ログイン、ログアウトを繰り返してみてください。 ログインしたら、index ページが表示され、ログアウトしたら、login ページに飛ばされれば OK です。

次回

次回はユーザーのプロフィール画面を作成します。