【Bubble】AirAlertでおしゃれで簡単アラート表示

Bubbleのプラグイン「AirAlert」を使ってアラート表示を簡単に実装する方法を紹介したいと思います。

Bubbleのデフォルト機能でもアラートの表示は簡単に出来ますが、エレメントの数が増えてくるとアクションを設定するのも非常に面倒になってきます。
そして、Alertの文言を変更する際もエレメントを探す手間がかかります。

AirAlertを使うとそのような手間も省けますし、おしゃれな感じでアラートを表示することが出来ます。

株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。

AirAlertを使ったアラート表示のイメージ

このような感じです。

こちらのプラグインをインストールします。

ボタンなどを配置し、Workflowでアクションを設定する際にAirAlertを呼び出します。

今回は以下のようにAirAlertのSuccess, Information, Warning, Errorの4つのタイプ（Notification type）を試せるようなボタン、アラートをCustomして表示するためのボタン、アラート表示を消すためのボタンを配置しました。

Successボタンをクリックした際のアクションはこのように設定しています。Plugins配下にAirAlert関連のアクションがありますのでそちらから設定を行います。

Customボタンはこちらです。Customの場合は、Alertの色や表示する秒数などを自由に変更できます。

今回、AirAlertのClear allのアクションは表示されているアラートを消すことが出来ます。あまり使うことは無さそうです。

AirAlertのデフォルトの表示秒数は４秒程度に設定されています。ちょっと長いなぁ、と感じる人もいるかと思います。

なんとAirAlertではデフォルトの表示秒数も変更可能です。Installed PluginsからAirAlertを選択するとDefault Durationという項目を見つけることが出来ます。こちらでデフォルトの表示秒数を変更できます。

他にもデフォルトの背景色や文字色なども変更可能です。

とても簡単にAirAlertを利用できることがわかってもらえたかと思います。

デフォルトのAlertを使うのに比べて圧倒的に開発効率が上がり、しかもおしゃれにアラートを表示できるかと思います。

是非活用してもらえると幸いです。