Railsでi18n-jsを使ってJavaScriptの国際化

前はRuby on Railsアプリ内で使用するjavascriptでi18n APIを利用する - hrendohの日記のようにtoretore/babilu - GitHubを使っていたのですが、

DEPRECATED
This project is abandoned in favor of i18n-js:
https://github.com/fnando/i18n-js

と書かれてしまっているので、i18n-jsを使ってみます。

  • 指定したscopeのメッセージのみをJavaScriptファイルとして保存することができる。
  • 日付のローカライズができる

などbabiluと比べて進化しているようです。

基本的にはREADMEに書いてある通りですが、日本語の情報は見当たらなかったので、Rails 3.0.xで僕がやった設定を簡単に書いておきます。

1. Gemfileに1行追加します。

gem 'i18n-js'

2. bundle installを実行します。

$ bundle install

3. カスタマイズのために設定ファイルをコピーします。i18n.jsとi18n-js.ymlがコピーされます。

$ rake i18n:js:setup

4. JavaScript用のリソースファイル(js.ja.yml, js.en.ymlとか)を作成します

js.en.yml

en:
  js:
    hello: "Hello"
    world: "World"

js.ja.yml

ja:
  js:
    hello: "こんにちは"

5. i18n-js.ymlに設定します

国際化用メッセージはActiveRecord用とか多く定義されていますが、jsスコープのみをJavaScriptファイルとして生成します。

translations:
- file: "public/javascripts/translations.js"
  only: '*.js'

6. 国際化用JavaScriptファイルを生成します

$ rake i18n:js:export

すると、以下のようなtranslations.jsが作成されます。

I18n.translations = {"en":{"js":{"hello":"Hello","world":"World"}},"ja":{"js":{"hello":"\u3053\u3093\u306b\u3061\u306f"}}};

7. Viewで初期設定

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

I18n.fallbacksをtrueにすると、日本語に存在しないキーの場合に英語のメッセージを表示してくれます。

8. JavaScriptで呼び出す

I18n.t('js.hello');

これでロケールが日本語なら「こんにちは」、英語なら「Hello」が返ります。
I18n.t('js.world');の場合は日本語に存在しないので、日本語でも英語でも「World」が返ります。

物足りないところ

理想を言えば、言語ごとにJavaScriptファイルを分けたいです。

translations:
- file: "public/javascripts/i18n/%{locale}.js"
  only: 'js'

こんな感じでen.jsとja.jsに分けられるのですが、残念ながらこれとfallbackが共存できませんでした。
上の例で言えば、ja.jsにはworldが含まれません。
じゃあen.jsもja.jsも読みこめばと思うのですが、生成されたファイルはI18n.translations = {...}と代入しちゃってるので、両方読み込むと後から読み込んだほうが上書きしてしまうのです。
残念。