AngularJS + Railsで国際化（i18n）

AngularJS + Railsという構成でアプリケーションを構築している場合、Rails側にはバックエンド（主にREST API）をのみを任せ、クライアントサイドはAngularJSにというパターンが定石だろう。その際、国際化（i18n）はどちらの仕事になるのかといえば、表示に関する部分なのでAngularJS側に実装するのが素直だろう。というわけで、AngularJSによる国際化の方法を探ってみた。

環境

• rails 4.1.8
• angular 1.3.3
• angular-translate 2.4.2

セットアップ

Gemfileを編集する。最近のマイブームであるRails Assetsを使用している。

📄Gemfile

source 'https://rubygems.org'
source 'https://rails-assets.org'
...
gem 'rails-assets-angular'
gem 'rails-assets-angular-translate'
gem 'rails-assets-angular-translate-storage-cookie'
gem 'rails-assets-angular-translate-storage-local'
gem 'rails-assets-angular-translate-loader-static-files'
gem 'rails-assets-angular-translate-handler-log'
gem 'rails-assets-angular-cookies'
...

bundle installしたら、application.jsも忘れずに編集しよう。

📄app/assets/javascripts/application.js

...
//= require angular
//= require angular-translate
//= require angular-translate-storage-cookie
//= require angular-translate-storage-local
//= require angular-translate-loader-static-files
//= require angular-translate-handler-log
//= require angular-cookies
...

AngularJSの設定ファイルというか、よくみんながapp.jsと名付けているあのメインファイルを開こう。

📄app/assets/javascripts/app.js.coffee

window.App = angular.module('SampleApp', ['ngCookies', 'pascalprecht.translate'])

App.config ['$httpProvider', '$translateProvider', ($httpProvider, $translateProvider) ->
  # ロケールファイルのファイル名を設定
  $translateProvider.useStaticFilesLoader
    prefix: '/assets/translations/locale.'
    suffix: '.json'
  # デフォルトはja
  $translateProvider.preferredLanguage('ja')
  # リソースが見つからなかった場合はen
  $translateProvider.fallbackLanguage('en')
  # 選択言語をhtml5ローカルストレージに保存（非対応ブラウザならばクッキー）
  $translateProvider.useLocalStorage()
  # キーが見つからなかった場合はコンソールにログを出力
  $translateProvider.useMissingTranslationHandlerLog()
]

angular-translate-storage-cookieを使用するにはngCookiesというモジュールが必要（１行目）だが、どうやら公式ドキュメントにも記述されていないらしい。ちょっとハマってしまった。

国際化ってみる

まずはロケールファイルを用意する。上記で設定したパスはRailsを使用しているならapp/assets/javascripts/translationsに該当するので、このディレクトリ内にlocale.言語名.json というファイル名のJSONファイルを作成する。

📄app/assets/javascripts/translations/locale.ja.json

{
  "Headline": "これはヘッドラインですよ",
  "Attributes": {
    "Post": {
      "Author": "筆者",
      "Body": "本文",
      "PostedAt": "投稿日時"
    }
  }
}

こんな感じでJSONファイルを作ってみた。こいつをAnuglarJSのテンプレートからアクセスするには、次のように記述すればよい。

📄index.html

...
<h1>{{ 'Headline' | translate }}</h1>
...
<td>{{ 'Attributes.Post.Author' | translate }}</td>
...

このあたりはRailsっぽい。ちゃんとローカルストレージに保存されているか確認するには、ブラウザのデベロッパーツールを見れば良い。

{ “NG_TRANSLATE_LANG_KEY”: ja } として保存されているのが分かる。あくまで選択言語を保存しているだけなので、ロケールファイルをキャッシュしている訳ではない。ユーザーに表示言語を選択させるようなページを作成しているなら有用だろう。

その他コントローラからアクセスしたり、値に変数を使用することもできるのだが、その辺は参考サイトを確認してほしい。

参考サイト

• AngularJS アプリケーションを国際化するには
• angular-translate (github)
• angular-translate doc

関連する記事

• Rails+JSフレームワークでリアルタイム掲示板を作成してみる（AngularJS編）
• テスト時にangular-translateによるリクエストをスルーする
• AngularJSのバックエンドをモック化してテストする
• Rails+JSフレームワークでリアルタイム掲示板を作成してみる（Backbone.js編）
• Rails+JSフレームワークでリアルタイム掲示板を作成してみる（Ember.js編）