Compassがよかった話

受託Webサイト制作で2ページ分のLPを制作するにあたり、Compassを使いました。
静的サイトの制作ならCompassで十分だと思い、記事に残しておきます。

前提

案件

• 成果物：LP2ページ（PC版1ページ、SP版1ページ）
• 対応ブラウザ：最新ブラウザとIE11
• 納期：4営業日
• 備考
  • SPのデザインは最初ない状態
  • 動きはほぼない
    • jsはほぼ書かない
  • レスポンシブでない
  • 後々運用していくにあたり修正しやすい様にしておく

業務フロー

デザイン受取 → コーディング → ローカル確認 → zipなどで納品 → テストアップ

開発環境

• MacOS mojave
• MAMP

開発リソース

• template（php）
• css
• assets（font, image）

ビルド

cssのみsassでビルドしました。途中からCompassを導入。
phpは生で編集し、assetsは最適化したものを保存。

ディレクトリ構成（最終形）

 LP/
 - dist/
   - index.php
   - style.css
   - template/
     - common/
       - _btn.php ...etc
     - _mv.php ... etc
   - assets/
     - img/
     - font/
 - src/
   - scss/
     - common/
       - _base.scss ...etc
     - _mv.scss ...etc
 - dev.sh
 - prod.sh
 - config.rb
 - README.md

考察

前回の記事などから、受託サイト制作、特に静的サイト制作では、スピードかつ運用しやすい実装（壊しやすい実装）が求められると思っているので、なるべく生の状態で編集していく形を取っています。
つまり今回の構成としては、サーバにあげるファイルは、dist配下のファイルたちで、cssのみビルドしてdistに吐き出す形にしています。phpを直接編集するのでMAMPのhtdocsにシンボリックリンクを作り、distと同期してローカル確認を効率化しています。
最近のWeb制作からすると原始的なやり方ですが、静的サイトならこれで十分な環境で、誰でも編集でき、環境もすぐ作れるので、良きと思っています。

PC, SPはテンプレートをユーザーエージェントで出し分けを考えていたのですが、成果物のボリュームと多少のSEO効果を考えて、画面の横幅でスタイルを変更する（メディアクエリ）でいいかなと思いました。ここで、Sassにしておいてよかったなと思いました。
ただ、クラス命名がクソになってしまいましたが。。。

cssのビルドは、最初Sassで大丈夫と思っていたのですが、
最新ブラウザのみとはいえ、モバイルもあるし、ベンダープレフィックス必要やなと思いました。
そこでAutoprefixer。
ただ今までNode.jsでのビルドでしか使ったことなかったので、Sassであんのかなーと調べていたら、Compassが浮上し、今回の形になりました。
今までは、シェルスクリプトでSassを打ちまくっていたのですが、Compassならそこをやってくれるので楽でした。確かにそういうもんだったと感じながら、今まで置き去りにしてきたので、改めて良きと思いました。
しかも別モジュールですが、ちょちょっとインストールすれば、Autoprefixerも簡単に使えたので、これからはこれで行こうと思わせる環境でした。
モダン開発に慣れてくる、もしくはモダン開発からフロントエンドに入ってきた方からすると逆にこういう原始的なところは新鮮に感じられると思います。
デザイナー+コーダーの様な会社（Webサイト制作会社、デザイン会社、など）ですとまだまだNode.jsがハードルある様なので、Compassの様なところから入るとビルドが理解できていいのかなーと思っています。

正直、リンターやユニットテストもあるといいと思うのですが、納期を考えるとかなりむずいです。
それは必要性が浸透していないところがあるので、今後すぐ入れられるような状態にして浸透していってほしいなと思う今日この頃です。
あと、将来的なお話ですが、前やった案件で、storybookというのを使っていて、storybookはコンポーネントの状態を可視化できかつ共有もできるツール・プラグインなのですが、React用のツールに見えたので、それに近いものを作れればいいと思っています。
まーこれも必要性が浸透しないとですが。。

Webサイト制作は、確かに制作自体は簡単にできてしまうのですが、それだけにそれぞれの職能がうまく機能しないと意外にめんどくさい仕事になって案件自体が悪者扱いされてしまうので、Weサイト制作自体のフレームワークを作っていければと思います。

次点

これからはCompass使っていく。ただ、Node.jsを入れればnpm scriptsで簡単にビルドできる環境を作れるので、どっちがいいかその都度判断したいと思っている。
Compass環境が簡単に作れるシェルスクリプト入れるのがいいかも。
シェルスクリプトを簡潔にしていく。GitLabCIなどに組み込みたい。（zip渡しなどやめたい）

まとめ

• Compass環境は良き（特にMacOSなら）
• Compass環境すぐできる様にする
• 納品物をCIで
• Webサイト制作自体をもっと効率的に

また、こんな大して参考にならん記事を残していきますが、それでも誰かの参考やこんな考え方もあるといったご意見いただければと思います。

関連記事

• 受託Webサイト制作の時の開発環境