未読行とページロード後に更新された行をテロメアで区別したい
メモです。ちゃんと調べてないので既出かも知れないteramotodaiki.icon
テロメアの太さは順位で決めた方がよいのではないか
未踏の会議でScrapboxを使った
全部緑なのでテロメアの色では「どこが新しいのか」わからない たまにリロードしたりするけど、そもそもリロードする前に全部を見れているとも限らない
テロメアの太さで分かると嬉しい
今は多分、logとかで計算している…？（未調査）
これだと短時間に書き込まれると長さに差が生まれづらい
https://gyazo.com/0300416e175072ee46685488c4dc6d42
そのページの行のうち、何番目に新しいかという順位から、それを10等分して太さを決めるのはどうか
100行あるうち50番目に新しい行は、テロメアの長さが真ん中くらいになる
pros/cons
pros: 短時間にどっと書かれても視覚的な差が生まれる（多分）
cons: あくまでページ内の尺度なので、そもそもページ自体が古いということが分からない
これはドキュメントとしては致命的
例えば「緑のテロメアだけこうなる」みたいにするとよいのか？
灰色のテロメアと比較できなくなってしまうが…
おおまかな長さは今のままで、細かい長さだけ変えると良い？
1px未満の差になってしまいそうだが…
こういう会議でテロメアが海苔になっているのを見て、もっと短時間で差が出て欲しいなというのはずっと思っていたので、これは嬉しいですMugiSus.icon
しかし、テロメアが1pxくらいまで細〜くなってるのを見て、「あ、このページ3年くらい更新されてないな」というのがすぐわかるのもかなり嬉しかったので、相対的な尺度でしか見れなくなってしまうのはウーンという感じです
(logで動いているとして、)logの底をもっと極端に大きくするとかで対応できないでしょうか？
ちょっと極端ですが、10分で半分になるみたいな話です
そうですね。幅の仕様を変更するとしたらそのへんですねshokai.icon
最初の1pxぶんの減少を10分あたりにもってくる
ページ毎にテロメア1pxあたりの時間量が変わるのは良くない
ぱっと見た時に「全体的に古いページだ」と認識できなくなる
あるページで幅1pxの行は1時間前更新なのに、あるページでは2年前更新とか
そもそも法則性を理解しにくくなる
行を追加したり、時間が経過する毎にズンズンと画面全体が動いてたぶん目に優しくない
視界の端で常にテトリスが行われててめっちゃ気になる、みたいな感じ
極端に新しい場合(1分未満とか)に限って、特別なアイコンが出てきてもいいかなって思いました(思いつきですが)MugiSus.icon
https://scrapbox.io/files/6380660679ffda0020300cd9.png
以下の2つが区別できない事が問題なのだろうshokai.icon
A. ページをロードした時点での未読
前回の訪問時刻よりも新しい行が未読
unread
B. そのまま議事録が進行し、新規追加された行に付いた未読マーク ページロードした後の新規作成・更新行も、未読扱いになっている
updated
普通のドキュメントツールでは、未読・既読の2分類だけでいい
scrapboxはちょっと違う
会議前にアジェンダが作られ、そこで会議前にちょっと議論が行われる
会議中にもリアルタイムに追記される
会議の参加者は同じページを2回ロードして、2回以上書き込む機会がある
書き込み往復率が高い
こういうscrapboxならではの使い方をするなら、3つで区別したい
既読
未読
ページロード後の新規作成・更新行
シンプルに「更新行」と呼ぶ
A,Bを区別できるようにする
ページをロードしてからしばらくすると、Aが全て灰色になる
Aをちょっと薄い緑、Bを濃い緑にする
default-light / default-dark / default-minimal
https://scrapbox.io/files/638065fb85c60f001dbba5a5.png https://scrapbox.io/files/6380660246ec9b001d71ce7d.pnghttps://scrapbox.io/files/638065ff625fe40023a45024.png
paper-light / paper-dark / paper-dark-dark
https://scrapbox.io/files/638065f4f58347001dec6217.pnghttps://scrapbox.io/files/638065f9349888001e377618.pnghttps://scrapbox.io/files/638065f17f0d08001d1b5a7d.png
3色と言いつつ、基本は「無」と「強調」の2つを識別するのがメイン
あくまで「強調」の中にも2種類あるな、意味まではわからんけど
でもグループとして識別はできる
という感じにした
色だけで3分類の全てを理解させる必要は無い
ロード後に更新された行の方は、未読行よりも幅が太いはずなので
上の色見本としてのスクリーンショットだとわかりにくいが、太さと合わせて見ると理解できるはず
めっちゃ良さそうです!!teramotodaiki.icon
いや、たしか30分あたりで最初の1pxが減るからいらないかもな
まあそのへんはテロメア3色化をやってみてから考えよう
ウィンドウをしばらく非activeにしてから、戻ってきた時に、更新行を未読行に移行するといいかも
https://scrapbox.io/files/638065eadfb68e001f8cdfa8.pnghttps://scrapbox.io/files/638065e7892084001d7505bf.png
--telomere-unreadのままだと、調整によりちょっと地味な方になった色になってしまう
鮮やかな方の--telomere-updatedを使う
page history
https://gyazo.com/cb4fea02ce76581a7c2ec4a48e285290
次のsnapshotで削除される行（赤）、更新された行（青系）が付いている
一番右まで行くと編集モードと同じスタイルのテロメアで表示される
赤の方の輝度を調整すると解決するはず
やり残し
https://scrapbox.io/files/638065e1b33c38001ddf4f55.png
力尽きたので
3色でどう感じるかの検証をproductionでさっさとやりたい
scroll bar overlayはスクロールしていない時は薄くなるので、新たな3色のテロメアでさらに薄くなった時にどう感じるか？等まで検証しなければならない
基本2色（濃い緑＆灰色）だが、Bが現れたら3色（薄い緑＆濃い緑＆灰色）にする
鮮やかな緑のほうが画面が綺麗
誰かが編集したら、画面全体を締めていたAのテロメアが一気に灰色になって、「誰かが現れた」のがわかって面白そう
混乱しそうな気もする
確かに。悩ましいですねteramotodaiki.icon
アクセシビリティ
色盲
輝度を変えれば間違いなく区別できる
色相ではなく輝度を変えるといいって聞いたことがあります。hata.icon はい。そのとおりですshokai.icon
bug
hoverで出てくるテロメア詳細の色調整ができていない
https://gyazo.com/556e7b532880a6d2ac373e3aa5b652a7
文字色を黒くする
Copy linkをmouse hoverした時の背景色
https://gyazo.com/a93f005cbbc5410b3b3e7114c61a038dhttps://gyazo.com/cf14a2e9ff031016dae8f755296cffc9
感想コーナー
これめちゃくちゃ良いですね。かなりしっくりきていますteramotodaiki.icon
色が変わることによって太さの違いも強調されている。この変更によって「幅に意味あるんだな」と気づく人が増えそう
たしかにshokai.icon