新規Middlemanプロジェクトを立ち上げて、話題のBourbon, Neat, Bitters,Refillsを導入したら革命的だった。

導入背景

最近、高速でティザーサイトをアップして間髪入れずに大量の静的ページを作成するっていう無茶な案件が多い。

デザイン提案からリリースまで弾丸速度で、コンテンツが後手にまわりやすい案件だと、後工程のコーディングがマジでしんどい。WordPressやBootstrapも悪くないけど、運用的なことを考えると属人的になりがちで、何よりHTMLがスパゲッチになる。いっその事、静的サイトジェネレーター＋フレームワークで、インブラウザデザインの型にはめてしまえば楽なんじゃね？...ってのが発端

開発の速さで、お客様や営業のド肝を抜いてやろうじゃないか。：D

本当に大事な部分（広告戦略）にリソースを費やせるなら、きっとみんな幸せだよ。

MidlemanとBourbon Projectのインストール

＜手順＞

1. 作りかけの、サイトのディレクトリをプロジェクト化

任意のプロジェクトに cd ｓし、以下を実行

$ middleman init

config.rbとか、sourceとかのfileができていたらOK

2. Gemfileを編集してインストールの準備

Gemfile


# For css.scss
gem 'bourbon'
gem 'neat'
gem 'bitters'
gem "refills", require: false

※ require: falseがないと怒られる。

3. 必要なgemをインストール

$ bundle install

4. 指定のhtml,cssにrefillsのsampleコードをコピペ

※css→scssにするのを忘れずに

5. scssにborrbonのstyleを呼び出す `@import` を追記

sample.css.scss


@import 'bourbon';
@import 'neat';
body {
}

6. テストでコンパイル

$ midleman build

7. 確認

buildディレクトリに展開されたcssができていれば成功

Refillesがやばい

イマドキの「よくあるやつ」がほぼ揃ってる
手作りだと面倒くさいレスポンシブが全部適用される
サンプルのimgを差し替えるだけでそれっぽいサイトができる

実現できること

インブラウザデザイン
ワイヤーフレーム＋デザインカンプ+コンテンツ発注が同時並行
修正に強い→デザイン・コーディングがパラレルで回せる
そのままコンテンツを流し込めるので誤植・修正が楽

更に効率化

Slim化
html → erb → slim で直してしまえばほぼマークアップ不要
リテラシーの低い営業やクライアントにもとりあえずコピペで使えるプレーンなテキストを用意してもらえればOK。
minifyhtml,optimagesでfileの圧縮を自動化
内部関係者→ngrok　外部関係者→heroku stagingで確認依頼

まとめ

かなりライフチェンジング！スピードはモチベーションアップに繋がるとしみじみ。

作業ののスピードが上がらないと、いろんな「信用」がなくなることありますよね。通る案も通らなくなったり、満足度につながらない。

何にせよ、作り手が、後手に回って全く良いことはないので、「例のアレ」ってやつを早く提示してあげるのが、プロジェクト全体の進捗をスムーズにするコツなのかなーと最近思う。

2017/11/30追記（振り返り）

middlemanのアップデート→要件規模に対してのツールの適正を考える

middlemanがAsset pipeline非採用になったのでかなり弁が悪くなり。
諸々のアップデートが追いつかなくなってきたので、静的なサイト作るだけならnuxt.jsに移管することが増えた。

正直ツールのアップデートをリアルタイムで追うことが難しい。作って終わりの案件を除き、運用性を考えるならある程度普遍的な技術を採用する必要がある。

フレームワークへの依存性はよくない

そうするとBourbonに頼っていた部分が、セットアップ面かなり障害になってきたので、更新性を求めるサイトに関しては、その工程を鑑みた事前設計が大事だったなとしみじみ。

複数人への作業分担・引き継ぎ、自分自身がPC乗り換えた際のmiddlemanとBourbonのセットアップ、ここらへんでつまずく。

CSS周りの移管は苦労する。

学習曲線的にはかなりストレスだし、突発的にやすやすと対応できるものではなかったのでしんどかった。

現時点での総括

案件自体の事前設計やスケールの予測は重要である。

フェーズに応じて技術の選定を行うべき。その際は、移管する際の設計（引き継ぎやチーム規模、習熟度など）を考慮する。

ミニマルスタートで後の運用性を考えるとnuxtが最近イケてる。nuxtというよりvue.jsか。