BootswatchのテーマをRailsで使ってみる
なんだか最近流行りの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 の機能の豊富さは魅力なので、今回はおいしいとこ取りしてみます。つまり、
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環境だけでなら動作しました。