まめージェント

Android, GAE, AngularJSの技術ネタ中心。Twitter: @mame01112

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に定義していない文言があると、
それを見つけてエラーを吐いてくれるので、”日本語に定義したけど英語に入れ忘れた”という、
多言語対応であるあるのうっかりミスを防ぐことができます。

JSONの書き方

JSONは、まあ、いたった普通のJSONです。
ネストもできます。
こんな感じ。

"common": {
	"cancel": "キャンセル",
	"save": "保存"
},


続きはこちら。
Angular translateの使い方 (その2、利用編) - まめージェント