Angular translateの使い方 (その1、準備編)
そもそも
今回はAngular JSで多言語対応のお話。
あんまり日本語の情報がない？ということでシェアです。
※あっても微妙に間違っている（ように見える）ものだったり・・・。
準備
今回僕が使ったのは、angular-translate(https://github.com/angular-translate/angular-translate)です。
ここから必要とライブラリ（の一部）はダウンロードすることができるんですが、すべてを含んでいるわけではないのがタチの悪いところ・・・。（bowerを使えばすべて揃うらしいですが、僕は使っていません）
必要なものは、それぞれ下記GitHubからダウンロードします(上記リンクからリンクされています＆ググれば普通に出てきますが)
－angular-translate.min.js: https://github.com/angular-translate/angular-translate
－angular-translate-loader-static-files.min.js : https://github.com/angular-translate/bower-angular-translate-loader-static-files
－angular-translate-storage-local.min.js: https://github.com/angular-translate/bower-angular-translate-storage-local
－angular-translate-storage-cookie.min.js: https://github.com/angular-translate/bower-angular-translate-storage-cookie
－angular-translate-handler-log.min.js: https://github.com/angular-translate/bower-angular-translate-handler-log
※もちろん、上記の他、AngularJSメインのJSも必要です。
これを、読み込んで準備完了。
<script src="lib/angular-translate.min.js"></script> <script src="lib/angular-translate-loader-static-files.min.js"></script> <script src="lib/angular-translate-storage-local.min.js"></script> <script src="lib/angular-translate-storage-cookie.min.js"></script> <script src="lib/angular-translate-handler-log.min.js"></script>
必要モジュールの読み込み
このangular-translateは、pascalprecht.translatを読み込む必要があります。
こんな感じ。
angular.module('MymApp',
['pascalprecht.translate',
]);そして、config内で$translateProviderの設定をします。
.config(['$translateProvider', function($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix : '../lang/lang_',
suffix : '.json'
});
// $translateProvider.determinePreferredLanguage();
$translateProvider.preferredLanguage('ja');
$translateProvider.fallbackLanguage('en');
$translateProvider.useMissingTranslationHandlerLog();
$translateProvider.useLocalStorage();
$translateProvider.useSanitizeValueStrategy('escaped');
}]);ここで、useStaticFilesLoaderは外部のjsonを読み込みますよ、という意味で、/langフォルダ内、lang_で始まり、.jsonで終わるファイルを指します。日本語であればlang_ja.jsonみたいな感じのファイルになります。
そして、上記ではコメントアウトされていますが、determinePreferredLanguage()で、システムの設定（だったハズ）から、デフォルトの設定を引っ張ってもらうこともできるようです。
が、このdeterminePreferredLanguage()が、(少なくとも僕の環境では)
PC版Chromeでしか動きませんでした。
※SafariとMobile版Chromeでは動かず・・・。
原因は、システムが返してくる言語設定の違いでした。Chromeでは、日本語であれば"ja"のみ返ってくるんですが、少なくともSafariでは"jp_ja"と返ってきているようです。
その結果、/lang/jp_ja.jsonというファイルを読みに行き、そんなのないよ、と404になっていました。自分が作っているウェブサービスが日本語がメインになっており、
そこまで頑張らなくていいかなー、ということで、今回はdeterminePreferredLanguage()は使わない方向で進めています。
ので、その代わりとして
$translateProvider.preferredLanguage('ja');
$translateProvider.fallbackLanguage('en');を設定しています。
それぞれ、”初期設定言語”と”初期設定言語がなかった場合のバックアップ言語”といったところでしょうか。
$translateProvider.useMissingTranslationHandlerLog();
$translateProvider.useLocalStorage();
$translateProvider.useSanitizeValueStrategy('escaped');に関しては特になくてもよいようですが（もし使わない場合はそれに該当するjsも読み込む必要がありません）、
特に”useMissingTranslationHandlerLog”は、jsonに定義していない文言があると、
それを見つけてエラーを吐いてくれるので、”日本語に定義したけど英語に入れ忘れた”という、
多言語対応であるあるのうっかりミスを防ぐことができます。
