ノーコードで有名なBubble。
何から始めていいのか分からない。
登録したけどどうすればいいのか分からない。
まずはレッスンチュートリアルから始めるのがいいです。
ここではレッスンの「Using conditions」について書いています。
Using conditions
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_110405242.jpg)
Using conditionsは、条件の使用で、ポイントを置いた時に色が変わります。
条件を使用し、入力してクリックした時に、アラート表示。
Using conditionsの所要時間は3分。(3分ではできませんでした)
まず、Using conditionsを選択して、startボタンを押して始めます。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m27d_114620407.jpg)
startボタンを押し、次に進みます。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_110443008.jpg)
Textをクリックして、テキストを入力します。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_110522550.jpg)
ここに文字を入力します。よく分からなかったので、とりあえずBubbleと入力。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111259270.jpg)
入力したら、文字サイズを変更します。
文字サイズ部分を24にしました。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111336883.jpg)
上部の矢印のConditionalをクリック
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111404141.jpg)
Define another conditionをクリック
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111411616.jpg)
When の赤枠の部分をクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111432402.jpg)
「This Text」 から 「is hovered」
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111443923.jpg)
「Select property to change when true 」をクリックし「Font color」をクリックしカラーを変更します。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111514966.jpg)
カラーを赤に変更しました。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111541393.jpg)
グリーン矢印の方へスクロールさせます。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111548892.jpg)
Input formsの「Input」をクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111557388.jpg)
ここに枠を作ります。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111630201.jpg)
次に、ボタンを作ります。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111725111.jpg)
矢印の所に同じようなサイズのボタンを作ります。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111737442.jpg)
ボタンに表示する文字は変えれます。
次に「Alert」をクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_111833640.jpg)
その下側に枠を作りました。サイズは適当です。
文字はNot emptyを入力。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112019892.jpg)
次は、先ほど作ったボタンに役割をつけます。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112039015.jpg)
「start/Edit workflow」をクリック。
アクションを追加します。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112044032.jpg)
クリックするとアクションメッセージを表示させるようにします。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112051528.jpg)
「Element Actions」 から「Show message」を選びメッセージを表示させるようにします。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112116220.jpg)
ボタンがクリックされたら、アラートが表示されるようにします。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112129038.jpg)
ボタンがクリックされた時だけ、表示。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112138463.jpg)
input testを選択。
‘s valueを選択
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112142288-1.jpg)
その後、is not emptyをクリック
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112146224.jpg)
これで完了です。
最後に右上のプレビューをクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112149833.jpg)
表示されたのがこのような感じです。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112201602.jpg)
文字の部分にカーソルを持っていくと、指定した赤色に変わります。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m31d_112331613.jpg)
入力をしてエンターを押すと、Not emptyが表示されます。
今回は、Using conditionsのレッスンをやってみました。
Using conditionsは、条件をつけることができます。マウスポインターを置いた時に色が変わるというような、条件付きの動作が可能です。
Bubbleのレッスン「Using conditions」の動画はこちら
その他のレッスンはこちら
コメントを残す