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を使用している。

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

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

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

国際化ってみる

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

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

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

ローカルストレージ

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

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

参考サイト

関連する記事


コメントを残す

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

CAPTCHA


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