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というモジュールが必要(1行目)だが、どうやら公式ドキュメントにも記述されていないらしい。ちょっとハマってしまった。

国際化ってみる

まずはロケールファイルを用意する。上記で設定したパスは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 } として保存されているのが分かる。あくまで選択言語を保存しているだけなので、ロケールファイルをキャッシュしている訳ではない。ユーザーに表示言語を選択させるようなページを作成しているなら有用だろう。

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

参考サイト

関連する記事


コメントする

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください