← 一覧へ

やってみよう「メッセージを受け取る」を押してみてください。出てきた通知は上に引っ張ると消せます

通知・フィードバックメジャー(よく見る)

バナー通知

Banner Notification / Heads-up Notification

画面の上から通知がスルッと降りてきて、数秒で上に戻っていく。

別名ヘッドアップ通知通知バナープッシュ通知の表示アプリ内通知インアプリ通知

どこで使われている?

よく見かける場所
LINE、メール、カレンダーの通知、アプリ内のお知らせ
使うとよい場面
ほかの作業中でも、新しいメッセージにすぐ気づいてほしいとき
避けたい場面
急ぎではない知らせ(通知が多いとオフにされる)

補足画面の下に出る短いメッセージは「トースト」です。アプリの外(ホーム画面など)に届くものは「プッシュ通知」と呼びます。

似ているものとの違い

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「バナー通知(Banner Notification / Heads-up Notification)」を実装してください。

動き:画面上部からアイコン・タイトル・本文の入った角丸のカードをスライドして表示し、数秒後に自動で上へ戻す。上方向にスワイプしてもすぐに消せる。押すとその内容の画面を開く。

使う部品:自作(上から降りるパネル)。OSの通知なら Notification API
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら自作(上から降りるパネル)。OSの通知なら Notification API
iPhoneアプリならプッシュ通知(UNUserNotificationCenter)。アプリ内なら自作
Androidアプリならヘッドアップ通知(NotificationCompat で優先度を高くする)
Flutterならflutter_local_notifications(アプリ内なら自作)
React Nativeならexpo-notifications(アプリ内なら react-native-notifier)