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を使用している。
|
1 2 3 4 5 6 7 8 9 10 11 |
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も忘れずに編集しよう。
|
1 2 3 4 5 6 7 8 9 |
... //= 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と名付けているあのメインファイルを開こう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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ファイルを作成する。
|
1 2 3 4 5 6 7 8 9 10 |
{ "Headline": "これはヘッドラインですよ", "Attributes": { "Post": { "Author": "筆者", "Body": "本文", "PostedAt": "投稿日時" } } } |
こんな感じでJSONファイルを作ってみた。こいつをAnuglarJSのテンプレートからアクセスするには、次のように記述すればよい。
|
1 2 3 4 5 |
... <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編）