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日本語化

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

Railsでseed-fuをつかってデータを管理し、order_as_specifiedで指定順にデータを取得する

タグeachで並べる

Railsにはデフォルトで初期データを入れる仕組みとして rake db:seed がありますが、これは実行する度に同じデータが作成されてしまいます。そこで、代わりにseed-fuを利用するとデータの追加、管理が簡単にできるようになります!
あわせて、RailsのActiveRecordを使って、IDで検索した際に順番どおりにデータを引っ張ってきたいって時、方法はいろいろあるでしょうが、本記事ではorder_as_specifiedを利用して簡単に実現します。
ちなみ本記事の続編では作ったそれぞれのタグをユーザーに持たせて、合計数を出しています。

Seed Fu
https://github.com/mbleigh/seed-fu
OrderAsSpecified
https://github.com/panorama-ed/order_as_specified

バージョンはこちらです

準備

Gemfile

$ bundle install を実行

本記事ではTagモデルを作成いたします

db/migrate/20180725033227_create_tags

$ rails db:migrate を実行

seedデータの作成

まずはseed ファイルを置くディレクトリを作成します。
db/fixtures に作成した seed ファイルを置くか、db/fixtures/development、 db/fixtures/production のように環境ごとにファイルを作成することもできます。
本記事ではdb/fixturesに seed ファイルを置いています。

注意点としてはseed-fuでもデータを作成する際にidを指定してあげないと重複してしまいます。

db/fixtures/tag.rb

これでデータができました。

seedデータの更新

だけど後になって JavaScriptをJavaに変えたいし、PHPを追加したい、ついでに頭文字は大文字にしたいって、そういう時は再度seedファイル書き換えて、$rails db:seed_fuを実行します。

views

できたデータをeachで取り出します。
タグっぽいスタイルをつけて表示しています。

ruby,html,css,java,pyhton,php

order_as_specified で順番を指定してデータを取得

うーん、並び順を変えたくなった、rubyは4番目にしたいがどうしよう
という時に役に立つのが、gem ‘order_as_specified’です。
使い方はシンプルで、使いたいモデルに次のコードを入れる。

app/models/tag.rb

eachで取得するときにidで順番を指定してやります。

これでできました!以上です!
最後まで見ていただき、ありがとうございました!

本記事の続編として「Railsのhas_and_belongs_to_manyで、ユーザーが複数のタグを持てるようにし、その合計数を表示する」もあります!https://remonote.jp/rails_has_and_belongs_to_many

Rails5で確認画面経由のメッセージ送信フォームを実装する

Ruby on Railsでメッセージ送信機能を実装します。入力ページ => 確認ページ => 完了ページ の流れです。確認ページにて、再編集なら戻り、確定なら送信します。その時にサイト管理者へメールでメッセージを送ります。データベースは使わないやり方です。
みなみに本記事の続編では、作成したフォームをsimple_form、bootstrap、i18nで作り込んでいますhttps://remonote.jp/rails-simple_form-bootstrap

バージョンは次の通りです。

 

本記事ではMessagesコントローラーを作成していますが、ここは適宜、変更してください。

Routes

config/routes.rb

Controller

ポイントは確認画面から戻るためのparams[:back]です。

app/controllers/messages_controller.rb

Views

入力ページ/確認ページ/完了ページのファイルを作ります。最小限の記述ですが、ご了承ください。

app/views/messages/index.html.erb

hiddenで値を保持して戻れるようにします。

app/views/messages/confirm.html.erb

app/views/messages/done.html.erb

Models

今回はデータベースを使いませんのでモデルはActiveModelを使います。
これでデータの格納やバリデーションもOK!メールの正規表現も入れています。

app/models/message.rb

Mailer

メッセージ送信用のクラスとビューを作成します。

app/controllers/mailers/message_mailer.rb

app/views/message_mailer/received_email.text.erb

Environments

最後にメールサーバの設定ですが、本記事では開発環境にGmailでの設定方法について行います。

config/environments/development.rb

以上です!

続編として、今回作成したフォームをsimple_form、bootstrap、i18nで作り込みますhttps://remonote.jp/rails-simple_form-bootstrap