← 一覧へ

やってみよう「未読ありで開き直す」を押して、線の位置を見てください

通知・フィードバックマイナー(知る人ぞ知る)

ここから未読の線

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 に区切りの行を入れる(自作)