はじめに

Bubbleというノーコード/ローコードでアプリを作るサービスがあり、ちょっと言葉に癖があったりするので、チュートリアルをやってみる記録です。Bubble用語は、Bubbleのように網掛けします。
なるべく細かくキャプチャしていくので、見るだけでもBubbleってこうやるんだと感じていただければ。

チュートリアルをやってみた記事

Saving data
- 位置情報をDBへ登録して、地図にマーカーを表示
Building a sign-up system ＜＜今回＞＞
- ユーザー登録とログイン、ログオフ

チュートリアルの記録

チュートリアルを選択

ログイン後のトップページ
＞左メニューのAcademy
＞Learn your way
＞By watching
＞Interactive lessons
＞Building a sign-up system

今回は、sign-upということで、アプリを使うユーザー登録ですかね。ログインまで含まれそうです。

サインアップ（登録）、ログイン、ログアウトまでですね。Googleアカウントでログインとかfacebookアカウントでログインとかは、ソーシャルログインと言われますが、それは今回は含まないとのこと。

登録フォームを作る

indexページで、sign-up form（登録フォーム）を作って、メールとパスワードを登録。メールアドレスが、ログインIDになるような形式かな。

左のペインのElement platteからInputを選択。

Emailを入力させる位置へドラッグ（キャプチャ忘れ）

そういえばここで少し脱線して、プロパティダイアログについて。

Bubbleのデフォルトでは、プロパティウィンドウはフローティングで画面に被さるように出るんですが、私はそれがすごく嫌なので、画面右ペインに固定しています。（UI設計ができる統合開発環境って大体そうじゃない？？）
そのやり方は、上のViewメニューの下の方にある、Lock Property Editorにチェックを入れます。

戻ります。

プロパティを入れていきます。がその前にプロパティダイアログの一番上のタイトル＝Element名が、"Input Email"になってるけど、これはチュートリアル先生が勝手に入れたところ。自分で作るときは、ここを適切に名前を付ける必要あり。こういうのやめてほしい。

で戻りまして、
プレイスホルダーに、Emailと入れる。

それをパスワードでも同じことをします。

１つ目のelementの下に２つ目のinputを置いて、ユーザーにパスワードを入力させる。

プレイスホルダーに、"Password"と入れる。（またElement名が自動的に、"Input Password"に変えられている）

登録（sing-up）とログイン（login）をどちらもできる画面にするってことですね。
よくあるのは、ログイン画面が最初に出て、まだ登録されていない方はこちらという小さな文字のリンクがあってそこをクリックすると、登録画面に飛ぶような形。そうしないと、ログインしようとして誤って登録ボタンを押すときに、ユーザーも処理もややこしいことになります。まぁ今は練習だから。

ボタンを置く

（また勝手にentity名が"Button Singup"に書き換えられている。今後もずっとそうだけど、省略）
ラベルを、"Sign up"にする。

ログインボタンも同じように。

ラベルを、"Log in"にする。

"Sign up"のから、workflowの登録を開始！
"Start/Edit workflow"ではなく、"Add workflow"ボタンだけど。

Sing upボタン押下時の`workflow`を登録

"Add workflow"のボタンを押すと、Workflowの画面に飛びます。

Acountの"Sign the user up"を選ぶ。こういう道具がそろってるのはいい。

メールとパスワードをどこから取得するか、プロパティで設定。
"Sign the user up"に、最初から"Email"と"Password"のプロパティを設定させるのは、ちょっと違和感があるかも。アプリによっては、"Email"でログインしない（ユーザーIDでログインする）ケースもありそうな気がするから。でもまぁいいや。

"piece by piece"＝少しずつ（英語講座）

Elements（画面に置いたアイテム）から、"Input Email"（勝手に名付けられていた）を選択

の、Value（値）

パスワードも同じようにやって、この状態。

"Sign the user up"という道具は、"User"というテーブル（thing）にレコード（entry）が追加され、それがCurrent Userになるということですね。テーブルにレコードが追加の話は上に書いてないけど、確認してそうなってました。

Log inボタン押下時の`workflow`を登録

今度はログインボタン。

ElementsのAn element is clicked。あれ、さっきこれやったっけ？という話ですが、今のこの操作は、トリガーの定義です。
Design画面のボタンから、"Add workflow"で始まると、このトリガーのところは自動でそのボタンがクリックされたときってなるので、この作業は不要なんですね。

無事、"An Element"がクリックされたとき、というトリガーが完成。まだ"An Element"が何なのか定義してないので、次から。
今作っているWorkflowの正方形のハコの位置が左端へ移動しました。"Sing up"の処理は右にずれた。これはわかりづらい。

"Element"で"Button Login"を選択。

"Button Login"をクリックしたときのトリガーって変更されました。お隣は、上で登録した"Button Signup"を押したときの処理。

"Account"＞"Log the user in" で、ログイン処理。

最後の１文の意味が分かりづらいけど、Signupと同じようにやればいいんですねと。

