i18nについて


RailsのWebアプリケーションを英語化(多言語化)をサポートしてくれるGem「i18n」の紹介です。

🐠 i18nのベーシックな使い方

デフォルトの言語を日本語にするには、config/application.rbの次のように指定します。

config.i18n.default_locale = :ja

日本語のロケールファイル(辞書ファイル)は、config/locales/ja.ymlに作成します。

ja:
view:
hello: あろは〜、世界

View側で設定したロケールファイルを使うには次のように記述します。

<%= t('view.hello') %>

ブラウザでviewを見ると「あろは〜、世界」となっていると思います。
これがi18nの基本的な使い方です。

ちなみに次のように書くこともできます。

book
author: John Due
title: The book(%{published})
I18n.t book.author
I18n.t(book.title, {published: 2012/10/10})
I18n.l Time.now

I18n.tI18n.lの使い方は次のとおりです。

メソッド 説明
I18n.t(I18n.translate) ロケールファイルからキーにマッチする値を取得
I18l.l(I18n.localize) ロケールファイルで設定された日付や時刻フォーマットに変換

🍮 GitHubから辞書ファイルをダウンロード

Railsを日本語で使う場合のデフォルトのロケールファイルを「svenfuchs/rails-i18n · GitHub」からダウンロードします。

curl -s https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml -o config/locales/ja.yml

英語のロケールファイルは次のコマンドで取得します。

curl -s https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/en.yml -o config/locales/en.yml

これで、config/locales/en.ymlconfig/locales/ja.ymlには一般的な設定が記述された状態からスタートできます。

🚕 辞書ファイルを分割して管理をしやすくする

プロジェクトの規模が大きくなるとロケールファイルを1つのYAMLで管理するのが困難になります。
そこで、辞書ファイルをmodel/view単位で分割してみます。

まず、複数のロケールファイルを読み込めるようにconfig/application.rbに次のコードを追加します。

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

上記の設定によって、次のようなフォルダ/ファイル構成でロケールファイルを管理できます。

├── defaults
│ ├── en.yml
│ └── ja.yml
├── models
│ ├── default
│ │ ├── en.yml
│ │ └── ja.yml
│ └── user
│ ├── en.yml
│ └── ja.yml
└── views
└── user
├── en.yml
└── ja.yml

🏀 言語別のHTMLテンプレート

言語(locale)別でViewの構造が異なる場合は、言語別のテンプレートを作ることができます。

app/views/users/
├── index.en.html.erb
├── index.ja.html.erb
└── index.de.html.erb

🐡 ユーザーの言語を動的に判定

ユーザーに表示する言語(locale)を動的に判定する方法について書きます。

多言語化のノウハウは「Google Webマスターツールの多言語化のセッション」がお勧めです。
日本語でわかりやすくまとまっていますし、SEOを考える上でも必読の資料だと思います。

上記のURLの内容を含めて考えるとURLで言語を判断できるようにした方がよいと思います。
理由はGoogleのクローラ対応、他人にURLをシェアしたときに言語(locale)を明示できるからです。

サブドメインで言語(locale)を判定する

日本語はhttp://ja.xxxx.com、英語はhttp://en.xxxx.comのようにサブドメインを分けて多言語する場合のRails側の対応方法です。これは言語毎にサーバを分けて管理したい時などに有効です。

app/controllers/application_controller.rbに以下を追加すれば、サブドメインからlocaleを判定してくれます。

before_filter :set_locale
def set_locale
I18n.locale = extract_locale_from_subdomain
end
def extract_locale_from_subdomain
parsed_locale = request.subdomains.first
I18n.available_locales.include?(parsed_locale.to_sym) ? parsed_locale : I18n.default_locale
end

URLのパラメータで言語(locale)を判定する

日本語はhttp://xxxx.com/ja/、英語ならhttp://xxxx.com/en/とURLの一部に言語(locale)をセットする場合の対応方法です。
このパターンは、ひとつのサーバ(バーチャルホスト)内で複数言語へ対応する場合に使えます。

app/controllers/application_controller.rbに以下を追加すれば、パラメータからlocaleを判定できます。

before_filter :set_locale
# 全リンクにlocale情報をセットする
def default_url_options(options={})
{ :locale => I18n.locale }
end
# リンクの多言語化に対応する
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end

🐰 DBに格納されている文字列の多言語化

テーブル内のあるカラムを英語化する方法は2つ考えられます。

locale毎にカラムを分ける

+------+-------------+---------------+
| id | message_en | message_ja |
+------+-------------+---------------+
| 1 | Hello World | こんにちは、世界 |
+------+-------------+---------------+

1つのカラムをシリアライズする

# app/models/greeting.rb
class Greeting < ActiveRecord::Base
serialize :message, Hash
end
# データを登録
@greeting.message = {:en => Hello World, :ja => こんにちは、世界}

🎃 モデル名やモデルの属性名の多言語化

モデル名は、config/locale/ja(en).ymlに次のように書きます。

# モデル名
ja:
activerecord:
models:
product: 製品
# モデルの属性名
ja:
activerecord:
attributes:
product:
name: 名前

viewなどで表示する場合には次のように記述します。

# モデル名
t('activerecord.models.product') #=> 製品
Product.model_name.human #=> 製品
# モデルの属性名
t('activerecord.attributes.product.name') #=> 名前
Product.human_attribute_name :name #=> 製品

🍄 JavaScriptのi18n対応

JavaScript側でRailsのロケールファイルを使うには『i18n-js』というGemを使います。

Gemfileに以下を追加して、bundle installを実行します。

# javascriptのi18n対応
gem 'i18n-js'

app/assets/javascripts/application.jsに以下を追記します。

//= require i18n
//= require i18n/translations

コンソールから次のコマンドを実行して、設定ファイルconfig/i18n.js .ymlを生成します。

rake i18n:js:setup

app/views/layouts/application.html.erbにJavaScript側へRailsが認識したユーザーの言語(locale)を通知するための設定を追記します。

<script type=text/javascript>
I18n.defaultLocale = <%= I18n.default_locale %>;
I18n.locale = <%= I18n.locale %>;
</script>

これで設定は完了です。次にJavaScript側でのi18nの使い方です。
config/i18n.js.ymlに次のコードを書きます。

ja:
hello: 'こんちゃー'

JavaScript側でi18nを表示したい場所で次のように書きます。

t(hello);

これでJavaScript側に「こんちゃー」が表示されます。

🐯 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)