Webとデザインのあれこれ

プログラミングとUIデザインの学習記録です。

i18nについて

i18nとは

Railsの国際化機能をi18nと呼びます。この機能を用いることで、複数の言語に合わせてテキストを切り替えたり、地域ごとに日付や数値の書式を切り替えたりすることが可能になります。

本記事の目的

Railsの教科書で作成した簡単なbookアプリを多言語化するプラクティスに取り組みました。その際の気づきをまとめております。

i18nの設定

ざっくりまとめると、

  1. I18nというクラスにロケール(言語+地域の種類)を設定する
  2. 1.で設定したロケールに合わせてYAML形式のロケールテキスト(翻訳ファイル)から文字列を読み込み、表示する

以上のプロセスを踏むだけで、簡単に多言語化対応が可能となります。

ロケールの設定

まず、config/application.rbI18n.localeロケールを表す文字列またはシンボルを指定します。 デフォルトのlocaleは:enのため、他のロケールを設定したい場合は必ず記述する必要があります。

  1. config.i18n.default_locale = :jaを追加
  2. config/locales以下に翻訳用のファイル(YAML形式)を追加する場合はconfig.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s] を追加する

f:id:b_leiu:20190508191422p:plain

翻訳ファイルの構成について

github.com

上記のリンクを確認すると、日本語の翻訳ファイル(ja.yml)のテンプレートが確認できますね。 f:id:b_leiu:20190508192323p:plain

モデルの記述 f:id:b_leiu:20190508193502p:plain

ActiveRecordを起点として(必ず!!)、モデル名: book 、モデル名とその属性に対する翻訳を記述しています。 全モデルで共通の属性であればattributesの直下に記述をするだけでOKです。

Viewsの記述 f:id:b_leiu:20190508194041p:plain

スクショのように、RailsのViewsファイルのディレクトリ構造と翻訳ファイルの階層構造を合わせることで、実はViewsファイルにフルパスを書かなくてもよくなります。

この仕組みを遅延参照(lazy lookup)と呼びます。

例えば、index.html.erbを見てみると・・・・

f:id:b_leiu:20190508194735p:plain

.Showと記載するだけで、該当する翻訳(この場合「詳細画面」)を引っ張ってくれるのです。また、変換にはtメソッドを使用します。

この他にも、flashのメッセージの翻訳なども記述できます。テンプレートをチェックしてみてくださいね。

ロケールの切り替えについて

上記のように複数方法がありますが、私はサブディレクトリからロケールの情報を取得して表示する方法を選択しました。

手順としては、

  1. config/routes.rbにscopeメソッドを記述
  2. app/controllers/application_controller.rbにdefault_url_optionsメソッドを記述してオーバーライドする
# config/routes.rb
scope "(:locale)" do
  resources :books
end
# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  ...
  before_action :set_locale
  def set_locale
    I18n.locale = params[:locale] || I18n.default_locale
  end

  #URLのロケールについては、`params[:locale]`で取得。
  def default_url_options(options = {})
    { locale: I18n.locale }.merge options
  end

end

default_url_optionsをオーバーライドして、すべてのリンクに現在のロケールを反映することができます。

最後に、app/views/layouts/application.html.erbに下記の記述を足すことで、全画面に切り替え用のリンクがつきます。

<%= link_to_if params[:locale].present?, '日本語',  url_for(controller: controller.controller_name, action: controller.action_name, locale: 'ja') %> |
<%= link_to_if params[:locale] != 'en',  'English',  url_for(controller: controller.controller_name, action: controller.action_name, locale: 'en') %>

以上の手順を実行すると、下記のように多言語の設定が可能となります。

英語バージョン f:id:b_leiu:20190508195259p:plain

日本語バージョン f:id:b_leiu:20190508195402p:plain

YAMLとは

ロケールテキスト(翻訳ファイル)の記述にYAMLを使用しています。YAMLとはデータ形式の1種で、配列やハッシュなどのデータを人間にわかりやすいように 記述できるのが最大の特徴です。

# YAMLの例
# キー: 値でハッシュを表しています。
member1:
      number: 11
      name: Taro

入力する際の注意点として、下記の3つが挙げられます。

  1. インデントはタブではなく半角空白で入力すること
  2. number: 数字のようにコロンの後は必ず半角空白を入力
  3. ファイルを保存する場合は、文字コードUTF-8とする

最後に

以上となります。参考文献は以下となりますので、適宜ご参照ください。

ruby-rails.hatenadiary.com

ariarichan.hateblo.jp

改訂4版 基礎 Ruby on Rails (IMPRESS KISO SERIES)