読者です 読者をやめる 読者になる 読者になる

もた日記

くだらないことを真面目にやる

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_forsimple_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 %>

もちろん見た目もBootstrapのデザインが適用されて元と変わらない。

f:id:wonder-wall:20150809140729p:plain

注意点としては、generatorのメッセージにあるようにform-horizontalform-inlineといったクラスを指定すること。今回は、Navbarなので元と同じnavbar-form navbar-leftを指定したが、これを指定しないとデザインが崩れてしまう。

パーフェクト Ruby on Rails

パーフェクト Ruby on Rails