Railsをやっていると、twitter-bootstrapを使いたくなったときは、twitter-bootstrap-railsを使いますね。しかし、このbootstrap-railsで作ったフォームのエラー画面が残念すぎる…。ラベルが赤くなって、入力フォームも赤くなるだけ。formのclassにform-horizontalを付けてたらマジ残念。
なんとかする方法はないかなーと先日からいろいろと調べていたのですが、一番いいのを見つけました！それが、simple_formです！

simple_formはRailsでフォームを簡単に作るためのgemなんですが、私も使うのは初めてなので詳しくは知りません。知りませんが、twitter-bootstrap用の設定ができるので、これを使えばグンニョリするようなエラーフォームになりません。

1. まず、Gemfileに以下を記述します。

   gem "simple_form", "~> 2.0.4"
   

2. bundle installします。
3. 以下のコマンドを実行します。

   rails g simple_form:install --bootstrap
   

4. これで準備は整いました。
5. Userの_form.html.erbを以下のようにしてみます。Userのvalidatesの定義でnameは必須にしてください。

   <%= simple_form_for @user, :html => {:class => 'form-horizontal'} do |f| %>
     <%= f.input :name, :input_html => {:class => 'input-medium'} %>
     <%= f.input :password, :input_html => {:class => 'input-medium'} %>
     <div class="form-actions">
       <%= f.button :submit, :class => 'btn-primary' %>
       <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
                   developers_path, :class => 'btn' %>
     </div>
   <% end %>
   

   labelタグの出力などをしなくても、f.input :name と書くだけで空気を読んでくれます。素晴らしい。

6. エラーメッセージとボタンの日本語化をします。ja.ymlに以下のように書きます。

   ja:
     activerecord:
       errors:
         messages:
           blank: 必須入力です
           (…略…)
     helpers:
       titles:
         new: '%{model} 作成'
         edit: '%{model} 編集'
       links:
         cancel: キャンセル
       button:
           create: 作成
           update: 更新
       submit:
           create: 作成
           update: 更新
   

7. これでエラーがある状態で作成ボタンを押してみてください。bootstrap的なエラー画面表示になってくれます。

simple_formはまだ使いだしたところですが、Rails的で記述量もすごく減るし、とてもありがたいですねぇ！

Tweet