Bubbleのチュートリアル６：Using conditions

はじめに

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

これまでのチュートリアルをやってみた記事

1. Saving data
   • 位置情報をDBへ登録して、地図にマーカーを表示
   • データのInsert
   • 地図
2. Building a sign-up system
   • ユーザー登録とログイン、ログオフ
3. Saving and modifying data
   • SNSっぽい、投稿といいね
   • Repeat Groupの利用
   • データのInsert、Update
4. Building a slideshow
   • スライドショー形式のアプリ
   • Pluginの利用
5. Sending data to pages
   • Data（Things、DBのデータ）の共有
6. Using conditions ＜＜今回＞＞
   • 条件の利用

チュートリアルの記録

チュートリアルを選択

ログイン後のトップページ
＞ 左メニューのAcademy
＞ Learn your way
＞ By watching
＞ Interactive lessons
＞ Using conditions

今回のサブタイトルは、「Use conditions to refine what your app does」です。
"refine"という単語は語源からのイメージでは、もう一度(RE)綺麗にする(FINE)っていう感じの意味ですが、Google翻訳によると「条件を使用してアプリの動作を絞り込む」だそうです。（ちょくちょくある英会話の勉強）

さてこれまでやってきたチュートリアルの中で、今回のテーマっぽいところを通っていました。何かのテーブル(Data)からデータを取り出すときに、"Do search for"で指定するところ。"Order by"と一緒に、"Condition"もあったような気がします。これはWhere句だろうって書いた記憶が。

あとは、Workflowの中でも、ハコの１つ１つに実行条件がありました。例えばログインボタンの押下処理で、メインページへ飛ぶ処理は、ログインOKのときのみ、みたいな使い方をするんだろうなと。

もしそれだとしたら、言われなくてもわかるやつー。
でもBubbleのチュートリアルは、やってみるといつも学びがあって味わい深いので、今回も始めます！

１点目は、自分のプロフィールページの場合は編集できる機能か。
２点目は、なんだろう、「メールを送る処理」だけど、タスクが"メールを送る"というときだけ実行し、そうでないタスクのときは何もしないとかかな。
３点目は、コンテンツAのときはテーブルPからデータを取り、コンテンツBのときはテーブルQから、みたいな感じかな。

推測です。
ではStart！

マウスホバー時に色が変わるテキストを作成

かなり大きめなテキストを置く。

"Hover me!"にする。

"Hover me"って、私を浮き上がらせて！ではなく、私の上にHoverして！なんですね。"Hover over me!"が正式か。
ちなみに私を浮き上がらせて！は、"Let me hover(lift)!"のようです。（英会話）

フォントサイズを大きく。36pxにしておこう。

おっ！ここかー！

私が、ホバーされた時。

実施の選択肢がたくさんあるー。CSSで指定できるほぼ全部か。ノーコードではあるけど、これCSSを知らないと選択できないのでは。英語圏の人はできるのかな。
その中から、"Font color"。

"Font color"を、どの色にするか。赤を選んでとのこと。

なるほど。

同じ条件で、"Select a ～" から複数指定できるようだったので、"Font size"=42px(さらに大きく)と"Italic"も追加してみた。

次はWorkflow。
空でないとき、アラート・・・。"アラート"というと、悪いことみたいだけどそうではなく、ここではJavaScriptでメッセージをポンと出す関数がalert()なので、それのことなのかなぁ。↓

条件によって、アラートを出す処理を作成

Input BoxとButtonを置いて

"Click me!"に。

お！？AlertっていうElementがあるのか。

それを置いて

"Not empty!"と書く。通常は空のときに出すようなElementだと思うから違和感があるけど、まぁ練習なので。

よし！ボタンのプロパティから、ボタン押下時のWorkflowを作成します。

Workflow画面に移って、"action menu"の"Element Action"＞"Show message"。
"Show message"なんていう処理があるくらいなので、開発者の視点としては、ここはフロントエンドなんだなと思います。

ページに、Alertが１つしかないから、Elementに"Alert Not Empty"が自動的に選ばれるそうです。なんかちょっと余計なお世話感が。

あとこのプロパティ画面では、出方が細かく指定できますね。0.5秒でじわっと出て、2秒表示されて、0.5秒でじわっと消えるんだ。JavaScriptのalert()ではなかった。もっとしっかりしたやつ。

あ、そうか。今のままだと、ボタンを押すと必ず表示されますね。

そっちでやるのかー！プロパティの"Only when"で指定するのかと思った。確かに根本でやった方が効率的ですね。

最初のハコのプロパティです。ここの"Only when"で

プルダウンで条件を選ぶと、英文で条件が書かれます。英語圏の人は楽なんだろうな。

おっと、今回は短い。Previewです！

Previewは本来細かくやった方がいいとは思うけど、チュートリアルとしては、全部終わってからPreviewします。逆にいうと、Previewできるということは終わり。なので、Previewしてね！と言われるとうれしくなりますｗ

プレビューで動作確認

ここにマウスを乗せると・・・

よさそうですね。フォントサイズが36→42にしたけど、Italicをつけたから変化がわかりづらかった。でもまぁいいや。

文字を入れてボタンを押すと、じわっと出てきます。

改めてこのElementのプロパティを見ると、色を変えたり、文面で"Insert dynamic data"が使えたりします。

おわりに

画面のElementでは何かの条件でCSS・Styleを変更すること、処理ではボタンを押すというだけでなくほかの条件も加えて実行することもできることを学びました。
他の場所にも"Only when"と"condition"はたくさんあるので、使う場面は多いですね。

ドロップダウンリストで対象を選べるのは、自由に文字入力するよりはかなり制限されてていい感じです。リストの選択肢が多いとしても。
ちなみに私は、CSSで"マージン"のスペルがわからなくていつも戸惑うので、選択だとうれしいｗ margin mergin

ではよきBubble＆条件縛りライフを！

Next

Bubbleのチュートリアル７：Defining a field as a list of things