Rails5.1 | 27 | Webアプリケーション開発 | 注文情報入力フィールドの検証（日本語化）

<<前　 [TOP] 　次>>


注文情報入力フィールドにvalidateを設定します。
orderモデルにvalidateの記述を追記します。


【app/models/order.rb】

class Order < ActiveRecord::Base

	has_many :line_items, dependent: :destroy

	validates_presence_of :name, :address, :email, :tel_number, :pay_type,
	:message => "を入力して下さい。"

	def add_items(cart)
		cart.line_items.each do |item|
			item.cart_id = nil
			line_items << item
		end
	end

end

次の部分を追記しました。

validates_presence_of :name, :address, :email, :tel_number, :pay_type,	:message => "を入力して下さい。"

このままだとお客様に見せるメッセージとしては不適当なので、日本語化していきます。


「config」フォルダにある「application.rb」ファイルを以下のように編集します。


【config/application.rb】

require File.expand_path('../boot', __FILE__)

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Shop
  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.

    # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
    # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
    # config.time_zone = 'Central Time (US & Canada)'

    # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
    # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
    # config.i18n.default_locale = :de

    # Do not swallow errors in after_commit/after_rollback callbacks.
    config.active_record.raise_in_transactional_callbacks = true
    config.i18n.default_locale = :ja
  end
end

次の一文を追記しただけです。

config.i18n.default_locale = :ja

これでデフォルトの言語を日本語に設定しました。


次に今記述した「rails-i18n」をインストールします。
「Gemfile」の最後に「gem 'rails-i18n'」と追記します。


【Gemfile】

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.10'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.3.13', '< 0.5'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'coffee-script-source', '1.8.0'

gem 'rails-i18n'

コマンドプロンプトで「shop」フォルダに移動して「bundle install」を実行します。


無事インストールされました。


これでorderモデルのvalidateの記述を以下のようにしてもエラーメッセージが日本語で表示されます。

validates :name, :address, :email, :tel_number, :pay_type, presence: true

試しにorderモデルを編集してみます。


【app/models/order.rb】

class Order < ActiveRecord::Base

	has_many :line_items, dependent: :destroy

	validates :name, :address, :email, :tel_number, :pay_type, presence: true

	def add_items(cart)
		cart.line_items.each do |item|
			item.cart_id = nil
			line_items << item
		end
	end

end

エラーメッセージが日本語で表示されています。



次にフィールド名を日本語にします。
「config」フォルダにある「locales」フォルダの中に「ja.yml」ファイルを新規作成して以下のように記述して下さい。
「Tab」キーを使用すると、文字化けしてエラーがでますので、半角スペースを使用して下さい。


「config/locales/ja.yml(新規作成)」

ja:
 activerecord:
  attributes:
   order:
     name: '氏名'
     address: '住所'
     email: 'メールアドレス'
     tel_number: '電話番号'
     pay_type: '支払い方法'

これでフィールド名も日本語になりました。



最後にvaridate部分のCSSも変更しておきます。


【app/assets/stylesheets/scaffolds.scss】

h1:first-letter {
	font-size: 2em;
	color: #7172ac;
}

h1 {
	position: relative;
	color: #333333;
	text-shadow: 0 0 2px white;
}

h1:before {
	content: "";
	position: absolute;
	background: #9de5ff;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	top: 50%;
	/* border: dashed 1px white; */
	left: -15px;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: -1;
}

table {
  width: auto;
  border-spacing: 0;
  font-size:14px;
}

table th {
  color: #fff;
  padding: 8px 15px;
  background: #7172ac;
  background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
  background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
  font-weight: bold;
  border-left:1px solid #258;
  border-top:1px solid #258;
  border-bottom:1px solid #258;
  line-height: 120%;
  text-align: center;
  text-shadow:0 -1px 0 rgba(34,85,136,0.9);
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}

table th:first-child {
  border-radius: 5px 0 0 0;
}

table th:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #258;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;
}

table tr td {
  padding: 8px 15px;
  border-bottom: 1px solid #84b2e0;
  border-left: 1px solid #84b2e0;
  text-align: center;
}

table tr td:last-child {
  border-right: 1px solid #84b2e0;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}

table tr {
  background: #fff;
}

table tr:nth-child(2n+1) {
  background: #f1f6fc;
}

table tr:last-child td {
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}

table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}

table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}

table tr:hover {
  background: #fffafa;
  cursor:pointer;
}

.btn {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 12px 0 8px;
    text-decoration: none;
    color: #67c5ff;
    transition: .4s;
}

.btn:before{
   position: absolute;
   content: '';
   width: 100%;
   height: 4px;
   top:100%;
   left: 0;
   border-radius: 3px;
   background:#67c5ff;
   transition: .2s;
}

.btn:after{
   position: absolute;
   content: '';
   width: 100%;
   height: 4px;
   top:0;
   left: 0;
   border-radius: 3px;
   background:#67c5ff;
   transition: .2s;
}

.btn:hover:before {
    top: -webkit-calc(100% - 3px);
    top: calc(100% - 3px);
}

.btn:hover:after {
    top: 3px;
}

body {
  background-color: #fff;
  color: #333;
  margin: 33px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

div {
  &.field, &.actions {
    margin-bottom: 10px;
  }
}

#notice {
 padding:12px;
 font-weight:850;
 color:#262626;
 background:#CCFFCC;
 border:2px solid #00CC00;
 width: 500px;
 font-size: 18px;
}

.field_with_errors {
  padding: 2px;
  background-color: #ff69b4;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid #20b2aa;
  padding: 7px 7px 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;

  h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: -7px -7px 0;
    background-color: #20b2aa;
    color: #fff;
  }

  ul li {
    font-size: 12px;
    list-style: square;
  }
}

label {
  display: block;
}

.order_form {
	fieldset {
		background: #efe;
		width: 500px;

		legend {
			color: #dfd;
			background: #6495ed;
		}
	}
}

以下の３つの部分の色を変更しています。

.field_with_errors {
  padding: 2px;
  background-color: #ff69b4;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid #20b2aa;
  padding: 7px 7px 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;

  h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: -7px -7px 0;
    background-color: #20b2aa;
    color: #fff;
  }

↓↓クリックして頂けると励みになります。

<<前　 [TOP] 　次>>