Ruby on Rails 4.0正式リリースとBootstrapの正しい設定法

過去記事「Ruby on Rails 4.0RC1とBootstrapの設定」は、リリース候補1でBootstrapが使えなくなったために講じた応急処置的な方法でしたが、その後、Rails 4.0が正式リリースされ、以前の設定法(本当はこちらが正統派)でBootstrapが簡単にセットアップできるようになりました。以下、その設定法を手短にまとめてみました。

スポンサーリンク
スポンサーリンク

Rails 4.0のセットアップ

先ずは、RVMやrbenv等のRubyバージョン管理ツールで、最新バージョンが利用できる状態にしておきます。現時点でのRubyの最新バージョンは、2.0.0.-p247です。

準備が整ったら、Rails4.0をセットアップ。お試し用として新規プロジェクトtestを作ります。

gem install rails --version 4.0.0 --no-ri --no-rdoc
rails new test

続いて、Gemfileをテキストエディタで開き、次の一行の行頭の#マークを外してアンコメントします。

# gem 'therubyracer', platforms: :ruby

ここで、端末からbundle installコマンドを実行。続けてrails serverコマンドを実行します。

Rails40setup

http://localhost:3000にアクセスして、About your application’s environmentリンクをクリック。Railsが正しくセットアップされているかどうかを確認します。

Bootstrapのセットアップ

Railsが動作していることが確認できたら、テキストエディタでGemfileを開き、次の3行を追加します。

gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'execjs'

続けて、次の一行をコメントアウト。

gem 'sass-rails'

いったんここでGemfileの変更を保存して、bundle installコマンドを実行。続けて、次のコマンドでBootstrapを設定します。

rails g bootstrap:install
rails g bootstrap:layout application

以上で、Bootstrapの設定は終了です。/app/views/application.html.erbがBootstrap用に書き換えられています。後は、このファイルと/app/assets/stylesheets内のcssファイルで調整するだけです。例えば次のような外観になります。

BootstrapSetup01

なお、前回の応急処置的な方法では、BootstrapのIconが使えませんでしたが、今回の設定法だと、例えばナビメニューの項目を次のようなタグで囲めば、各項目の頭にIconを表示させることができるようになります。

<i class="icon-home"></i>
<i class="icon-user"></i>

タイトルとURLをコピーしました