テクノロジー

2017年08月20日

Railsアプリの日本語化

Aws4 request&x amz signedheaders=host&x amz signature=ba48d24b69ad66d5897571cef19586a8c91818dcc64dc1ad76d11be47c91e8d2

Railsアプリケーションの文字を日本語にするには?

この記事では、英語を日本語化させる方法を紹介していきたいと思います。

この記事をお読みいただいている多くの方々は、日本語でアプリ制作を行っているのではないでしょうか?
Railsはアプリ上rails gなどで生成されるファイルにより出力される文字のほとんどが英語設定となっています。

その為Rails側で日本語に対応するための準備が必要です。
早速、日本語化をどの様に行うか学習を進めていきましょう。

2つの日本語化する方法

日本語化の方法は2つあります。

  • HTMLの英語の文書をそのまま日本語に置き換える
  • 翻訳ファイルを作成する

これらの方法を用いてブログの新規作成ページを日本語化していきます。

そのまま日本語に置き換える

ブログ新規作成ページを表示する app/views/blogs/new.html.erb ですが、最初は下記のようなソースコードになっています。

(app/views/blogs/new.html.erb)

<h1>New Blog</h1>

<%= render 'form' %>
<%= link_to 'Back', blogs_path %>

その結果以下のように出力されます。

https://diveintocode.gyazo.com/7385478705a513838ab77452542a0577

app/views/blogs/new.html.erb のソースを下記のように書き換えることで、日本語化することができます。

(app/views/blogs/new.html.erb)

<h1>新規作成</h1>
<%= render 'form' %>
<%= link_to '戻る', blogs_path %>

https://diveintocode.gyazo.com/780c578d566bbf8ab5c7194dfcc27bc5

やってはいけない日本語化

では TitleContentCreate Blog はどのように日本語化すればよいのでしょうか。
該当するファイルである app/views/blogs/_form.html.erb のソースを見てみましょう。

(app/views/blogs/_form.html.erb)

<!-- 省略 -->
<div class="field">
  <%= f.label :title %><br>
  <%= f.text_field :title %>
</div>
<div class="field">
  <%= f.label :content %><br>
  <%= f.text_area :content %>
</div>
<div class="actions">
  <%= f.submit %>
</div>
<!-- 省略 -->

先ほどと同様に日本語化したい場所を英語から日本語に変換してみます。
15行目の :title:タイトル に変更します。
19行目の :content:内容 に変更します。

(app/views/blogs/_form.html.erb)

<!-- 省略 -->
<div class="field">
  <%= f.label :タイトル %><br>
  <%= f.text_field :title %>
</div>
<div class="field">
  <%= f.label :内容 %><br>
  <%= f.text_area :content %>
</div>
<div class="actions">
  <%= f.submit %>
</div>
<!-- 省略 -->

すると下図のようになり、うまく日本語化されたかように見えます。
しかし、これはやってはいけない日本語化の一例です。

https://diveintocode.gyazo.com/918a9a4c1ed7bdc1aedbe4929333cc50

:title:contentシンボル とばれ、 rails gコマンド などで生成された時にモデルのカラム名として定義されたものです。
そのため未定義である :タイトル:内容 に置き換えると f.label の引数としてカラム名を正確に認識することができなくなってしまいます。

例えば label をクリックするとフォームが有効化されますが、シンボルが認識されないと label をクリックしてもフォームが有効化されません。

正常な例

https://diveintocode.gyazo.com/bbb06fd05c0588816d24405e66f345b3

異常な例

https://diveintocode.gyazo.com/b72c30ac740b7e4d6e39122173115e93

翻訳ファイルを作成する

それではどのようにして TitleContent のような シンボルに関する部分 を日本語化すれば良いのでしょうか。
それは 翻訳ファイルを作成 して、アプリ内に設置することで日本語化する方法です。

まずは先ほど変更したビューファイルのシンボルを、元に戻しておきましょう。

(app/views/blogs/_form.html.erb)

<!-- 省略 -->
<div class="field">
  <%= f.label :title %><br>
  <%= f.text_field :title %>
</div>
<div class="field">
  <%= f.label :content %><br>
  <%= f.text_area :content %>
