Rails5でsimple_form、bootstrap-sass、rails-i18n日本語化でメッセージフォームを作り込む

前回の記事では確認ページ付きのメッセージ送信フォームを実装しました。https://remonote.jp/rails-confirm-form
本記事ではそのフォームをsimple_form、 bootstrap-sassで作り込み、バリデーションのエラーメッセージをrails-i18nで日本語化します。

Simple form
https://github.com/plataformatec/simple_form
Bootstrap for Sass
https://github.com/twbs/bootstrap-sass
Rails i18n
https://github.com/svenfuchs/rails-i18n

環境はこちらです

準備

Gemfile

$ bundle install を実行

application.cssの方はScssを使うのでリネームします。
application.css => application.scss (application.css.scssとしてもOK!)

app/assets/stylesheets/application.scss

app/assets/javascripts/application.js

Install

simple_formのインストールにbootstrapオプションをつけます。(bootstrapを使わない場合は–bootstrapは不要)

simple_form_for

simple_form導入前のviewsはこちらでしたが、、、

simple_form_forに変えて、だいぶスッキリしました!

simple_formのoption

いろいろとオプションをつけていきます。 file_fieldにはas: :fileです。

はい、こんな感じになりました。
simple_formとboostrap

simple_formのvalidation error

モデルにバリデーションを指定して、エラーメッセージを出します。
今回はDBを使わずActiveModelを使っています。

app/models/message.rb

エラー時のスタイルを追加します。

scss

エラーを出してみるとこのようになります。
smile_formでerror。validation

i18nで日本語化

エラーメッセージの日本語化をするには、Railsにデフォルトで入っているrails-i18nというライブラリを使います。
config.i18n.default_locale = :jaを以下のあたりに記述します。

config/application.rb

modelのカラム名は、ymlファイルに書いていきます。注意点として、今回はactivemodelを使っているところです

config/locales/models.ja.yml

サーバーを再起動させて、もう一度エラーを出してみると、、、
simple_formでerror messsageをi18n日本語化

できました!以上です!
ご覧いただき、ありがとうございました!😀


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp