BootswatchのテーマをRailsで使ってみる - === SANDmark 19106 === beginning stress test

なんだか最近流行りのBootstrap。
僕はもっぱらデザインが苦手で（かといってコーディングも得意ではないんだけど）
そんな人にとっては大変ありがたい存在です。

しかし、「今風」の雰囲気になってSUGEEEEEEと興奮するのも最初だけ。
僕にはカスタマイズなんてとてもできない。
独自性をアピールするためには、Twitter Bootstrapはあまりにも有名すぎ、僕にはデザイン能力が無いんです。

そこで、Twitter Bootstrapのいろいろな "テーマ" を集めた
Bootswatch: Free themes for Bootstrapに助けを乞うことにしました。
パッと見、いろんな意味で隙が無さそうですが、
Ruby1.9.3 + Rails3.2でハマったのでメモ。（バージョンはあんまり関係ないと思うけど一応）
まずは、当然ですがRails先生にTwitterBootstrapを組み込まなければなりません。
と言っても世の中には偉い人達がいるので、
gemを使うだけで簡単に使い始めることができます。

2種類ありまして、機能豊富なtwitter-bootstrap-railsとシンプルなbootstrap-sass。
前者は app/views/layouts/application.html.erb を作ってくれる他、
scaffoldしたリソースをTwitter Bootstrap風にアレンジまでしてくれる親切設計。
後者は逆に、必要のないJavaScriptを読み込まないように設定できるなど
シンプルかつ柔軟に組み込むことができます。

が、最初に宣言しておくと、
Bootswatchを使おうと思ったらtwitter-bootstrap-railsでは無理です。
少なくとも僕の力量では無理でした。

というのも rake assets:precompile するときにどうしても変数の参照が解決できない。
CSSの記述にLESSを使っていて、BootswatchもLESSを使うので
一見すると親和性がありそうなんですけど、書き方が悪いのかどうもよろしくない。*1

そこで bootstrap-sass を使うわけなんですが、これに対応している
ズバリBootswatchを使うためのbootswatch-railsというgemがあるので、
ぶっちゃけこの2つを使えば導入そのものは簡単です。

しかし twitter-bootstrap-rails の機能の豊富さは魅力なので、今回はおいしいとこ取りしてみます。つまり、

ファイルの生成だけ twitter-bootstrap-rails にやってもらって
assets部分は bootstrap-sass と bootswatch-rails に任せよう！

Bootswatch のテーマは Journal を使ってみます。

Gemfile:

gem 'bootstrap-sass'
gem 'bootswatch-rails'

group :development do
  gem 'twitter-bootstrap-rails'
end

適当にscaffold & migrate

$ rails g scaffold Hoge fuga:string piyo:integer foo:date bar:datetime baz:boolean
$ rake db:migrate

application.html.erb とリソースのテーマ化。(twitter-bootstrap-rails)

$ rails g bootstrap:layouts application  # お好みで fluid 引数をつける
$ rails g bootstrap:themed Hoges         # 大文字+複数表記にしないと怒られたりする

assetsの設定。(bootstrap-sassとbootswatch-rails)
app/assets/javascript/application.js:

// 最後の行を追記。
//
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require bootstrap

次にスタイルシートなんですが、app/assets/stylesheets/application.css を
application.css.scss にリネームする必要があります。
app/assets/stylesheets/application.css.scss: (bootswatch-railsのサンプルを転載)

// Example using journal bootswatch
//
// First import journal variables
@import "bootswatch/journal/variables";

// Then bootstrap itself
@import "bootstrap";

// Bootstrap body padding for fixed navbar
body { padding-top: 60px; }

// Responsive styles go here in case you want them
@import "bootstrap-responsive";

// And finally bootswatch style itself
@import "bootswatch/journal/bootswatch";

// Whatever application styles you have go last
@import "base";

journal は適宜使いたいテーマの名前に変えてください。
最後の @import "base"; の行でオリジナルのスタイルを読み込んでいます。

rails g bootstrap:install した上で
@import "bootstrap"; を @import "twitter/bootstrap"; などに変えれば
もしかしたら twitter-bootstrap-rails + bootswatch-rails でも動くかも知れませんが、
今のままで動いているのでとりあえずもう弄りたくないです。

Sprocketによるrequireを行わないのはbootswatch-railsの約束事のようなので、
謎のエラーが出たらどこかで //=require などとしていないか確認してみてください。
ただ、まったく動かないというわけではないようです。

というわけで完了です。長いようで短い旅でした。

Date型やDatetime型のせいでごちゃごちゃしてますが、
jQuery-uiのdatepickerなどを使えばもっとモダンになりそうです。

驚くべきは、これが scaffold されたリソースだということですね……。
HTMLにまったく触らずにここまで出来てしまいました。つくづく凄い時代です。
haml-rails を使えば twitter-bootstrap-rails が生成するファイルも
haml になるのでもっと楽しそうです。

*1:ちなみにdevelopment環境だけでなら動作しました。