AngularJS アプリケーションを国際化するには


angular-translate

AngularJS アプリケーションを国際化するには、angular-translate を使うのがとてもいい感じなので紹介。

簡単な特徴

  • 言語ごとにリソースファイルを分けられる
  • 表示する言語のファイルだけを非同期に読み込める
  • 選択言語を LocalStorage または Cookie に保存してくれる

angular-translate のインストール

Bower でモジュールをインストールし、JS ファイルを適当なとこに置いて HTML から参照させて、AngularJS の依存モジュールとして記述。

1
2
3
4
5
$ bower install angular-translate
$ bower install angular-translate-storage-cookie
$ bower install angular-translate-storage-local
$ bower install angular-translate-loader-static-files
$ bower install angular-translate-handler-log
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <head>
    <meta charset="utf-8">
    <title>i18n app</title>

    <script src="path/to/angular.min.js"></script>
    <script src="path/to/angular-translate.min.js"></script>
    <script src="path/to/angular-translate-storage-cookie.min.js"></script>
    <script src="path/to/angular-translate-storage-local.min.js"></script>
    <script src="path/to/angular-translate-loader-static-files.min.js"></script>
    <script src="path/to/angular-translate-handler-log.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="myApp">

  </body>
</html>
app.js
1
var app = angular.module('myApp', ['pascalprecht.translate']);

$translateProvider の設定

$translateProvider を config で設定。

1
2
3
4
5
6
7
8
9
10
app.config(['$translateProvider', function($translateProvider) {
  $translateProvider.useStaticFilesLoader({
    prefix: 'assets/i18n/locale-',
    suffix: '.json'
  });
  $translateProvider.preferredLanguage('ja');
  $translateProvider.fallbackLanguage('en');
  $translateProvider.useMissingTranslationHandlerLog();
  $translateProvider.useLocalStorage();
}]);
  • useStaticFilesLoader でリソースファイルのファイルパスを指定
  • preferredLanguage でデフォルトの言語キーを指定
  • fallbackLanguage で選択言語にリソースが見つからない場合の言語を指定
  • useMissingTranslationHandlerLog でキーに対応するリソースが見つからない場合に console 出力
  • useLocalStorage で選択言語の保存先として localStorage を指定(非対応ブラウザでは Cookie に保存される)
1
2
3
assets/i18n/
├── locale-en.json
└── locale-ja.json

リソースファイルは、en や ja などの言語キーの前(prefix)と後(suffix)を指定。

リソースの記述方法

JSON オブジェクトとして記述。ネストもできる。

assets/i18n/locale-en.json
1
2
3
4
5
6
7
{
  "HEADLINE": "What an awesome module!",
  "PARAGRAPH": "Srsly!",
  "NAMESPACE": {
    "PARAGRAPH": "And it comes with awesome features!"
  }
}

HTML で利用するには

HTML で利用する場合には、translate フィルタ、または translate ディレクティヴで。

filters
1
2
<h2>{{ 'HEADLINE' | translate }}</h2>
<p>{{ 'PARAGRAPH' | translate }}</p>
directives
1
2
<h2 translate>HEADLINE</h2>
<p translate="PARAGRAPH"></p>

controller で利用するには

controller で利用する場合には、$translate サービスで。

controllers.js
1
2
3
4
5
app.controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {
  $scope.headline = $translate('HEADLINE');
  $scope.paragraph = $translate('PARAGRAPH');
  $scope.namespaced_paragraph = $translate('NAMESPACE.PARAGRAPH');
}]);

変数を使った置換

メッセージの一部を置き換えられる。

controllers.js
1
2
3
{
  "TRANSLATION_ID": "{{username}} is logged in."
}
controllers.js
1
2
3
4
5
6
angular.module('myApp').controller('Ctrl', ['$scope', function ($scope) {

  $scope.translationData = {
    username: 'PascalPrecht'
  };
}]);

以下のように渡す。

controllers.js
1
$translate('TRANSLATION_ID', $scope.translationData);
filters
1
{{ 'TRANSLATION_ID' | translate:translationData }}
directive
1
<ANY translate="TRANSLATION_ID" translate-values=""></ANY>

言語の切り替え

言語を切り替える場合は、$translate の uses で。

controllers.js
1
2
3
4
5
6
7
angular.module('myApp').controller('Ctrl', ['$translate', '$scope', function ($translate, $scope) {

  $scope.changeLanguage = function (langKey) {
    $translate.uses(langKey);
  };

}]);

こんな感じかな。

1
2
<button ng-click="changeLanguage('ja')" translate="BUTTON_LANG_JA"></button>
<button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>
assets/i18n/locale-ja.json
1
2
3
4
{
  "BUTTON_LANG_JA": "日本語",
  "BUTTON_LANG_EN": "英語"
}

たいへん便利な国際化モジュール、angular-translate の紹介でした。