BootstrapとRailsと。フォーム作りを快適にするgem紹介

Railsでサイトを作るときにBootstrapを使うことが多いと思います。この記事ではその中でもウェブフォームに特化してサイトを作るのを楽にする情報をまとめて行きます。

# DatePicker

日付の選択には名前そのままの[bootstrap-datepicker-rails](https://github.com/Nerian/bootstrap-datepicker-rails)があります。

https://github.com/Nerian/bootstrap-datepicker-rails

このgemは以下のプラグインをrailsとインテグレーションしたものです。

https://github.com/eternicode/bootstrap-datepicker

# TimePicker

日付の選択のように時間を選択するには[bootstrap-timepicker-rails](https://github.com/tispratik/bootstrap-timepicker-rails)があります。

https://github.com/tispratik/bootstrap-timepicker-rails

このgemは以下のプラグインをrailsとインテグレーションしたものです。

https://github.com/jdewit/bootstrap-timepicker

# ColorPicker

色の選択には[bootstrap-colorpicker-rails](https://github.com/alessani/bootstrap-colorpicker-rails)があります。

https://github.com/alessani/bootstrap-colorpicker-rails

このgemは以下のプラグインをrailsとインテグレーションしたものです。

http://www.eyecon.ro/bootstrap-colorpicker/

# Form Builder

幾つか良く使われているFormBuilderがあるので紹介します。

## rails-bootstrap-forms

https://github.com/bootstrap-ruby/rails-bootstrap-forms

フォームのコーディング量を格段に減らすことができます。

以下は[rails-bootstrap-forms](https://github.com/bootstrap-ruby/rails-bootstrap-forms)のサンプルコードからの引用です。6行の見慣れたフォームを作るコードでBootstrapのフォームになります。

```erb
<%= bootstrap_form_for(@user) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>
```

出力結果は以下の通りです、いい感じですよね。

```html
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
  <div class="form-group">
    <label for="user_email">Email</label>
    <input class="form-control" id="user_email" name="user[email]" type="email">
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input class="form-control" id="user_password" name="user[password]" type="password">
  </div>
  <div class="checkbox">
    <label for="user_remember_me">
      <input name="user[remember_me]" type="hidden" value="0">
      <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
    </label>
  </div>
  <input class="btn btn-default" name="commit" type="submit" value="Log In">
</form>
```

labelやhelpの指定、カラムの指定、ブロックを使えるなど拡張性も高く汎用的に使えます。

# simple_form

[simple_form](https://github.com/plataformatec/simple_form)はRailsで一番使われているフォームビルダーだと思います。

https://github.com/plataformatec/simple_form

フォームを作るときにオプションで--bootstrapと指定するだけです。

```bash
rails generate simple_form:install --bootstrap
```

実際にどのようなフォームになるのかは以下デモサイトを見てみるのが分かりやすいです。

http://simple-form-bootstrap.plataformatec.com.br/

# フロントエンドValidation

RailsとBootstrapに直接関係があるわけではないですが、Rails/Bootstrap Likeなブラウザ内のバリエーションするには[Nod](https://github.com/casperin/nod)が楽です。Railsのフォームから違和感少なく利用できます。

https://github.com/casperin/nod

実際にどのような挙動になるのかは以下のデモサイトをご覧ください。

http://casperin.github.io/nod/

# 複数選択できるSelectBox

selectboxを複数選択できるようにしたい場合には[bootstrap-multiselect-rails](https://github.com/benjamincanac/bootstrap-multiselect-rails)があります。

https://github.com/benjamincanac/bootstrap-multiselect-rails

このgemは以下のプラグインをrailsとインテグレーションしたものです。

http://davidstutz.github.io/bootstrap-multiselect/

# Toggle スイッチ

説明特に要らないかなと思い始めてきました。

https://github.com/caarlos0/rails-bootstrap-toggle-buttons

# WYSIWYG editor

ブログ記事やテキストエリアを高機能に入力し易くする[summernote](http://summernote.org/)をrailsから使えるようにします。summernoteはBootstrap3.x.x対応です。

https://github.com/summernote/summernote-rails

画像ファイルの動的なアップロードに対応したい場合は以下記事を参考にしてください。

[rails4 + bootstrap + summernote(WYSIWYG Editor) とasync画像アップロードで快適なブログ記事編集フォームを実現](http://qiita.com/tkosuga@github/items/df61ca9f7fc2872988e0)

# その他

Bootstrap本体以外での拡張やプラグインが以下ページにまとまっています。

http://startbootstrap.com/bootstrap-resources/

ここに紹介されているものはRailsとのインテグレーションが準備されているものが多いです。

# さいごに

質問などあればコメント欄にお願いします。直接メッセージや質問をしたい方は[Twitter](https://twitter.com/tkosuga)アカウント宛てにお願いします。