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>

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク