やってみよう「保存する」を押してみてください
通知・フィードバックメジャー(よく見る)
トースト
Toast / Snackbar
操作のあと、画面の下に小さなメッセージがピョコッと出て、数秒で消える。
別名スナックバーSnackbar通知バーフラッシュメッセージ
どこで使われている?
- よく見かける場所
- Gmail、Googleドライブ、各種アプリの保存・送信完了
- 使うとよい場面
- 「保存しました」「コピーしました」など、操作の結果を軽く知らせたいとき
- 避けたい場面
- エラーなど必ず読んでほしい大事な知らせ(数秒で消えるので見逃される)
補足Androidでは、ボタンなしの短い表示を「Toast」、ボタン付きを「Snackbar」と呼び分けます。
似ているものとの違い
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「トースト(Toast / Snackbar)」を実装してください。 動き:操作の結果(例:保存しました)を画面下部に小さなメッセージで表示し、数秒後に自動で消す。「元に戻す」などのボタンを1つ付けられる。 使う部品:Toast(例:sonner ライブラリ)
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Toast(例:sonner ライブラリ) |
|---|---|
| iPhoneアプリなら | 標準部品なし。自作のトースト / バナーとして伝える |
| Androidアプリなら | Snackbar(SnackbarHost)。ボタンなしの短い表示は Toast |
| Flutterなら | SnackBar(ScaffoldMessenger.of(context).showSnackBar) |
| React Nativeなら | Toast(react-native-toast-message など) |