Railsメモ(13) : simple_formでRansackの検索フォームを簡単に作成する

github.com

検索フォームのコードの記述量が多いので何かよい方法がないか調べてみたところ、simple_formというgemを使用するとフォームが簡単に作成できるようなので試してみる。
まずGemfileに下記行を追加してbundle installする。

gem 'simple_form'

次にgeneratorを実行するが、通常の場合は、

$ rails g simple_form:install

でよいが、今回はBootstrapのデザインを適用するのでオプションを付けて実行する。

$ rails g simple_form:install --bootstrap
      create  config/initializers/simple_form.rb
      create  config/initializers/simple_form_bootstrap.rb
       exist  config/locales
      create  config/locales/simple_form.en.yml
      create  lib/templates/erb/scaffold/_form.html.erb
===============================================================================

  Be sure to have a copy of the Bootstrap stylesheet available on your
  application, you can get it on http://getbootstrap.com/.

  Inside your views, use the 'simple_form_for' with one of the Bootstrap form
  classes, '.form-horizontal' or '.form-inline', as the following:

    = simple_form_for(@user, html: { class: 'form-horizontal' }) do |form|

===============================================================================

これで設定は完了。以下のようなsimple_form_formを使用した簡単な記述でBootstrapのデザインが適用されたフォームが作成できるようになる。

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

Ransackのsearch_form_forでsimple_formを使用する

search_form_forでsimple_formを使用する方法はRansackのREADMEに書いてあるが、config/application.rbに下記行を追加する。

require File.expand_path('../boot', __FILE__)
ENV['RANSACK_FORM_BUILDER'] = '::SimpleForm::FormBuilder' # この行を追加
require 'rails/all'

実際にコードを書き換えてみると、編集前のこのコードが

<%= search_form_for @q, html: { class: 'navbar-form navbar-left' } do |f| %>
  <div class="form-group">
    <%= f.search_field :title_cont, class: 'form-control', placeholder: 'title' %>
  </div>
  <div class="form-group">
    <%= f.search_field :display_artist_cont, class: 'form-control', placeholder: 'display_artist' %>
  </div>
  <%= f.submit class: 'btn btn-default' %>
<% end %>

これだけ簡潔になる（と言っても元の記述量がそれほどでもないのでイマイチ伝わりにくいが）。

<%= search_form_for @q, html: { class: 'navbar-form navbar-left' } do |f| %>
  <%= f.input :title_cont, label: false, placeholder: 'title' %>
  <%= f.input :display_artist_cont, label: false, placeholder: 'display_artist' %>
  <%= f.button :submit %>
<% end %>