ワールドカップで寝不足なshibuso です。日本は残念ながら敗れてしまいましたが、個人的にはオランダがどこまで勝ち進むかが楽しみです。
さて、タイトルのとおりsimple_form のお話です。これは2014 年 6月 26日現在でのまとめであり、この後変わる可能性は多々あります。また、手元の環境はRuby が2.1.0 でRails は4.1.1 です。
今まで何度かsimple_form を使ったことはあったのですが、毎回最低限の機能を適当に使っていて、カスタマイズするのは面倒そうだし名前の通りの「simple」ではないよなと思って詳しくは調べていませんでした。ただ、今回Bootstrap3 に適用させたいと思って調べたところ、少し工夫が必要だったのでまとめました。
まずはsimple_form を入れましょう
まず、simple_form は
rails generate simple_form:install --bootstrap
でBootstrap に対応したconfig ファイルを作成することが可能です。しかし現在の正式リリース版ではBootstrap3 には対応していませんでした。公式ブログでは3.1.0 から対応するという記事が投稿されていますが、投稿されてから2 ヶ月経った現在でも残念ながらリリースされていません。
そこで現在は3.1.0 rc1 を入れることにより対応することが可能です。Gemfile に
gem 'simple_form', '~> 3.1.0.rc1'
とバージョンを指定する形で入れましょう。
そのうえで先程のrails generate のコマンドを叩くといくつかファイルが生成されます。
config ファイルを見てみましょう
生成されたファイルの中でconfig/initializer/simple_form_bootstrap.rb が今回重要です。このファイルの詳細に関しては公式README のThe wrappers API を参照していただけたらと思いますが、簡単にまとめるとここに記述されたルールに則って変換するって感じです。
ここで注目したいのがdefault の設定値です。一番下に
config.default_wrapper = :vertical_form
と書かれていますが、これはそのままの意味で、デフォルトでは"vertical_form" と名付けられたルールに則って変換する、という意味です。
タイトルのとおり今回はBootstrap3 のform-horizontal でフォームを作るのが目標なので、このままでは達成できません。このファイルを見ているとhorizontal と名前が付けられているルールがいくつか見つかります。オーソドックスな物は"horizontal_form" と名付けられたものなので、これを使いたいと思います。
実際に使ってみましょう
使用方法は知っている範囲では2 通りあります。まず1 つ目は、先程のconfig.default_wrapper の設定を変更するというものです。これはsimple_form を使用している全フォームに影響が及ぶので注意してください。2 つ目は、各simple_form_for でwrapper を指定するというものです。書き方は下記のとおりです。
-# これはhamlです
= simple_form_for @user, wrapper: :horizontal_form, html: {class: 'form-horizontal'} do |f|
上記で1 つ注意していただきたい点としては、html: {class: 'form-horizontal'} はどちらの指定方法にしろ必要ということです。無くてもそれっぽくは表示されますが、完全ではありません。
もう少し細かく設定してみましょう
上記の設定だけでも基本的には問題なく使用することが可能かと思いますが、一部表示が納得いかないものがあるかと思います。私が確認した範囲においては、チェックボックスやラジオボタンの表示が崩れています。これはBootstrap のルールでテキストフィールドとは別だから発生したものです。
simple_form はそこら辺も理解していて、予めルールを用意してくれています。"horizontal_file_input", "horizontal_boolean", "horizontal_radio_and_checkboxes" がそれです。
ただしこれらをsimple_form_for で指定してしまうと、他のテキストフィールドの項目などに影響を与えてしまいます。全てラジオボタン等であれば話は別ですが。
そこで、項目1 つずつにルールを設定しましょう。方法は下記のとおりです。
-# これはhamlです = f.input :role, wrapper: :horizontal_radio_and_checkboxes, collection: Role.all, as: :radio_buttons
これで部分的に別のルールで変換することが可能です。上記のcollection やas はREADME に書いてあるのでそちらを参照してください。
以上の方法でRails4 とsimple_form でBootstrap3 に対応可能です。今回horizontal の場合を説明しましたが、vertical の場合もそれぞれ用意してあるのでそれらを利用すれば対応可能です。