Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

DatePicker

日付の選択には名前そのままの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

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

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

ColorPicker

色の選択には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のサンプルコードからの引用です。6行の見慣れたフォームを作るコードでBootstrapのフォームになります。

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

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

<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はRailsで一番使われているフォームビルダーだと思います。

https://github.com/plataformatec/simple_form

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

rails generate simple_form:install --bootstrap

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

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

フロントエンドValidation

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

https://github.com/casperin/nod

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

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

複数選択できるSelectBox

selectboxを複数選択できるようにしたい場合には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をrailsから使えるようにします。summernoteはBootstrap3.x.x対応です。

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

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

rails4 + bootstrap + summernote(WYSIWYG Editor) とasync画像アップロードで快適なブログ記事編集フォームを実現

その他

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

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

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

さいごに

質問などあればコメント欄にお願いします。直接メッセージや質問をしたい方はTwitterアカウント宛てにお願いします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away