</div>
<div class="actions">
  <%= f.submit %>
</div>
<!-- 省略 -->

localesの設定と読み込み

Railsでは以下2点を実装することで、多種の言語に対応することができます。

  • config/locales を読み込むように設定
  • 翻訳ファイルを config/locales 傘下に配置

今回は日本語化することを前提に話を進めていきます。

まずは前者を実装しましょう。

(config/application.rb)

# 変更前
# config.i18n.default_locale = :de <= コメントアウトされているので探すとき注意

# 変更後
config.i18n.default_locale = :ja

:ja とすることで config/locales/ja.yml を読み込む宣言をします。

ja.ymlの作成

次に config/locales ディレクトリ内に ja.yml という名前でファイルを新規作成します。

ja.ymlに下記のように記載して保存してください。

ja:
  activerecord:
    attributes:
      blog:
        title: タイトル
        content: 内容
  helpers:
    submit:
      create: 登録する

Railsアプリケーションを起動すると下記のようにうまく日本語化されていることが確認できます。

https://diveintocode.gyazo.com/453febed24c67d9ee4857f498e093a10

シンボル に対する日本語化は上記のようにして行います。

ja.ymlとシンボルの関係性

ではどのようにして ja.ymlシンボル をリンクさせているのでしょうか。

rails console を立ち上げ、以下を入力してみましょう。

rails c

[1] pry(main)> Blog.human_attribute_name(:title)
=> "タイトル"

タイトル と出力されたのが確認できると思います。

さらに以下を入力してみましょう。

[1] pry(main)> Blog.human_attribute_name(:content)
=> "内容"

内容 と出力されたのが確認できると思います。

上記より ActiveRecord::Base に定義されている human_attribute_name というメソッドを利用して、 ja.ymlシンボル をリンクさせていることがわかります。

GitHubで公開されているja.ymlの利用

エラーメッセージや日付や時間なども、デフォルトでは英語表記されています。
翻訳ファイル(ja.yml)を作成する方法で、これらもすべて一括して日本語化することができます。
そのために利用できるja.ymlがGitHub上に公開されています。

ja.yml

先ほど作成したja.ymlの内容をすべて削除した後に、この内容(下記)をコピペしましょう。

ja:
  activerecord:
    errors:
      messages:
        record_invalid: "バリデーションに失敗しました: %{errors}"
        restrict_dependent_destroy:
          has_one: "%{record}が存在しているので削除できません"
          has_many: "%{record}が存在しているので削除できません"
  date:
    abbr_day_names:
    - 
    - 

# 途中省略

      default: "%Y/%m/%d %H:%M:%S"
      long: "%Y年%m月%d日(%a) %H時%M分%S秒 %z"
      short: "%y/%m/%d %H:%M"
    pm: 午後

また、アプリケーションのモデル状況に合わせて、モデルのカラム名を日本語化する内容を追記しましょう。
今回の場合は、activerecord:以下に下記内容を追記します。

attributes:
  blog:
    title: タイトル
    content: 内容

最終的にja.ymlファイルは以下のようになります。

ja:
  activerecord:
    attributes:
      blog:
        title: タイトル
        content: 内容
    errors:
      messages:
        record_invalid: "バリデーションに失敗しました: %{errors}"
        restrict_dependent_destroy:
          has_one: "%{record}が存在しているので削除できません"
          has_many: "%{record}が存在しているので削除できません"
  date:
    abbr_day_names:
    - 
    - 

# 途中省略

        one: "%{model}にエラーが発生しました"
        other: "%{model}に%{count}個のエラーが発生しました"
  helpers:
    select:
      prompt: 選択してください
    submit:
      create: 登録する
      submit: 保存する
      update: 更新する
  number:
    currency:

# 途中省略

      default: "%Y/%m/%d %H:%M:%S"
      long: "%Y年%m月%d日(%a) %H時%M分%S秒 %z"
      short: "%y/%m/%d %H:%M"
    pm: 午後

また、YAMLファイルは インデント が少しでもずれてしまうとエラーが発生するファイルのため、意識して半角スペース2つで、インデントを記述するようにしましょう。

DIVE INTO CODEのことをもっと知ってみませんか?