みなさんこんにちは！ Ryoです！
普段は学生NoCodeエンジニアとして、Bubbleをメインとした受託開発を行ったり、NoCode学生会という学生限定のNoCodeオンラインサロンの運営をしております。
今回は以下のように、プラグインを用いておしゃれなアラート機能を実装する方法を解説していきたいと思います。
アラート機能は様々な用途で使えてかつ、おしゃれなアラートであればUIも向上させることができます。
実装も簡単なので是非習得してみてください。
では、いきましょう。
プラグインをインストール
まずPluginsタブのところから、[AirAlert]と検索します。
すると以下の画像のようなプラグインが出てくるので、それをインストールします。
そしてプラグインの詳細を見てみると分かるように、入力項目がたくさんあります。
このプラグインは以下のように4つのアラートで使い分けることができます。
- Success→成功時
- Info→情報の提示
- Error→エラー時
- Warning→注意
そして、上記の画面でそれらの色をそれぞれ変えることができます。
Bgcolorというのは、BackGround Colorのことで背景色を変更できます。
Text Colorはテキストの色を変更できます。
また、入力方法としては.bubbleの色変更と同じく、#と6桁の16進数を使います。
エレメントの設定
次にエレメントの設定をしていきます。
まずボタンを適当に3つ配置していきます。
特にエディターはいじる必要はありません。
ここでは説明を分かりやすくするために[Custom],[Standard],[Clear]という名前にしておきます。
ワークフローの設定(Custom)
次にワークフローの設定をしていきます。
まずCustomと書かれているボタン(以下カスタムボタン)の設定をします。
カスタムボタンのワークフローを開いて、
[Click here to add an event…]→[Plugins]→[AirAlert Custom]
と選びます。
そこでアラートの全ての設定をいじることができます。
各項目の設定内容は以下の通りになります。
- Heading→題名
- Text→内容
- Icon to display→アイコンの表示
- Animetion→表示時のアニメーション
- Show closse button→アラートを消すボタンを搭載するか否か
- Position→アラートの表示場所
- Hide After→表示時間
- Background color→背景色
- Text color→テキストの色
- Progress bar color→タイムリミット用のバーの色(実際に見た方が分かりやすい)
- Max notifications at once→一度に表示できるアラートの数
- Text Alignment→テキストの並びの変更(中央揃えなど)
ワークフローの設定(Standard)
次に、Standardと書かれたボタン(以下スタンダードボタン)の設定をしていきます。
こちらでは、
[Click here to add an event…]→[Plugins]→[AirAlert Standard]
と選びます。
Standardを選択した場合は、細かい設定については既に設定されています。
決めることができるのは、アラートのタイプとタイトル、テキストだけになっています。
Standardを使った場合はCustomを選んだ場合と違って、以下の画像のプラグインの設定の色に依存します。
ワークフローの設定(Clear)
最後に、Clearと書かれたボタンの設定をしていきます。
ここでは、
[Click here to add an event…]→[Plugins]→[AirAlert Clear all]
を選びます。
これで完成です。
それでは、プレビューで確認してみましょう。
以下のような感じになっていれば大成功です。
あとがき
いかがだったでしょうか？
今回はなかなか面白いプラグインだったのではないでしょうか？
.bubbleはプラグインを使いこなせるようになるだけでも、UI改善であったり面白い昨日の実装が可能になります。
AirAlertは知ってさえいれば誰でも簡単に実装できます。
今後もこんなプラグインの使い方や応用方法、Bubbleの知っておくと便利な豆知識などを発信していますのでぜひ他の記事も読んでみてください。
ためになった方はTwitterやFacebookなどで拡散お願いいたします。
それではまた次回の記事でお会いしましょう！！
