第3回ではまずはログイン回りの画面や機能をつくっていきたいと思います。

「Design」機能を使って画面を作成する初めの回なので、まずは「Design」機能についてざっと解説したいと思います。

① アプリ内で作成されている画面やデザインパーツの一覧。ここから入ることで各ページの編集へ進む。
②新しいページを作成したりページに配置するテキストやボタンなどのパーツを一覧する。
③該当ページのレスポンシブデザインの定義へ進む。
④UI builder(②) やResponsive(③)のパーツの選択や設定を行う。
⑤対象ページや、ページ内に配置されている要素や要素のグループのプロパティの編集ヘ進む。
⑥編集メニューを開く。
⑦.bubbleのリリースノートを確認する。
⑧.bubbleが認識したエラーや問題を確認する。
⑨パーツを選択する。
⑩編集画面の表示について編集する。
⑪配置したパーツの揃えやグループ化などの操作を行う。
⑫.bubbleがあらかじめ用意しているコンポーネントを設置する。
⑬戻る/やり直す
⑭アプリ内の要素、スタイル、その他オブジェクトを検索する。
⑮作成しているページをブラウザでプレビューする。
⑯.bubbleのヘルプメニューを開く。
⑰テキストやボタンなどの要素を配置するエリア。
⑱ページや選択している要素のプロパティを設定する。

ログインページを作成する

新しいページを作成する

まず初めに①から「Add  new page…」を押下して、ページ名を入力し「CREATE」を押下することで新しいページが作成されます。

画面に必要な要素を設置する

④から⑰へドラッグアンドドロップをすることで好きな部品を好きな位置に設置ができます。今回は大きさや位置などを⑱のプロパティで決めながら、どのようなブラウザでもログインのメニューを中央に表示できるように作成をしていきたいと思います。

まずは④から「Text」のパーツを選択して⑰へ適当に配置します。同じように④から「Button」というパーツ、Input formsにある「Input」というパーツを二つを⑰に配置します。

Textは「ログイン」というタイトルで、「Button」はログインというボタン名、二つのフォームはメールアドレスとパスワードを入力するためのパーツになります。

それぞれのパーツをダブルクリックすると⑱のプロパティのが開き「Appearance」の上部の「…edit me…」や「Type here…」にフォーカスが当たるので「ログイン」「メールアドレス」「パスワード」と入力します。

また、メールアドレスとパスワードはそれぞれメールアドレスとパスワードを入力する欄と定義するためにプロパティの「content format」で「Email」「password」に変更することによって、それぞれEmailを入力する欄、Passwordを入力する欄と定義することができます。

レイアウト、デザインをする

.bubbleでは画面上の好きな場所にマウス操作でパーツを配置することができますが、CSSのMarginやPaddingなどの考え方に基づき設定を行なっていくことで各パーツのレイアウトを綺麗に整えることができます。

まず、配置したパーツのどれかを選択して、プロパティのLayoutタブのContainer Layoutで、fixedかColumnに変更することでそれぞれのパーツの位置に関する情報はクリアされ段組みで構成されるようになります。

次に画面に配置したテキストやボタンをグループ化するためにマウスで選択をして、右クリックでメニューを表示し、Group elements in からColumn containerを選択します。これでこれらのパーツがグループ化され、このグループに対して定義が行えるようになります。

 

左側UI Builder のElements Tree に 先ほどグループ化することで作られたGroup Aを選択し、プロパティのLayoutタブのApply gap spacing between elementsにチェックを入れ、Row gap (px)に数字を入れることで各パーツ間のGAP間隔を設定できます。今回は10pxの間隔をとることにします。

またその下部にあるFit width containerにチェックを入れてGroup Aの横幅を自動的にパーツのサイズになるように設定します。

次に要素の内側と外側に空間を作るためにMarginsとPaddingに数字を入れて整えます。今回は内側に空間を設けるためにPaddingに20pxを設定します。

GrupeAのプロパティでAppearanceのBackground colorをFlat colorに変更して、GroupAの背景色を白にします。また、ログインtext、ログインボタンそれぞれを文字サイズやレイアウトを整え、さらにログインページ全体の背景色を薄いグレーにします。

最後にGrupeAのLayoutタブのHorizontal alignmentで左右中央揃え、loginページ全体のプロパティのContainer alignmentで上下中央揃えを行い、画面中央に「ログイン」機能を表示したページが完成です。

ログイン機能を実装する

前項で作成したログインページの「ログイン」ボタンを右クリックして出てくるメニューから「Start/Edit workflow」を押すとWorkFlowの設定画面に移り、ボタンを押したときのアクションを定義することができます。

workflow画面に遷移後、「click here to add an action」を押すとアクションのメニューが表示されるので「Log the user in」を押下します。

ポップアップで出てきた画面のEmailの欄から「Inputメールアドレス」「’s value」を設定、passwordも同様に設定します。また、ログイン後にログイン状態をどれだけ維持できるかについては、維持をしないので「stay logged in」は「No」と設定します。

続けて、次のアクションを設定するために 次の「click here to add an action」を押下し、「Navigation」メニューの「Go to page」を選択し、ログイン後のTOPページになる「index」を設定します。

これで、メールアドレスとパスワードでログインすると「index」というTOPページが表示されるアクションを設定することができました。

ログインを試す

早速ログインを試すために、別途、ユーザー登録画面を作成をして、メールアドレスとパスワードによる登録を行いました。

これで、データベースにはメールアドレスとパスワードが登録されているので、先ほど作成したログイン画面からログインを行うとindexページが表示されることになります。

実際に、登録済みのメールアドレスとパスワードと入力してログインを押すと「index」ページが表示されました。

このように、画面の作成やアクションの定義などをノーコードで簡単に行うことができました。今回は簡単なログイン機能でしたので、次回以降はもう少し複雑な機能の開発について紹介をしたいと思います。