前回作ったライバーの配信状況を眺めるツールをいろいろアプデした
OGP対応
対応した
特にアイコン周りが最低限何を用意すればいいのか改めてよく分からず調べた
2024年にもなっていまだにアイコンが6つも必要とかいう話もある。SVG一個にしてほしい
とりあえず透過で大小、iOS用に背景付きのものを設定した
時間帯別背景色
スクロールしているときにパッと見で時間帯が分かりたいので背景色をつけた
深夜帯から朝へ、昼から夜へといった時間帯の移り変わりがグラデになってるとエモいなあ…と思ったのでいろいろやってみたものの、ちょっと汚くなりがちだし見づらかった
結局、朝・昼・夕方・夜・深夜の5色だけにしてグラデにはせず単色での塗り分けにした
nowバーの設置
背景色をつけても現在の時間がどこなのか分からないので、現在の時間より後のイベントの上の位置にnowバーを置いてみた
でも画面を横断するような形だとちょっと邪魔な感じがするので、左端に出すようにした
あと「現在の時間より後のイベントの上」ではなく「現在時の0分位置」に出すようにした
日付バーの設置
今までは各時間ごとにヘッダ表示を入れてたけど、邪魔なので日付だけにした
あと前後の日付に遷移できるようにスクロールボタンも追加した
日付だけだと今日なのか昨日なのか明日なのか分からないのでtodayとかラベル表示も入れたいけどどうも収まりが悪かった
ハッシュタグ表示
前回書いたけど、タイトル文字列からハッシュタグのリストを抽出するようにした（表示は先頭の一つだけ）
コラボイベントとかやってると同じタグがつけられていることが多い
コラボレーター情報と同様にホバー時にハイライトする処理を入れて、グルーピングが分かりやすいようにした
新着表示
ページを開いている間に新しく追加されたイベントが分かるように新着表示欄を実装した
ボタンを押すとリストが開き、
リストから選択すると当該イベントまでスクロールして詳細が開く
ダイアログ周りの最適化
イベントカードをクリックしたときにはdialog要素で詳細を出すようにしていた
数百件のイベントがそれぞれ詳細表示用のdialogを内包している
このときiOSだとイベントをクリックしてからdialogの表示に0.5秒くらい時間がかかってしまっていた
JSのモーダルライブラリだと基本的に呼び出すときに初めて要素がマウントされるものだけど、dialog要素だと最初からマウントしているため件数が多いと処理的に重くなってしまうようだった
usePopover
dialog要素と似たものにpopoverという属性があり、どちらも最前面に表示できる。popoverのほうがノンモーダルなので表示中に背景面の操作もできる
使い勝手的にpopoverにしたかったのでdialogからpopoverに変更した
さらに、開いてから初めて中身をmountするようにコンポーネントを作った
コンポーネントと制御関数を返すコンポジション
オプションで最初からマウントするかどうか選べるようにしてる
特に中身が動的な要素だと開いてないのに無駄に処理が実行されてしまっていた
あとpopover属性の場合、iOS Safariでは領域外をクリックしても閉じないというバグが丸1年放置されてるらしいのでその対応も入れた
ボタンサイズ
ボタンサイズはとりあえず40x40pxくらいで作ってたけど、モバイルだと若干小さく感じていた
どうやら44x44pxは最低限必要らしいので、そのサイズに揃えた
ただ表示上邪魔なことも多いので、ボタン自体は44pxにして中身の表示を控えめにするなどした
ただあまり見た目サイズが小さくて乖離してるのも良くは無さそう
あとやりたいこと
ライバーのフィルタ周りのUIが作りかけのままなので刷新したい
フィルタのセットを複数作って切り替えられるようにしたい
イベントを複数選んでマルチビュー
簡易通知機能（サーバーを使わない実装。ブラウザを開いてればイベント開始時間に通知）
テレビ欄みたいに左端に時間帯のバーを置きたい（邪魔かも）
タグを右クリックで選択タグのみフィルタ表示
初見で誰が誰だか分からないのでグループ名や何期生かをアイコンに表示するオプションつけたい
仮想スクロールバー（スクロールの有り無しでコンテンツ幅が変わらないようにスクロールバーの幅をゼロにしたので、代わりにオーバーレイでスクロールハンドルを表示したい）
リサイズ時のトップ位置保持（画面内に表示中の一番上のイベントをターゲットにし、画面リサイズ時には常にそのイベントが表示されるようにスクロール位置を調整する）
イベント詳細を開いているときに前後イベントへの遷移（ホイールスクロールで流し見したい）
フィルタしたときのトランジション
サイト名や変数名で使ってるライバー（liver）って肝臓のレバー(liver)と同じだからなんか名前変えたい気はする
virtual liverやVTuberにすればいいんだろうけど、一昔前の呼び方って感じがするし、日本語としてはライバー（あるいは箱内ではタレント）という呼称を公式にしてる感じはする