Chienomiをプチリニューアル
開発::website
序
気づいた人もいるかもしれないしいないかもしれないが、Chienomiはこっそりリニューアルされた。
表面的な違いは、モバイルUIにおいて目次等のサイドメニューがトグル式になったことだ。
経緯
そもそもなんで従来、一般的なモーダルUIではなくフラットなページにこだわっていたかというと、Chienomiは初期はJavaScriptをデフォルトでは何もロードしないようになっていたからだ。
JavaScriptをロードしない以上、JavaScriptを前提にしたトグルUIは使えない。 Mimir Yokohamaではチェックボックスを使ったトグルUIを採用していたが、あれはいまいちだったので採用しなかった。
だが、現在はbase.jsというスクリプトを常にロードするようになっている。
このスクリプトはリニューアル前時点で
- Web Share APIのサポート
- Share to Fediverseのセットアップ
- Share to Fediverseのシェア機能
- コメントSPAの要求時ロード
- Chienomi MyPageの既読管理
を持っている。 このため、click to toggleを加えるくらいは支障がないのだ。
長く対応せずに来たが、いよいよ対応時期かなということで、モバイル版向けにメニューUIを採用した。
手書きSVG
ハンバーガーメニューのボタンはSVG、そして手書き。
Chienomiらしい一癖あるアプローチだ。
意外と変わったHTML構造
見た目にほとんど変化がないのに対し、HTML構造は大きく変わっている。
実は当初、現代的なグリッドレイアウトを採用することを考えていたのである。 これは実際に実装されて、リリースもされた。
だが、やってみたところ
- スクロールバーが邪魔
- ページキャプチャにやさしくない
という結論になり、見た目は戻すことになった。
この際、HTML構造はグリッドレイアウト版のまま、CSSだけ変更して元の見た目に戻している。
揶揄されることも多いダブルスクロールバーだが、結局このやり方が一番合理的なのだ。
もちろんアクセシビリティチェックも
構造変更がなされたので、Netsurf, Dillo, w3mを用いたアクセシビリティチェックも行った。
基本的なこととして、Chienomiは未知の要素として解釈されたとしても閲読に支障がないようになっているので、レガシーブラウザでも「読める」ようになっている。
そして、レイアウトをできる限り維持できるように、ブロックを逐次的ブロック以外として認識するような内容はwidthを利用したメディアクエリに含めている。
こうしたメディアクエリを解釈できるウェブブラウザは割と現代的なもの1で、CSSが中途半端に解釈されるリスクを低減できる。
実はメディアクエリを解釈するかどうかは軽量ブラウザにとっては結構な分水嶺になっているため、軽量ブラウザを対象にしたアクセシビリティ調整では特に効く。
さらに限りたければprefer-color-scheme media featureが使いやすい。2
Netsurf, Dillo, w3mのいずれもメディアクエリを解釈しないため、逐次ブロックとして表示される。 これは、旧モバイルUIに近いもの。
Share to Fediverseは遅延評価化
実はbase.jsで結構なサイズを占めているのがShare to Fediverseで、利用者は少ない割に相対的に重い。
これは個人的には気に入らないので、Share to Fediverseはクリック時に開く方式にして、遅延評価可能にした。
これは副次的メリットとしてスクリプトスタイルの問題がある。
base.jsはessentialという扱いで、かなりレガシーな環境でも実行できる構文で書かれている。
対して、遅延評価されるものはこの制約に縛られないため、ES5以上の構文で書ける。
これはChienomiのアクセシビリティルールとの関係だが、実運用上は割と重要だ。
CSP対応
これまでChienomiはonchangeとa要素のjavascript:を使っているところがあったのだが、CSPにunsafe-inlineを入れなくて済むように排除する変更をした。
個人的にはonchangeはまだしも、a要素のjavascript:は完全な代替を持たない機能なのであまり賛同するところではないが、今回の場合a要素であるべき理由が薄いのでbutton要素に置き換える方式をとった。
実はリニューアル続きのChienomi
ここのところかなりのペースでテンプレート更新が入るような変更を加えており、頻繁にフルビルドされている。
大部分はUXには影響のない、見えない部分だし、故にChienomiは昔から変化しないように見えるかもしれないが、結構最新事情を汲んでいるのだ。