i18nによる日本語化

i18nを使用しユーザー登録画面とログイン画面を日本語化する。
i18n国際化(Internationalization)はRailsにおいて、言語の翻訳機能があるgemである。
実行環境

  • Rails5.2.3
  • Ruby2.6.4

gem 'rails-i18n'をGemfileに記述し、bundleする。

# rails5系なら以下を記述
gem 'rails-i18n', '~> 5.1' 

# rails4系なら以下を記述
gem 'rails-i18n', '~> 4.0'

config/application.rbにデフォルトの言語を日本語にする設定とロケールファイルを読み込むPATHを設定。

config.i18n.default_locale = :ja

config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]

config/locales以下にロケールファイルを作成する。 モデル名、モデル属性に関する日本語化はactiverecord/ja.ymlに記述。
ビューに関する日本語化はviews/ja.ymlに記述。

モデル側の日本語化

モデルは全て activerecord 以下に記述する。 models以下に日本語化するモデルを指定、attributes以下にはモデルの属性を指定する。

ユーザー登録画面 modelに関する翻訳ファイル

ja:
 activerecord:
   models:
    user: 'ユーザー'
   attributes:
     user:
       last_name: '姓'
       first_name: '名'
       email: 'メールアドレス'
       password: 'パスワード'
       password_confirmation: 'パスワード確認'

Modelに紐づくform_withのlabelはRailsがロケートファイルの翻訳を適応してくれる。 一方でform_withの引数にModelを渡してないときはモデルと紐付いていないので、label自身に翻訳を適応する記述をする必要がある。また、国際化の際はlazy lookup機能を使用する。

     <%= form_with model:@user, local: true do |f| %>
        <div class="form-group">
          <%= f.label :last_name %>
          <%= f.text_field :last_name, class: 'form-control', id: 'user_last_name' %>
        </div>
        <div class="form-group">
          <%= f.label :first_name %>
          <%= f.text_field :first_name, class: 'form-control', id: 'user_first_name' %>
        </div>
        <div class="form-group">
          <%= f.label :email %>
          <%= f.text_field :email, class: 'form-control', id: 'user_email' %>
        </div>
        <div class="form-group">
          <%= f.label :password %>
          <%= f.password_field :password, class: 'form-control', id: 'user_password' %>
        </div>
        <div class="form-group">
          <%= f.label :password_confirmation %>
          <%= f.password_field :password_confirmation, class: 'form-control', id: 'user_password_confirmation' %>
        </div>
        <%= f.submit (t 'defaults.register'), class: 'btn btn-primary'%>
        <%end%>
      <div class='text-center'>
      <%= link_to (t 'defaults.to_login_page'), login_path%>

view側の日本語化

ログイン画面 viewに関する翻訳ファイル

ja:
  defaults:
    login: 'ログイン'
    register: '登録'
    title: 'ユーザー登録'
    to_login_page: 'ログインページへ'
  user_sessions:
     new:
       Back: '戻る'
       title: 'ログイン'
       email: 'メールアドレス'
       password: 'パスワード'
       to_register_page: '登録ページへ'

ログイン画面はform_withの引数がurlでモデルと紐付いていないのでlabelに翻訳を適応させる記述をする。 Model.human_attribute_name(:カラム名)で属性名を取得する。

<%= link_to (t '.Back'), users_path %>
<div class="container">
 <div class="row">
   <div class=" col-md-10 offset-md-1 col-lg-8 offset-lg-2">
     <h1><%= t '.title' %></h1>
     <%= form_with url: login_path, local: true do |f| %>
       <div class="form-group">
         <%= f.label :email, User.human_attribute_name(:email) %>
         <%= f.text_field :email, class: "form-control" %>
       </div>
       <div class="form-group">
         <%= f.label :password, User.human_attribute_name(:password) %>
         <%= f.password_field :password, class:"form-control" %>
       </div>
       <div class="actions">
         <%= f.submit (t 'defaults.login'), class: "btn btn-primary" %>
       </div>
     <% end %>
     <div class='text-center'>
       <%= link_to (t '.to_register_page'), new_user_path %>