これで処理は終わり。この２つ目の処理のプロパティで、"Stay logged in"に"yes"となっていて、ログインしたらそのままログインしっぱなしにっててOK。それこそログイン。

で、左上のアイコンからDesignに戻るんですね。
このメッセージでいうグループは、おそらくボタンを囲む線みたいなもの、HTML的にいうと、<div>で囲む、みたいなものかと。

メールアドレスを表示

ログインしている場合は、メールアドレスを表示する仕組みを作ります。

Groupを選択して配置。正方形のハコができた。

グループを置いた瞬間は"Group A"という名前だったけど、いつの間にか"Group logged in"に変更されている。もうー。

グループが選択されている状態で、左ペイン下部のVisual ElementsのTextを選択すると、グループの中に配置される。左ペイン上部のElement Treeには、"Group Logged In"の配下に"Text A"ができていて、中に作成されたということを示している。

"Insert dynamic data"とは・・？と思って"...editme..."のあたりをクリックすると、水色の"Insert dynamic data"が出てくる。

そうするといつものリストが出て、その中に"Current User"があるので、選択。

's email。

Fantasticなことに、ログインされてれば、ここに表示されますよと。
Fantasticっていう単語、英語圏だとよく使うのかな。私のようなしょぼい英会話能力者の心理としては、使おうという発想が出てこないけど知っている、という単語。

ログアウトボタンを作成

最後に、ログアウトボタン。
Buttonを選択して配置。これも、"Group Logged In"の中に作るみたい。ログイン中でしかできないからかな。あ、あとで、このグループの表示条件をログイン中のみ、とかするのかも。

グループ内にできました。
テキストより下に置きたかったけどまぁいいか。

キャプション（Label）に"Log out"って書く。

で、workflowの作成。このパターン、慣れてきた。

ログアウトボタン押下時の`Workflow`を作成

微妙な位置に、ログアウトボタンの処理が作成されていた。

"Click here to add an action"で、"Account"＞"Log the user out"。

あら、これで終わり。確かにログアウトの処理って、あんまりないですね。そういえばログインしたときは、そのユーザーがCurrent Userになるという
ことだったけど、ここではCurrent Userを消す、という内部処理が走るのでしょう。

次はやはり、グループの表示ON/OFFの模様。

グループの表示ON/OFF機能

あれ！？Design側で表示条件を設定するのかと思ったら、Workflowでやるようです。"ログインした"というイベントをトリガーに。
登録にしろ、ログインにしろ、どちらも"ログインした"というトリガーで動いてほしいからですかね。

"General"＞"User is logged in"をトリガー。

ログインしたら、Elementを"Show"します。

どのElementかというと、、

"Group Logged In"です！（吹き出しでUIのプレビューが出る。気が利いてる）

次はログアウトしたら消すよ

同じことやるのか、まぁ１手だからいいかと思ってたら、パッと作った。こういうのよくないよ。

完成！

ここでボタンを押すと、アプリが消えてしまうのでそーっとプレビュー。

`Preview`で確認

あれ、ログアウトボタンが見えてる。そうか、ログアウトのトリガーで消すから、初期状態は見えていますね。バグ。初期値で非表示、というプロパティがありそう。

Sign upせず、いきなりLog inしてみたら、なんか考え中みたいになるな。

素直にSign upしてみたら、メールアドレスが表示された。かなり控えめに。

ログアウトしたら、表示は消えた。そういえばログアウトボタンは消えない。なにか手順を間違えたかも？

メールとパスワードを空にする処理は入れてなくて、そのまま残ってるので、そのままログインボタンを押したら、またメールが表示された。うまく動いているみたい。

なんかちょいちょい動きがぎこちないけど、チュートリアルだからまぁいいか。
すでにあるアカウントで登録時にすでに登録していますとか、ないアカウントでログイン時に登録がないとか、メッセージは必要ですね。でもこれはなんとでもなりそう。

ちなみに、Dataのレコードは見られなかった。チュートリアル用の環境だから仕方ないですかね。

おわりに

ということで、どのアプリでも大体必要な、ユーザー登録とログイン、ログアウトの処理でした。キモとなる部分はわかりました。"Account"の中の、SignupとかLoginを使えばいいだけなので簡単。

もし、ノーコードでこういうことができることを知らないエンジニアが、非エンジニアがこの仕組みを作ったことを聞いたら、ちょっと驚くレベルかと。
でも、本番で使うには、もうひと工夫必要。画面遷移とか、登録とログインは分けた方がいいとか。そういうことは、少しは設計や経験がないと、難しいかなぁ。ノーコードと非エンジニアは、単純に結びつくものではないと感じました。

スクラッチ開発でこういうのをやろうと思うと、やっぱ何かとめんどくさいので、ここだけ切り出してほしいくらい。ユーザー情報を登録するためにDBも必要だから、切り出すのは難しいか。

ではよきBubbleライフを。

Next

次はチュートリアル３に挑戦。
Bubbleのチュートリアル３：Saving and modifying data