Bloggerのファイル置き場をGoogle DriveからDropboxへ、CSSのブラウザ別ビルド、SMACSS導入など
ブラウザ別ビルドのためのプリプロセッサを公開しました。(2016/10/03)
css の minify を YUI Compressor から clean-css に変更しました。YUI Compressor では同じメディアクエリブロックを纏める機能がなく20%程度ファイルサイズが大きくなっていました。(24KB → 19KB, 2016/09/02)
Google Drive のWeb ホスト機能がこの8月末で終了します。
本ブログでも Google Drive を js css の置き場所にしていたので、今週に入って Dropbox に移動しました。
これにあわせて前々から関心のあったブラウザ別ビルドを css のビルドプロセスに導入したり、SMACSS を参考にタグ構造と命名を見直しました。
以上を先週からリハビリとしてやってみました。
実はこの春からずっと体調を崩していて、仕舞には十分な睡眠の後にもかかわらず瞼が重くてパソコンモニタを見続けることができない。寝て過ごすだけの日が何日か続いたりもしました。
健康って大切ですねぇ～
CSS や Javascript のブラウザ別ビルド
CSS や js には特定の環境ではスキップされるコードや、CSS ハック等で上書きされるコードが存在します。これらは僅かとはいえ、通信量を肥らせ、端末のメモリや CPU リソースを浪費します。
ブラウザ別ビルドをすることで、これらのロスをゼロに近づけることができるってわけですね。
しかし寡聞にして実施例は僅かにしか知りません。(JQuery と uupaa.js)
労力に比して恩恵が少なそうですしねぇ…
とはいえコレは自身のブログの改装というとっても小さなプロジェクト、深く考えずにジャンジャンいきましょう♪
本件でのCSSのターゲット環境は計8つ
今回は自前のサーバを用意しないため Web サーバ側でユーザーエージェント文字列を元に配信する css を切り替えることはありません。
また Web アプリではなく Web 文書であるため js が無効な環境を考慮します。js で環境を判定して css を動的に読み込むこともしません。
IE9 以下で使えるコンディショナルコメントとブラウザ毎の解釈のブレを利用して(CSS ハックな import 文)大雑把に、モダンブラウザか？旧IE系か？だけを切り替えることとしました。
これによってターゲット環境は計8つとなりました。
| ファイル名 | 説明 | ファイルサイズ |
|---|---|---|
| modern.css | 全アクセスの9割9分はこのcssを読み込むはず。計6段階のレスポンシブデザインを組み込んでいるので他の倍のサイズ | 19KB |
| ie9.css | 17KB | |
| ie8.css | contentによる修飾がある分 ie7 以下用より大きい。 | 12KB |
| ie7.css | 以下はPC用2カラムレイアウトのみ | 11KB |
| ie6.css | 少し前までサポート対象でしたしね | 11KB |
| ie55.css | ie6対応ができると5.5対応まであと少し！ | 10KB |
| ie5win.css | 5.5に比べると一段劣るけどまぁまぁちゃんとしてる | 9KB |
| ie5mac.css | ファンキーな挙動で苦しませてくれるじゃじゃ馬、気が向いたらやってみます | 未 |
僕のケースではモダンブラウザ用と ie8 用では倍近いファイルサイズの差となりました。つまり低速なネット環境の方は ie8 でアクセスすればよいですね…
ブラウザ別ビルドのためには、ソースコードに特定のターゲット環境専用のコードであることをコメントに記載します。
手間はありますが、特定環境用であることをコード上に明示し、そのうえ例え副作用がなくとも他の環境では決して読み込まれない、という状態は精神衛生に良さそうです。
ブラウザ別ビルドのためのプリプロセッサ
今回ブラウザ別ビルドのために、拡張コメントを定義し、VSCode 拡張として動作するプリプロセッサを制作しました。
このプリプロセッサを通すことで、ターゲット環境専用のコードがターゲット環境数分だけ生成されます。
続いてこの専用コードをコンパイラに通してカリカリに最適化されたリリース用 js css をゲットだぜ！という寸法です。
遠からず、マーケットプレイスで公開しますのでお楽しみに。ちなみに名前はまだ決めていません。
BloggerとSMACSS、テンプレートの配布
高いカスタマイズ性を持つ Blogger ですが、完全にページ制作者の意図した HTML 構造にすることはできません。
Blogger ではブログテンプレートの制御用の情報が div.section 等のタグとして書き出されてしまうためです。
このようななか、なるべく冗長な <div> の入れ子を作らないようにした結果、お恥ずかしながら今までの CSS はスパゲッティになっていました。
SMACSS の導入に際して冗長な <div> の入れ子を許容したことと引き換えに CSS のメンテナンス性を上げることはできました。
とはいえ CSS 自体のコード量が小さいので“メンテナンス性を犠牲にして冗長な <div> の入れ子を作らない”という選択肢も十分にありえました。
実は、本ブログのテンプレートを配布しようと考えています。このためにコードを可読性の高いものにし、配色の変更程度ならなんら迷わない程度にしておきたいところです。
Blogger用テンプレートの配布
Blogger 用のテンプレートは有料から無料まで、すでに優れて美しいものが配布されています。
そんななかではありますが、モバイル通信制限下でも閲覧できるよう開発を重ねた本テンプレートは一応の価値があるのでは、と。
ではでは～☆ミ