esa.ioの記事を真ん中に表示したり白くしたりした話

Quetzal 技術

2020-01-25-simplified.gif

記事が中心に寄っていて、それでいてガタつかないスッキリした挙動だ。

なお、このブログは感想をはじめとする四方山ばなしであるため、入手や意見やPRなどはGitHubを見てください。 usagiga/Quetzal: Custom CSS for made esa.io pretty.

変更点

真ん中に表示した

記事部分をCSSオンリーでセンタリングした際、スクロールするとガタつく挙動をしていましたが、flexboxやMutationObserverと格闘した結果、ガタつかなくなりました。当初の目的であった斜視の防止ですが、これならわりあい満足ですね。

2020-01-24-accordion.gif

あと、センタリングの影響でメニューが記事上にふっとびました。flexboxや display:fixed やリアクティブな挙動と血みどろの戦いを経て、多少ユーザビリティを下げて解決できればそれでいいだろうという判断で落ち着いた形です。ただ、そのままだと目次がスペースを食ってしまうので、スマホなど小さな画面では出てくる折りたたむボタンを召喚しました。

白くした

2020-01-29-white-menu.png

ページ全体で使う色を減らして記事にフォーカスできるようにしました。ヘッダーとかボーダーとか検索窓とかです。

esaユーザーの間ではわりあい知られていることだと思うのですが、 esa.io では 各部のデザインを @ken_c_lo さんが理論的に突き詰めた上で構成されています 。今回の変更で白が多くなったことでバランスが崩れて若干冷たい印象になったと思っており、こうやって素人がいじくると変になることを思うと、デザイナーの仕事ってやっぱすごいですね(小並感)。

ただ、ぼくは気が散りやすいため、均整の取れたデザインよりも、可能な限り視界に映る情報を減らすということを優先しました。毎日使うものだからこそ模様替えをしていって、自分の落としどころにもっていきたいというスタンスです。

Quetzalの実装

九龍城を打ち立てろ!

コードを見るとわかるのですが、結構エグい実装をしています。

目次のコンテナを監視してNodeを移し替えたり、複雑で実行されるかもわからない非同期処理のフックを強引に回避したり。JSを使わない人間からすると typeofでなんでもobjectって言われてそれはそうだけど 💢 ってなったり、 undefined チェックやElement・Nodeなどの継承関係の理解など作法が多くてヤバい。パパ~~~Optional Chainingはやく実装して~~~?

あと、クラス使うとかいい感じのカプセル化っぽいことをしなかったため、コードがグチャグチャです。 再利用できるところはしましたが、あとからあとからやることが増えて違法な増築が重なり、抽象化できてたりできてなかったりします。危険です。果たして次弄りたくなったときに弄れるのか?

そのインスペクタでVueを弄れ!

Vue.jsやSCSSでいい感じにするのはなんとなくやったことがあるのですが、Prodのminifyされているコードの上に処理をかぶせるのはキツいですね。Vue Devtoolが使えない中、インスペクタで挙動を観察しながら「これは多分 v-if」「これは多分 v-bind」とかを特定して意図した挙動に変えるのはもう縛りプレイなんだよな。

ただなんか、プロプライエタリでも手のつけようがあるという知見が得られました。こうした技術は、転用できる対象がめっちゃ広い(Web全体!)ので、夢が広がった気がしますね。気がするだけで、実際は作業工数とかアイディア勝負ですが……。

まとめ

全体的にフロントエンドできないマンにはきびしかったです。

そのうちリファクタリングします。 まとめじゃなくてこれは意気込みでは?