MiddlemanにBootstrapとjQueryを導入し、静的サイト制作フローを高速化・効率化した。Bourbon RefillsのUIでは物足りないときの+αとして有効かもしれない。
やりたかったこと
- レスポンシブなスライドショー(Carousel)を手っ取り早く実装
- タグやカウンターなど、汎用的なレスポンシブWebコンポーネントを利用
- Webフォントアイコンの利用
- Boubon Projectとの混在が可能かどうかテスト
図: イロ得シリーズのティザーサイト、リニューアル構想
イロ得シリーズ
北陸で発行しているムック本シリーズのブランド名。「Lunch Fan!」「金沢千円で飲める店」「富山千円で飲める店」の総称。
導入背景
時間も人も足りないので、話題のBourbonを導入してみたが、先進的な普段からUIDに触れていない人から見ると、若干もの足りないっぽい... ：p おそらく、我らが地方圏のカスタマから見ても同じ印象をもつであろう。
かと言って、いまさら生々しくHTML・CSSを書きなぐる気力はない
Sketch.appで、専用の編集データを増やすのも気に食わない
で、楽してそれっぽいUIを速攻で提出したい。
よくよく考えてみれば、htmlファーストにこだわる必要のない部分は、計画的にWebコンポーネントを利用すれば、場当たり的にも、それなりのものができるだろうし、下手なフレームワークを採用するより汎用的で事例も多いので、導入してみることに。
手順
1. Bootstrap + jQuery をインストール
Gemfileに BootsstrapとjQueryのgemを追加する。
※アセットパイプラインの設定が前提
gem 'bootstrap-sass', :require => false
gem 'jquery-middleman', :require => false
:require => false しないとerrorがでる。
2. BootstrapのStylesheetsの読み込み設定をする。
任意だがここでは /stylesheets/all.css.sass にimportの記述。
@import "bootstrap-sprockets"
@import "bootstrap"
3. JavaScriptの読み込みを設定する。
任意だがここでは /javascripts/all.js.coffeeにrequireを記述。
//= require jquery
//= require bootstrap-sprockets
//= require npm
//= require_tree .
読み込み順注意。
4. 動作確認
bundleで必要なgemのインストールを終わらせる。
$ bundle install
npm.jsが入っていなかった場合は gemでインストールする。
すんなり通れば、インストール完了。
次にbuild。
$ bundle exec middlemain build
-
/assets以下にコンパイルされたall.cssとall.js -
/font以下にbootsstrapフォント - Projectディレクトリ直下に
base
↑できていれば成功。
あとは、Bootstrapから、スコスコパーツを引っ張ってきて煮るなり焼くなり。
まとめ
npm.jsがgem install されていなかったのに気づかないで、２時間くらい持って行かれた。なんだかんだProject単位でいちいち設定するのが面倒くさいから、プロジェクトのスケルトンをいい感じで準備しておきたい。と思った。
Boubonと同居させるのにはかなり違和感があるけど、「できなくはない」と気づけたのは収穫。