Ruby on Rails のWebアプリに Bootstrap を適用する

レスポンシブWebサイトを簡単に効率よく作成するためのCSSフレームワークであるbootstrapを使って Ruby on Rails のWebアプリの見栄えをよくしてみます。

前提条件

以下の記事を参考に、Scaffold を使用した DBアプリケーションが作成済みであること

asobo.hatenablog.jp

使用環境

Amazon Linux AMI release 2015.03 (x86_64) Ruby 2.2.2 Rails 4.2.3

手順

Gemfile に以下の通り追加して、bootstrap に必要な gem パッケージをインストールします。

$ cd ~/sample/

$ vi Gemfile
+gem 'less-rails'
+gem 'therubyracer'
+gem 'execjs'
+gem 'twitter-bootstrap-rails'

$ bundler install

続けて bootstrap をインストールします。

$ rails g bootstrap:install

前の手順で作成していた users に bootstrap を適用します。

$ rails g bootstrap:themed users
    conflict  app/views/users/index.html.erb
Overwrite /home/ec2-user/sample/app/views/users/index.html.erb? (enter "h" for help) [Ynaqdh]
       force  app/views/users/index.html.erb
    conflict  app/views/users/new.html.erb
Overwrite /home/ec2-user/sample/app/views/users/new.html.erb? (enter "h" for help) [Ynaqdh] 
       force  app/views/users/new.html.erb
    conflict  app/views/users/edit.html.erb
Overwrite /home/ec2-user/sample/app/views/users/edit.html.erb? (enter "h" for help) [Ynaqdh] 
       force  app/views/users/edit.html.erb
    conflict  app/views/users/_form.html.erb
Overwrite /home/ec2-user/sample/app/views/users/_form.html.erb? (enter "h" for help) [Ynaqdh] 
       force  app/views/users/_form.html.erb
    conflict  app/views/users/show.html.erb
Overwrite /home/ec2-user/sample/app/views/users/show.html.erb? (enter "h" for help) [Ynaqdh] 
       force  app/views/users/show.html.erb

このままだと bootstrap が存在しないと怒られるので、パスを以下の通り編集します。

$ vi ~/sample/app/assets/javascripts/application.js
@@ -12,6 +12,6 @@
 //
 //= require jquery
 //= require jquery_ujs
-//= require twitter/bootstrap
+//= require bootstrap
 //= require turbolinks
 //= require_tree .

サーバーを停止して、$ rails s -b 0.0.0.0コマンドで再度起動します。

ブラウザで表示すると、bootstrap が適用されて見栄えが良くなったのを確認できます。