ノーコード(Bubble)によるWebアプリ開発６(8/25)

TwitterのようなSNSアプリを作ってみよう(ログイン画面とアイコン）＜その６＞

Add a new pageをクリックしログイン画面を作成する。
Page nameを「login」、Clone fromを「signup」に設定し、CREATEをクリックする。

基本はユーザー登録画面と一緒だが、少しデザインを変える。
　　「ユーザー登録」と書かれたTextを「ログイン」に変更する。
そして、「ユーザー登録する」というボタンを「ログインする」に変更する。

そして、ログインボタンのworkflowを作成する。
先ほどのユーザー登録のworkflowがコピーされているので、Step1の「Sign the user up」を削除する。
Step1の左側をクリックすると、新しいアクションの項目が出てくるので、Accountの「Log the user in」を選択する。
表示されたプロパティのEmailとPasswordは、「signup」の時と同様に設定する。

次に、ユーザーのアイコンを作成する。
左のタブのVisual elementsのimageを選択し、サイズを「W４８]、「H４８」に設定し下記画像のあたりに設置する。
今回は、Static imageで私の写真フォルダの画像を選択する。

先ほど差し込んだ画像の角を取って丸くし、よりアイコンらしい形にする。
imageのプロパティ内にあるRoundnessの値を「２４」に設定すると、下記画像のような綺麗な丸になる。

次に、ContainersのGroup Focusを選択し、プロパティ内のReference elementの項目を先ほど作成した「image icon」に設定する。
この状態で、先ほど作成したアイコンとGroup Focusが結びつく。

そして、このGroup Focusにログアウトボタンとプロフィール画面の移動するボタンを配置する。
Buttonを二つつGroup Focus内に配置し、名前を「ログアウト」と「プロフィール」に設定する。

アイコンをクリックしたら、このGroup Focusが表示されるようにworkflowを設定する。
アイコンのプロパティ内のworkflowを選択し、ElementのShowを選択する。
表示されたプロパティのElementを「GroupFocus」に設定するとこの処理が完成する。

次にログアウトボタンをクリックするとログアウトの処理がされる設定をする。
ログアウトのworkflowをクリックし、AccountのLog the user outを選択すると処理が行えるようになる。

indexページをログインユーザーのみが閲覧できるように設定を行う。
一番左のタブにある Workflowを選択し、並んでいる四角の一番右の点線で描かれた四角をクリックする。 ログアウト状態ならという条件を追加するために、GeneralのUser is logged outを選択する。
Click here to add an actionをクリックし、NavigationのGto to pageを選択する。
表示されたプロパティ内のDestinationを「login」に設定する。

ここで一度、preview画面で確認をする。
確認すると、左上のアイコンの形が変形していることがわかる。そのためこれを直す設定を行う。

Design画面からアイコンのプロパティを開き、Make this element fixed-widthにチェックを入れる。
これでアイコンの横幅が最初に設定した数値で固定されるようになる。

preview画面を確認すると下記画像のようにアイコンの形が整っていることが確認できる。
次回はユーザーのプロフィール画面を作成します！