(Lab)

手前味噌ですが、本日また自分用のテンプレートのアップデートを行いました。

順番としては3段階で、

1. ディレクトリ階層・ファイル名の整理
2. jsonで管理するパラメータの整理
3. gulp-json-to-sassを使って、ejs, js, scssの3つで共通のjsonの値を使いまわせる

ようにしました(標準ではjsに値は参照させていませんが)。

これによって何がうれしいかと言うと、主に次の2点。

1. 色の一元管理
   • ブラウザのアドレスバーのところに色を付けるtheme-colorの値をjsonからejsに渡すのと、jsonからscssに変数で落とし込むことで一元管理し、色の変更漏れを防ぐ
2. ヘッダナビゲーションバーの高さを共有
   • Bootstrap3ベースなので、よくナビゲーションバーのnavbar-fixed-topをよく使います。この場合、キービジュアルの高さをナビゲーションバーの高さも含めて考えるかどうかのときに、同じ値を参照できた方が修正漏れを防げます。また、ejsというかhtmlでもdata-offsetの値として参照していたりするので、多方面で流用が効くと思われます。

ということで、個人的にはやや大きめの修正だったので取り上げました。