bubble

【bubble】実用的なアラートの使用方法

こんにちは!ノーコーダーのIKDです。

今回は、bubbleで知らないと損する画像の配置方法・編集方法などをお伝えしていきます。

今回は、bubbleの実用的なアラートの配置方法・編集方法などをお伝えしていきます。

アラートは、入力情報が間違っていたときにエラーを表示させる重要な機能なので、しっかりと覚えてしまいましょう!

bubbleって何?という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください!

と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。

アラートの配置方法

まずは、bubbleのホーム画面から画像の矢印のところにあるNew appをクリックして新しいアプリを作成してください。

アラートの配置方法は、画像のようにテキストをクリックし、右の空白にドラッグ&ドロップするだけです!

もう慣れましたよね?

アラートの編集方法

次は、アラートの編集方法をみていきましょう。

  1. アラートに表示させるテキストを設定できます。
  2. これをクリックすると、勝手に上部に表示してくれます。

こんな感じですね〜

次回以降やる、グループを使うとまた違った挙動をしてくるので頭の片隅くらいには入れておいてください!

スタイルの編集

最後は、文字の大きさや色などを変更するスタイルの主な編集機能についてお伝えしていきます。

結構盛り沢山なので、頑張ってください!

  1. ここを空白にすると、スタイルを設定できるようになります。
  2. フォントの種類を変更できます。
  3. フォントの大きさ変更できます。
  4. B : 太文字にできます I : 斜め文字にできます U : アンダーバーを引けます
  5. 文字を左右・中央に寄せることができます。
  6. 文字の色を変更できます。
  7. 単語と単語の隙間を作れます。
  8. 行の大きさを変更できます。
  9. 文字と文字の隙間を作れます。
  10. アラートの背景を変更できます。
  11. アラートの背景色を変更できます。
  12. アラートの囲いを設定できます。(点線や直線など)
  13. アラートの角を丸くできます。
  14. 囲いの太さを変更できます。
  15. 囲いの色を変更できます。
  16. アラートの周りに空白を設定できます。
  17. テキストに影を落とせます。
  18. アラートに影を落として立体的に見せられます。

ちょっと多いですが、今まで学んできた内容とかぶっているものがほとんどです。

あとは、実際に自分で触ってどんな感じか確かめてみましょう!

まとめ

アラートは、エラーメッセージを表示させ、ユーザーの満足度を下げさせないためには必要なツールだと考えています。

一見、何のためにあるんだろう?と思う方もいると思いますが、その一手間がサービスの品質を向上させてくれます。

学んだ知識を生かして、いいサービスを手がけましょう!

今回は以上です!また次回お会いしましょう〜

ABOUT ME
IKD
UI/UXで差をつけろ | ノーコード関連のライター | プログラミングはたしなむ程度

COMMENT

メールアドレスが公開されることはありません。