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 } として保存されているのが分かる。あくまで選択言語を保存しているだけなので、ロケールファイルをキャッシュしている訳ではない。ユーザーに表示言語を選択させるようなページを作成しているなら有用だろう。
その他コントローラからアクセスしたり、値に変数を使用することもできるのだが、その辺は参考サイトを確認してほしい。
参考サイト
関連する記事
- Rails+JSフレームワークでリアルタイム掲示板を作成してみる（AngularJS編）
- テスト時にangular-translateによるリクエストをスルーする
- AngularJSのバックエンドをモック化してテストする
- Rails+JSフレームワークでリアルタイム掲示板を作成してみる（Backbone.js編）
- Rails+JSフレームワークでリアルタイム掲示板を作成してみる（Ember.js編）