44
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

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

DatePicker

日付の選択には名前そのままのbootstrap-datepicker-railsがあります。

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

TimePicker

日付の選択のように時間を選択するにはbootstrap-timepicker-railsがあります。

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

ColorPicker

色の選択にはbootstrap-colorpicker-railsがあります。

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

Form Builder

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

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

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

rails generate simple_form:install --bootstrap

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

フロントエンドValidation

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

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

複数選択できるSelectBox

selectboxを複数選択できるようにしたい場合にはbootstrap-multiselect-railsがあります。

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

Toggle スイッチ

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

WYSIWYG editor

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

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

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

その他

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

ここに紹介されているものは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
44
Help us understand the problem. What are the problem?