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の場合はこちら。

%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を実行。

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

続いてターミナルで次のコマンドを実行すると自動でよしなにやってくれます。

(readableの部分はbootswatchのテーマ名です)

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に対応したテーマをまとめています。さらにひと味改造したい人にはすごくお勧め！

🍄 参考リンク

bootswatchをRailsで使う

🐠 変更来歴

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

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

酒と泪とRubyとRailsと