やってみよう「未読ありで開き直す」を押して、線の位置を見てください
通知・フィードバックマイナー(知る人ぞ知る)
ここから未読の線
Unread Divider
チャットを開くと、まだ読んでいないメッセージの手前に「ここから未読」の線が入っている。
別名未読ライン新着の区切り線ここから新着最後に読んだ位置
どこで使われている?
- よく見かける場所
- LINE・Slack・Discord などのチャット、メールの一覧
- 使うとよい場面
- たまった新しいメッセージを、どこから読めばよいか示したいとき
- 避けたい場面
- 新着がいつも少ない画面
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「ここから未読の線(Unread Divider)」を実装してください。 動き:チャットや一覧で、最後に読んだ位置のすぐ後に色の付いた横線と「ここから未読」の文字を入れ、開いたときにその線のあたりまで自動でスクロールする。 使う部品:最後に読んだ id を覚えて、その後に区切りの要素を入れる
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | 最後に読んだ id を覚えて、その後に区切りの要素を入れる |
|---|---|
| iPhoneアプリなら | ScrollViewReader で区切りまで移動(自作) |
| Androidアプリなら | LazyColumn に区切りの行を入れて scrollToItem |
| Flutterなら | ListView に区切りの行を入れる(自作) |
| React Nativeなら | FlatList に区切りの行を入れる(自作) |