【NoCode】Bubbleのチュートリアルを初心者向けに解説！ ⑥ 条件を定義してアプリの機能を改善する

皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。

今回は、NoCodeツールBubbleのチュートリアル Lesson 6 を初心者向けに解説していきます！

    この記事で学ぶこと
・Element に対して条件を定義する方法
・Workflow に対して条件を定義する方法
・Alert の表示方法

チュートリアルの概要につきましては、次の記事で解説しましたので、まずはこちらをご覧ください。

1. 実装するサンプル

「テキストにマウスのカーソルが重なったら」「入力フォームが空白ではない状態で、ボタンがクリックされたら」などの条件を定義することによって、処理を場合分けする方法を学びます。

今回学習する、「条件の定義」は、Webアプリ開発において非常に重要なので、気合を入れて頑張っていきましょう！

2. Element に対して条件を定義

「Text」を配置し、「Hover me!（マウスカーソルを合わせてください！）」に変更し、文字サイズを「24」に設定します。

プロパティの「Conditional（条件文）」タブを選択し、「Define another condition（別の条件を定義する）」をクリックします。

「When」をクリックし、「This Text is hovered」となるように順に選択していきます。

これにより、「このテキストがホバーされる（マウスのカーソルが重なる）とき」という「条件」を追加することができました。

次に、「条件」が満たされた場合の処理を定義していきます。

「Select a property to change when true」をクリックします。
「条件が真の場合に変更するプロパティを選択する」という意味です。

「Font color」を選択し、自分が好きな色に設定します。

これにより、「テキストがホバーされる」という「条件」を満たした場合のみ、「Font color」を「設定した色に変更する」という処理が実行されるようになりました。

3. Workflow に対して条件を定義

「Input」を配置します。「Input Test」という名前が設定されていることを確認しておきます。

「Button」を配置し、「Click me!（クリックしてください！）」に変更します。「Button Click」という名前が設定されていることを確認しておきます。

「Alert （アラート）」を配置し、「Not empty（空白ではない）」に変更します。「Style」を選択することで、「Alert」のデザインを変更することができます。

「Alert Not Empty」という名前が設定されていることを確認しておきます。

今の状態では、この「Alert Not Empty」は表示されないので、「Workflow」に「条件」を定義することで、表示・非表示の場合分けを行います。

「Button Click」をダブルクリックしてプロパティを開き、「Start/Edit workflow」をクリックします。

「Click here to add an action」をクリックし、「Element Actions」から「Show message」を選択します。

「Element」に先程作成した「Alert Not Empty」を選択します。

これにより、「Button Click」をクリックすると、「Alert Not Empty」が表示されるようになりました。

「Button Click がクリックされるとき」というイベントに対して「条件」を定義していきます。

「Button Click is clicked」をクリックします。

「Only when」に「Input Test's value is not empty」となるように順に選択します。

これにより、「Input Test が空白ではない時だけ」という「条件」が定義され、これを満たす場合のみ、「Alert Not Empty」を表示することができるようになりました。

ここまでの「Workflow」の作成により、以下の2つのパターンに場合分けすることが可能になりました。

パターン 1
①「Button Click」がクリックされる
②「Input Test」が空白ではない場合
③「Alert Not Empty」を表示する

パターン 2
①「Button Click」がクリックされる
②「Input Test」が空白である場合
③「Alert Not Empty」を表示しない

以上で、今回の実装は完了です。「Preview」ボタンをクリックし、テストを行ってください。

4. まとめ

最後に、今回のチュートリアルの流れをまとめます。

①「Text」を配置し、「Conditional」タブで条件の定義を行う
②「Input」「Button」「Alert」を配置する
③「Button」に対し、「Workflow」 を作成する
④「Element Actions」の「Show message」を追加する
⑤「Button」のクリックイベントに対し、条件の定義を行う

今回のチュートリアルで、「条件の定義」について学習したことによって、より本格的なWebアプリの開発が可能になるはずです。

引き続きBubbleの理解を深めていきましょう！
次のチュートリアルはこちらです！