未来エンジニア養成所Blog

月単価180万以上のプログラミング講師がプログラミングを皆に楽しんでもらうための情報をお届けします。

【Bubble/ノーコード】「Alert(アラート)」の使い方

title


完成イメージ

「Alert(アラート)」の使い方と、ワークフローで条件を追加する方法を解説します。


完成イメージは次のようになります。

Finish


何か文字を入力して、ボタンをクリックすると、「アラート」とアラート表示されるようにしていきます。

また、文字が入力されていない時は、アラートが表示されないような設定もあわせて行っていきます。



フォームの作成

まずは入力フォームを作成します。


「Input」エレメントを使って入力フォームを作ります。

Inputエレメント



次に「Button」エレメントを配置します。

Buttonエレメント



「Input」エレメントと「Button」エレメントを次のように配置します。

ボタンの名前は「クリック!!」にします。

エレメントの配置



次に「Alert」エレメントを配置します。

Alertエレメント



表示は「アラート」としました。

Alertエレメントの配置



ワークフローの作成

続いて、ユーザーがボタンをクリックした時のワークフローを作っていきます。


ボタンのワークフローを作ります。

ボタンのワークフロー



Workflowタブに移動します。

「When Button Click is clicked」の部分は「Buttonをクリックしたとき」になります。

「Click here to add an action...」をクリックしてアクションを定義します。

アクション定義



エレメントのアクションを起こしたいので、「Element Actions」を選択します。

Alertの「Show message」を選択して、アラートのメッセージを表示すると設定します。

Show messageを選択



どのアラートを表示するか聞かれますので、先ほど作成した「Alert Not Empty」を選択します。

(ページ内に「Alert Not Empty」のアラートしかないので、デフォルトで設定されます)

Alertの設定



「Only when」で、「入力フォームに文字が入力されている時だけアラートが表示される」ように設定します。

OnlyWhen



先ほど作った「Input」エレメントを選択します。

Input



「's value」を選択します。

Value



「is not empty」(空ではない)を選択します。

not empty



完成

これで、「入力欄」の「値」が「空ではない時」に「アラートを表示させる」という設定ができました。


これで完成ですので、プレビューで動作を確認しましょう。

title


文字を入力して、ボタンを押したらアラートが表示されます。