esa.ioをいい感じにしていこうという気持ちになった

Quetzal 技術

2020-01-19-quetzal.png

usagiga/Quetzal: Custom CSS for made esa.io pretty.

ケツァールって世界で一番綺麗らしいんですけど、カワセミのほうが綺麗では?

Quetzal

中央寄せがしたい

esa.io では、大きめのResolutionでは基本的に見るべきものが左に偏ります。編集で使うtextareaしかり、記事しかり。 長時間操作していると斜視になりそうだったので、中央揃えをしてやろうと思って作ったUserScriptがこれです。

2020-01-19-gatagata.gif

真ん中に寄りました。 寄ったけど、スクロールでガタガタ動くようになりました。 フロントエンドできないマンはたった一行CSSを当てるだけでページの挙動を不安定にできるんだね。かなしいね。

TampermonkeyでCSSを当てる

カスタムCSSを当てるための基盤?みたいなのがよくわかんなかったので、お手軽にTampermonkeyでやりました。

// Define CSS
let css = `
.layout-post__main {
    margin: 0 auto;
}
`;

// Apply CSS into <head>
let styleElem = document.createElement("style");
styleElem.type = "text/css";
styleElem.innerText = css;
document.head.appendChild(styleElem);

ES6ならテンプレート文字列があるのでこれでOK。ES6はこういうモダン?まとも?な構文が普通にあっていいですね。これについては逆にそれまでなかったの?って感じですけど。 起動タイミングは @run-at document-start でいいみたいです。これ、ドキュメントでは「なるべく早く挿入する」としか言われておらず、よくわかんないけど <head> 生成途中で動いてるみたいです。なんかの拍子で元のCSSの読み込みより先にカスタムCSSをぶっこまれると死にますけど、現状死んでいないので問題ないと思います。

ただちょっと思うのは、開発するときはsassだったりminifyされていないCSSをいじってるんでしょうけど、こっちはそこにあるCSSをいじるしかないのがちょっとつらいってことですね。いくつかデカい変更を乗っけたいと思っているのですが、果たしてどこまでやっていけるか。

まとめ

すごく思うんですけど、 esa.io ってVue.jsとjQueryの過渡期にある(ように見える)ので、陳腐化する可能性がデカいですよねコレ。minify用のツールがかしこくなったり命名規則が変わったりするだけで即死にます。諸行無常。

esaチームはめちゃめちゃ活発に開発していて利用者としては好感が持てますけど、開発者?DIYおじさん?としてはその変更にどう当たっていくべきなんでしょう(変更しやすくしろって言っているわけではない)。あまり密な設計にせず、API使ってクライアントを作った方がいいのかもしれませんね。