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) 全面書き直し

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)