Twitter Bootstrap 3がリリースされてから結構日が経ちますが、twitter-bootstrap-railsはブランチ版で、simple_formはRC版でそれぞれ対応できているようです。導入するにあたって、ちょっとハマる箇所もあったので、簡単にチュートリアルにまとめておきたいと思います。

環境

• Mac OS X 10.8
• Ruby 2.1
• Ruby on Rails 4.1
• twitter-bootstrap-rails 3.1.1 (2014/6/21時点ではbranch)
• simple_form 3.1.0.rc

セットアップ

Gemfileに必要なgemを記述します。ポイントはtwitter-bootstrap-railsとsimple_formです。各々最新安定版ではまだ対応していないので(2014/6/21現在)、以下のようにバージョン指定が必要です。

📄Gemfile

gem "therubyracer"
gem "less-rails"
gem "twitter-bootstrap-rails", github: "seyhunak/twitter-bootstrap-rails", branch: "bootstrap3"
gem "simple_form", '~> 3.1.rc1'

いつも通りgemをインストールします。

📄app/views/posts/_form.html.erb

$ bundle install

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

$ rails generate bootstrap:install less

次に、simple_formをインストールします。bootstrapオプションを付けるのをお忘れなく。

$ rails generate simple_form:install --bootstrap

scaffold

セットアップが完了したら、簡単な画面を作成してみます。まずはbootstrapでレスポンシブなレイアウトを生成します。上書き確認のメッセージが表示されると思いますが、Yで上書きましょう。

$ rails g bootstrap:layout application fluid

お約束のsacffoldでお約束のPostモデルを作成してみましょう。

$ rails g scaffold Post title:string description:text published_on:date
$ rake db:migrate

出来上がったscaffoldをbootstrapテーマに合わせて変更します。

$ rails g bootstrap:themed Posts

さて、ここでrailsサーバを起動して、http://localhost:3000/postsにアクセスしてみると・・・

おお、流行りのフラット・レスポンシブ画面ができあがっているではないか。

ちょっとNewボタンを押して、入力フォームを確認しておきましょう。

・・コントロール長っ！ 何これ、これが噂のモバイルファーストってやつ？ コントロールは width: 100%になってるそうです。オールドタイプの俺は、断然こんなの受け入れられない。一体全体どうなっているんだ。

app/views/posts/_form.html.erbを開いてみます。

<%= simple_form_for @post, :html => { :class => 'form-horizontal' } do |f| %>
  <%= f.input :title %>
  <%= f.input :description %>
  <%= f.input :published_on %>

  <%= f.button :submit, :class => 'btn-primary' %>
  <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
                posts_path, :class => 'btn btn-default' %>
<% end %>

フォームのCSSクラスがform-horizontalになってますが、これだけでは効きません。f.inputでコントロール周りを囲んでくれるラッパーを指定しないといけません。1行目を以下のように変更します。

📄app/views/posts/_form.html.erb

<%= simple_form_for @post, wrapper: "horizontal_form", :html => { :class => 'form-horizontal' } do |f| %>

wrapper: "horizontal_form"というオプションを追記しました。（何この”horizontal_form”って？と思った方は、config/initializers/simple_form_bootstrap.rb を見てみて下さい。）

再度画面を確認しましょう。

とりあえずhorizontalは適用できました。しかしコントロールの幅は100%のままです。こいつを短くしてやりたい。

wrapperのカスタマイズ

bootstrap 2 にあったような、input-smallのようなCSSクラスは無くなっています。公式ページに書いてあるように、col-xs-XといったCSSクラスを指定する必要があるようです。こいつを適用させるためには、simple_formの設定ファイルを弄くる必要があります。

config/initializers/simple_form_bootstrap.rbの次の部分を・・・

📄config/initializers/simple_form_bootstrap.rb

...
  config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'col-sm-3 control-label'

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
      ba.use :input, class: 'form-control'
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end
...

次のように変更します。

📄config/initializers/simple_form_bootstrap.rb

...
  config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'col-sm-3 control-label'

    b.wrapper :input_wrapper, tag: 'div' do |ba|
      ba.use :input, class: 'form-control'
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end
...

名前付きのwrapperにて、元々定義されていたcol-sm-9クラスを削除しました。こいつがあると幅がバリバリに長くなってしまいますので。

続いて、フォームも変更します。

📄app/views/posts/_form.html.erb

<%= simple_form_for @post, wrapper: "horizontal_form", :html => { :class => 'form-horizontal' } do |f| %>
  <%= f.input :title, input_wrapper_html: { class: "col-xs-2" } %>
  <%= f.input :description, input_wrapper_html: { class: "col-xs-9" } %>
  <%= f.input :published_on, input_wrapper_html: { class: "col-xs-2" } %>

  <%= f.button :submit, :class => 'btn-primary' %>
  <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
                posts_path, :class => 'btn btn-default' %>
<% end %>

input_wrapper_htmlというオプションを追記しています。設定ファイルで名前を付けておいたwrapperには、ラッパー名_htmlとすることで、idタグやclassタグを付加することができるのです。（詳しくはsimple_formの公式ページを見て下さい）

simple_formの設定ファイルを変更しているので、railsサーバを再起動してから再度画面を開いてみましょう。

やっと短くなりました。

えらく長い道のりでした・・・。正式版が出るまでは、bootstrap 2を使っている方が無難かもしれない。。。

関連する記事

• simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その１）
• simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その２）
• simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その３）
• Rails + simple_form + Foundation 5 チュートリアル
• パーシャルをrenderする際のパフォーマンスに関する注意点