酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

Bootstrap/BootswatchをRails 4.1に導入!

もはやエンジニアがWebサービスを立ち上げる時になくてはならない、『Twitter Bootstrap』や、そのBootstrapのテーマ『Bootswatch』。僕もほぼ欠かさず使っています。

今回は以前書いた情報がちょっと古くなっていたので、忘備録を兼ねて書き直しです。


(1) Bootstrap CDNを使う方法

これが一番簡単です。基本的には、『Bootstrap CDN』に書いてあるコードをheaderに貼り付けるだけです。バージョンアップとともにURLが変わるので、最新は本家のサイトからコピーしてきてください。

一応イメージが湧くようにコードを書いておきます。Bootstrap/Bootswatch/Font-Awesomeを使えるようにします。app/view/layouts/application.hamlの場合はこちら。

1
2
3
4
%link{:href=>"//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css", :rel=>"stylesheet"}
%script{:src=>"//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"}
%link{:href=>"//netdna.bootstrapcdn.com/bootswatch/3.1.1/cerulean/bootstrap.min.css", :rel=>"stylesheet"}
%link{:href=>"//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css", :rel=>"stylesheet"}

これを使う場合の問題としては、海外のCDNっぽくってレスポンスがやや悪かったり、たまに落ちてうまくテーマが表示されなくなってしまう点です。さっと試したいときにおすすめです。

(2) Gemを使う方法

Gem『scottvrosenthal/twitter-bootswatch-rails』を使う方法を紹介します。

Gemfileに以下のGemを追加して、bundle installを実行。

1
2
3
# Twitter Bootstrap
gem 'twitter-bootswatch-rails', '~> 3.1.1'
gem 'twitter-bootswatch-rails-helpers'

続いてターミナルで以下のコマンドを実行すると自動でよしなにやってくれます。
(readableの部分はbootswatchのテーマ名です)

1
2
3
rails g bootswatch:install readable
rails g bootswatch:import readable
rails g bootswatch:layout readable

あとは出来上がったerb(haml)とcss、javascriptをapp/views/layouts/application.haml(erb).htmlに移植して使うなり、デフォルト側にコピーして使うなりすれば簡単に使えるようになります!

fpu_tmp_1354612489.2232_0be82c

おすすめテーマまとめ

Bootstrap3 の無料テーマ・格安有料テーマまとめのまとめ
拙著ですが、Bootsrap3に対応したテーマをまとめています。さらにひと味改造したい人にはすごくおすすめ!

Special Thanks

bootswatchをRailsで使う

変更来歴

(04/17 08:50) 全面書き直し

おすすめの書籍