今回はローコードツールbubbleにチャレンジする7回め（０からカウントしているので）です。前回は親ページのリンクから詳細を表示する別タブの詳細ページを表示するアプリを作成しましたが、今回は「条件を使用してアプリの機能を絞り込む」というチャレンジです。
どんな内容なのかわからないのですが、しっかりチャレンジしてみます。

いったいどんなものを作成する？

今回のレッスン内容ですが「条件を使用してアプリの機能を絞り込む」と言ってもどんなものかわかりません。なんとなく条件分岐みたいなのを行うんだろうなぁ・・・とは思いますが、何のアプリなのかはわかりません。このBubbleのレッスンはとても親切なのですが、最初に作るべきものがわからないのが玉に瑕なのですが、今回は特にわかりません。

というわけで、記事を書く前に４〜５回やってみました。４回めくらいで意味がわかったので整理してみます。

結論から言うと今回のレッスンで作るのは実用性のあるものではありません。条件分岐を理解するために２つの機能を試すものです。

１）マウスカーソルをテキストにあわせたときに色を変える
・マウスカーソルを被せた時という条件でテキスト領域の色を変えます。
・要素のプロパティを使って色を変える動作を行います。

２）入力項目に文字があればアラートメッセージを表示させる
・データが有ればボタンを押したときにアラートを表示します。
・Workflowを使用してアクションに条件を加えます。

さっそく始めてみます。
Academyのページから「Learn your way」で先に進み、「By watching」（キリンの場所）の２行目にある「Interactive lessons · a few mins each」リンクをクリックします。

「Using conditions」の右側のボタン「Start Lesson」をクリックすると開発コンソールが開いてガイダンスが表示されます。どうせ意味がわからないので先に進んでいってください。

マウスカーソルをテキストにあわせたときに色を変える

Textのところに矢印が来るところからスタートです。

まずは色を変える対象となるテキスト項目を配置します。左側の要素メニューから「Text」を選択して、画面上に配置しテキストの内容（ガイダンスでは「Hover me!」）を入力します。

プロパティウィンドウの下の方にある文字を目立つようにフォントサイズを変えます。（ついでに色も変えてみました）

次に要素の設定内で条件と動作を指定します。
プロパティウィンドウの一番上のタブの中から「Conditional」をクリックします。

次に条件を追加します。タブの下に現れる「Define another condition」をクリックします。

ここから条件を入力します。
Whenの項目でプルダウンメニューから「This Text 」「is hovered」（この項目のところでHover）を設定します。
「Hover」とは「マウスカーソルをそこにあわせたら」という意味です。

次にその下でその条件のときに行わせる動作を指定します。
ここで指定するのは「font color」です。選んだら次に変化させる色を指定します。

これで１つめの条件設定は完了です。

入力項目に文字があればアラートメッセージを表示させる

１つ目の動作が完了したので２つ目のWorkflowによる条件分岐に入ります。
まずは動作させるための入力項目、チェックボタン、アラート表示を配置します。

まずは要素メニューの下の方にある「input forms」「input」を配置します。

「input」（入力項目）を配置したら「button」を選択して「input」の横に配置して名称に「Click me!」と入力します。

次にアラート表示エリアを配置します。要素メニューから「Alert」を選択して入力項目の下に配置して内容に「Not Empty!!」と入力します。

次にボタンを押したときのWorkflowを設定します。
「Click me!」のボタンをクリックして「Click me!」のプロパティウィンドウを表示させ「Start/Edit Workfliw」のボタンをクリックします。

Workflowの画面に変わりますので「Click here to add an action」をクリックします。

表示されるメニューから「Element Actions」「Show message」を選択します。

動作を先に設定しましたが、次にこの動作を行う条件を指定します。
Workflow画面の上にあるタイル「When」をクリックします。

次に条件を設定します。右側に表示されるプロパティウィンドウ（黒いウィンドウ）のOnly When の欄に「input Text」「's value」（入力の値が）「is Not Empty」（空欄でなかったら）を選択します。

これで今回作るものは終了です。

次に実際に動かしてみます。

テストをしてみる

画面右上の「Preview」からテストモードに入ります。

テスト用のPreviewが表示されます。

まずは上のテキスト欄にマウスカーソルを合わせてみます。
ちゃんと色が変わるか確認します。

次に入力項目を入れてボタンを押してみます。
ちゃんとアラートが表示されるか確認します。

入力しないでボタンを押すとアラートは表示されません

今回は単純な内容なのでいろいろ試してみてくださいね

これで無事にこのレッスンは終了です。

次は「Defining a field as a list of things」（フィールドをリストとして定義する）・・・・・何を作るのか予想がつきません・・・・