初めに
simple_formを使うことが全くなかったのでちょっと使ってみた。
使い方
bootstrapとsimple_formを使うので
gem 'bootstrap'
gem 'jquery-rails'
gem 'popper_js'
gem 'tether-rails'
gem 'simple_form'
をしておく
assets/javascripts/application.jsに
//= require jquery3
//= require jquery_ujs
//= require popper
//= require tether
//= require bootstrap
を追加する
bundle installしたのちに
rails g simple_form:install --bootstrap
とすればbootstrapに対応してくれるはず
とりあえず使ってみる
rails g scaffold user name:string
rails db:migrate
localhost:3000/usersにアクセスするとbootstrapに対応していて中身を見ると
<%= simple_form_for(@user) do |f| %>
<%= f.error_notification %>
<%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
<div class="form-inputs">
<%= f.input :name %>
</div>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
となっている
今度は自動生成ではなく自分で作ってみる
rails g model person name:string age:integer
rails db:migrate
rails g controller people index new
として
people_controller.rbを
class PeopleController < ApplicationController
def index
end
def new
@person = Person.new
end
def create
@person = Person.create(person_params)
redirect_to people_path
end
private
def person_params
params.require(:person).permit(:name,:age)
end
end
としてpersonを作成できるようにする
config/routes.rbに
resources :people
と加える。
後は
views/people/new.html.erbを
<div class="container">
<%= simple_form_for(@person) do |f| %>
<div class="form-group">
<%= f.input :name %>
</div>
<div class="form-group">
<%= f.input :age %>
</div>
<%= f.submit %>
<% end %>
</div>
とすればbootstrapに対応してフォームができている。
それでも問題があり
こんな感じでNameやAgeと英語になってしまう。
一応
<%= f.input name:, label: '年齢' %>
みたいな感じで変えられる
ほかの方法としてlocale/ja.ymlを作ってそこで日本語化の設定を書くという方法がある。
そのためにはまずconfig/application.rbに
config.i18n.default_locale = :ja
と書いておく必要がある
そして
config/localesいかにja.ymlファイルを作成して
ja:
helpers:
submit:
create: '登録する'
update: '更新する'
submit: '保存する'
simple_form:
labels:
person:
name: 'ユーザー名'
age: '年齢'
hints:
person:
name: 'サインインするユーザ名を入力してください'
age: '年齢を入力してください'
placeholders:
person:
name: 'ユーザー名'
age: '年齢'
そうすると
こんな感じでよくなってきた。
hintは下の文字でplaceholderはフォームの中に書いてある文字。
例えばhintを表示したくない場合は
<%= f.input :name, hint: false %>
とすれば表示されなくなります。
また必須項目であることを示すために何かマークや文字を入れたい場合は
required:
html: '<abbr title="required">必須</abbr>'
みたいに書くらしいがこれだと
みたいに必須の文字の下に変なのが出て嫌なので
simple_form:
required:
html: '<abbr class="nec">必須</abbr>'
として
assets/stylesheets/application.scssに
.nec {
background-color: red;
color: white;
font-weight: 500;
margin-left: 20px;
padding: 0px 4px 2px 4px;
}
を追加すれば
いい感じになります。
次にバリデーションです
people_controller.rbを
def create
@person = Person.create(person_params)
if @person.save
redirect_to people_path
else
render :new
end
end
このようにして
model/person.rbに
validates :name, presence: true
を追加する。
このまま登録ボタンを押すと該当するフォームが赤くなるがメッセージが英語で出てしまう。
これを直すためにja.ymlファイルを編集しなければいけないがmodelの部分やエラーの部分などを日本語化しなくてはいけなくなり
ファイルがわけわからないことになってしまうのでya.ymlファイルを分けて保存できるようにする。
config/application.rbに
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
を追加
localesの下に
defaults,models,viewsフォルダを作成する。
defaultsフォルダの中にja.ymlファイルを作成して中身を
ここからコピーしたものを貼る。
modelsフォルダのしたにpersonフォルダを作成、その下にja.ymlを作って
ja:
activerecord:
models:
person: ユーザー
attributes:
person:
name: 名前
age: 年齢
を追加する
viewsフォルダの下にja.ymlを作成して
ja:
helpers:
submit:
create: '登録する'
update: '更新する'
submit: '保存する'
simple_form:
required:
html: '<abbr class="nec">必須</abbr>'
labels:
person:
name: 'ユーザー名'
age: '年齢'
hints:
person:
name: 'サインインするユーザ名を入力してください'
age: '半角英数字のみ使えます'
placeholders:
person:
name: 'ユーザー名'
age: '年齢'
これを追加する。
これで日本語化ができたので
試しにユーザー名を空欄にして登録ボタンを押すと
みたいにできる!
終わり