音楽サーバ"Mopidy"のフロントエンドを作る：12 Bootstrapテーマ導入とCSS軽量化
音楽サーバ"Mopidy"のフロントエンド「Mopidy.Finder」が出来るまで、第12回です。
今回は、Bootstrapテーマ導入とCSS最適化の流れを追って行きます。
デザインセンスはひとにお任せ
まず。
私のスキルセットは若干フロントエンド寄りとはいえ、デザイナではありません。
自分のデザインセンスには、一切の信用を置いていません。
職業デザイナさんと仕事をするたびに、毎回感心させられます。
あの人たち、どうやってかっこよさと機能を両立させてるんでしょうね？
こういう自分に無いものは、他人様に求めるのが一番です。
そしてBootstrapには、そんなデザイナさんたちの能力の粋が込められたテーマが、ときには無償で配布されていたりします。
ありがたや、ありがたや！
テーマをえらぶ
いろいろとテーマをぐぐった中で、こちらのページが目に付きました。
hackerthemes.com
殆どがMITライセンスで公開されていて、サンプルも見やすくていいですね！
色々検討したのですが、ユーザー層を考えてみると。
Mopidyを使うのは恐らく、若い男性でラズパイとかが好きな技術系のひとたち。
なので、黒ベースで明暗がクッキリしたクールなイメージの、Neon Glowを導入することにしました。
読み込んでみる
こればっかりはnpmという訳にもいかないので、普通にダウンロードします。
貰ってきたzipを解凍してcssファイルを参照させます。
こちらがNeon Glow適用直前コミットのUI。
いわゆる「Bootstrap臭い」雰囲気です。
そして、こちらがNeon Glow適用後コミットのものです。
オレンジがいい感じなので、ボタンもタイトルも全部bg-warning化しました。
おお。
印象変わるわ～...。
うーん、やっぱ、デザイナってすげえな。
描画が、重い
見栄えが一気に音楽プレイヤーらしくなった、のは、大変いいのですが。
元々若干モッサリしていた描画が、なんとなくさらに、重くなった気がします。
読み込んだCSSのサイズを見てみると。
- AdminLTE: 345KB(16,763行)
- Neon-Glowテーマ: 258KB(9,232行)
なるほど。
こりゃレンダリングに負荷が掛かっててもおかしくないですね...。
使っていない定義をピックアップ
こちらの記事にあるChromeのCoverageツールで、CSS上の未使用ルールがどのくらいあるのか、見てみました。
qiita.com
Chromeの開発者ツールから、左のメニュー→「More tools」→「Coverage」でカバレッジツールが出てきます。
ツールを出してからリロードし、UIを一通り触っていくと、使っているルールが緑色に、使っていないルールは赤にハイライトされます。
どれどれ...？
うへえ。
ほとんど使われていません。
そして、AdminLTEもNeon-Glowテーマも、Bootstrap4-CSSの修正版なので。
定義の重複が山のようにあります。
淡々と、手作業で
使ってないルールを一発で削除するような、便利なツールがあると良いのですが。
今のところ、そういうツールは、私は知りません。
仕方がないので、Chromeのツール画面とVisual Studioを行き来しながら、CSSのルールを一つずつ削除していきました。
無心に小一時間ほど、淡々と作業した結果。
- AdminLTE: 13KB(566行)
- Neon-Glowテーマ: 37KB(1,662行)
ロード早い！アニメーション軽い！
動画を撮るツールが手元に無いため、違いをお見せすることが出来ないのですが。
ブラウザロード時の初回描画も、アニメーションも、見るからに早くなりました！
「動いてるから、いいじゃない」と、ついサボりたくなるCSSのメンテですが。
体感には、明らかな差が出来るもんですね。
以上、デザイン適用とCSS軽量化のおはなし、でした！
