今回の開発環境の備忘録と次点として生かそうと思い投稿しておきます。
前提
案件
ボリューム：20ページくらい
納期：2週間くらい
備考：レスポンシブ（SP版のデザインはなく良い感じに）
業務フロー
コーディング→ローカル確認→テスト環境アップ（WebサーバにFTPソフトで）
開発環境（マシン、サーバ）
MacOS
MAMP
開発リソース
php
css
js
assets（image, font, etc）
コンパイル
Macのシェルスクリプトでコピーやsassを走らせて成果物を作る。
具体的には、CPコマンドやインストールしたsassコマンドでsrcディレクトリからdistディレクトリに吐き出していく。watch機能もつけた。
ディレクトリ構成
site/
- dist/
- index.php(home)
- _section.php(home)
- detail/(page)...etc
- css
- home.css...etc
- js
- home.js...etc
- common
- header.php
- footer.php...etc
- src/
- assets/
- js/
- common/
- lib/
- bxSlider.js...etc
- page/
- home
- scss/
- common/
- page/
- home
- style.scss
- _section.scss...etc
- template/
- common/
- page/
- home/
- index.php
- _section.php...etc
- compile.sh
- watch.sh
考察
まずコンパイルについては、
sass以外は、ほとんどコピーなので、コンパイルする必要性がなかった。
わかりやすくするためにcss以外のリソースも一緒にコンパイルしていたが、最初から必要はなかった。そのためコンパイルに余計な時間が取られたと思う。
ただ、個人的には開発リソースと成果物は分けるべきとは思っているので、今回のコンパイルは悪くないと思っている。
実際、jsの圧縮やphpテンプレートに自動でリソースパスを渡すなどの機能もつけやすくなると思っている。
一つ悪いポイントは、納期がパツパツ過ぎたため、余計なこと考える余裕もないし、実装する時間もないため、余計な機能になってしまったことだと思う。
実務ではそこも重要なポイントであるので、設計はほんとむずいと改めて思った。
phpは、受託制作に関しては優秀であると再認識した。
正直特にphpの機能を使いこなした訳ではないが、includeと変数だけで、テンプレートを細分化できるので良い。1ページでだいたい処理が完結する（ページ単位でのスコープで良い）ので十分と思っています。
sassはここで言うまでもなくとても良い。コンパイルで変更したファイルだけを見れるようにできたら良いと思った。なんかありそうな気はしてるが。
jsはほぼプラグイン。圧縮するほどの量もないが、がっつりした案件が来た時改め考えたい。もしできるなら、webpackを使ってcssModulesを使いたいのだが、そもそもWebサイト受託でそこまでやることあるかまだ疑問に思っているので保留。
次点
受託制作は、スピード重視かつ壊しやすい設計も必要なので、コンパイルはsassのみで、phpはそのまま編集が良いかなと思いました。
あと、スピード重視のため、cssはflexをめっちゃ多用すべきと思いました。
flexのポリフィルを入れればIE8までは対応できるので、今の時代なら大丈夫な範囲だと思ってます。
あとは、スライダーやスライドショーでbxSlider。
まとめ
- コンパイルはsassだけで良い
- phpとcssのflexはスピード開発に良い
- bxSliderとflexibility.js
大して参考になるお話ではないと思いますが、アプリ開発とサイト制作の違いがあり、どちらにも効率的なやり方があるのだなーと思ったので、残した記事でした。