UIを作る、減らす、完全になくす
2022/11/10に行われた、開発部全体会 2022年秋用の発表資料です
UI作る時にどんな事を考えてるかを話します
あんまりまとまりはない！
3つそれっぽく並んでるのに「まとまりない」って言うの笑った
作ったり減らしたり完全になくしたりしてるなあ
という振り返りです
UIを作る
特殊なオリジナルUI
ヒアリングの結果、新旧と既読未読の2種類の情報が知りたい事がわかった
ちゃんと人の話を聞くのは重要
ページ内の細かい部分ごとに
新・旧を知りたい
太さで表現
既読・未読を知りたい
色で表現
本当に気持ち良いUI
さらに
行毎にpermalinkがほしい
詳細な更新日時も知りたい
コンパクトだけどわりと多機能になった
できる事を説明する
全文検索の対象
タイトルと本文の両方
タイトルのみ
タイトルだけを検索している時は、検索結果のプレビューの本文部分を黄色くハイライトしないようにしている
ハイライトすると結局本文も検索してるの？どっちなの？と混乱するから
ラベルで説明したら負けだと思ってる
PDFや画像が検索できる事を教える
「検索する」というタスク遂行だけでなく
「何が検索できるか」を教える事も意図している
ロックして一部だけ有料にとかも出来そう
そうなんですよ。気づいてしまいましたか
こういうUIでサーバー側の仕様（というか都合）も大丈夫か？も検討する
簡単プロトタイプ
Chrome devtoolのDOM Element複製・編集・削除が便利
これめっちゃいいいいい。知らんかった
毎回頑張ってUserScript, UserCSS作ってた
機能の存在は教えたい。でもあなたに権限はありません、を理由つきで説明する
Ownerは、Owner権限を移行したり、Adminを任命したりできる
これをOwner以外にも教えたい
でも、もちろんOwner以外には権限が無い
全員にボタンをDisableの見た目で表示し、popupで「あなたがソレをできない理由」を表示する
Disableだけど押せるボタン
APIのユーザー権限チェック機構がちゃんと動いてるか誰でも確認できる
丁寧
ボタンを隠すのではなくて動作しないけど敢えて見せておくのが大事なんですね 
社内ドッグフーディングとかでのデバッグ的な役割も兼ねている
これめっちゃ嬉しい
toB系サービスだと「管理者しか実はできないこと」が多くてすぐブラックボックスになる。
わかる
UIを減らす
画面が小さいと入り切らない
mobileでは、テロメアの詳細時刻と行permalinkのメニューが邪魔で行頭にカーソルを置けなかった
指はデカい。誤タップしてしまう
タップではテロメアの詳細時刻を出さない
マウスクリックでは出す
あきらめと、優先順位付けが重要
なるほどなああああ。動かないって思ってた
というふうにLTでは話したが
その後、タッチ長押しでテロメア詳細を表示するよう改良した
結局あきらめなかった
UIを完全になくす
無いほうがいいUIは、無いほうがいいんですよ
デフォルトで最良な設定になっているのが一番いい
Auto project backupのenable/disableボタン
なくした
システムが安定していないうちは、緊急用のUIが必要だったりする
リリースした後、たまに見直すといい
みたいなボタンをなくす役割は2つ
更新がある事を教えてくれている
押すとアプリがリロードして、更新される
Scrapboxも昔こういうボタンがあった
適切なタイミングで自動的に更新されていれば、こんなUIいらない
でも難しい
タイミングを間違えると
保存してないデータが消える
編集作業をストップさせてしまう
なくしました
ユーザーがAタグをクリックした時に、ローカルに新しいassetsが用意できていたら、pushStateではなくHTMLまるごと再読込する普通の画面遷移を行う
すごい！
これは本当に天才だと思う。他で聞いたことないけど名前ついてるのかな
いい話
これいかにすごいか、逆に実装されてないSPAサービス使うとすごさを実感する
某サービスはReload表示でてだいぶ面倒臭い時がある
技術的に難しいことができると、手動のUIが不要になる?
デジタルサイネージを作ってた時に似たようなものを実装してみた覚えがある
発動条件
cache storageに新しいassets cacheが準備できている
SyncStoreに未pushのデータが残っていない
未保存のデータがあるならpushStateにする
構成要素
HTML/JS/CSSなどの素材を一括ダウンロードしておいて、アクセス毎にサーバーに取りに行かないようにするしくみ
初回レンダリング速度が上がる
全てのAPI通信に「今サーバーが持っているassetsのバージョン情報」が書かれている
ServiceWorkerがこれを自動的にチェックし、ローカルのassetsを更新する
assets cacheがかなり高い頻度で更新されるようになった
pushStateではない、いわゆる普通の画面遷移でのチラつきが低減した
常にUI減らしたい。ボタンが多いとイルカが飛び始める
強い
おわり！！！