意外と情報がない！？メモっておくと楽できる、AngularJSで国際化対応

AngularJSはデータと画面を連携できるフレームワークです。サワリはこちらに書きました。

AngularJSには、ブラウザサイドでアプリケーションを国際化（ブラウザの設定に応じて、表示する言語を英語だったり日本語だったりに切り替える）する拡張機能があります。調べたところ、古い情報が多く、リンク切れしてたり、そのままでは動かないということがあったので、ここにお勧めの使い方をしたサンプルを記載します。

使う機能拡張

AngularJSにはいろいろな拡張機能がありますが、今回使ったのは[こちら]（http://angular-translate.github.io/）の、angular ○ translateです。
今回は、言語別にリソースファイルをJSONで作って、それを読み込む形式で国際化対応します。

　セットアップ

こちらにダウンロードページがあるのですが、そこからダウンロードできるzipだと、今回の使い方にはファイルがちょっと足りません。Githubからmasterをダウンロードしてきましょう。使うのは、解凍してできたangular-translate.minと、loader-static-files.jsをダウンロードして、Webアプリケーションに取り込みましょう。

サンプルソース

Githubに[サンプルソース]https://github.com/ukiuni/AngularJSTranslateInspectを載せます。

解説

キモはindex.htmlです。ほぼ、ここに全ての処理が書かれています。それ以外は外出しした言語リソースです。

index.html

読み込むべきJSファイルは3つです。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-translate.min.js"></script>
<script type="text/javascript" src="scripts/loader-static-files.js"></script>

上から、AngularJS本体、国際化拡張機能の本体、国際化したファイル読み込み機能です。

var myApp = angular.module('myApp', [ 'pascalprecht.translate' ]);
myApp.config([ '$translateProvider', function($translateProvider) {
    $translateProvider.useStaticFilesLoader({
        prefix : 'scripts/translate/lang_',
        suffix : '.json'
    });
    $translateProvider.preferredLanguage(findLanguage());
} ]);
function findLanguage() {
    try {
        return (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0, 2)
    } catch (e) {
        return "en";
    }
}

pascalprecht.translateモジュールを有効にすることで、国際化が有効になります。
あとは、\$translateProvider.useStaticFilesLoaderで、読み込むべき国際化したファイルの読み込み場所とサフィックスを指定します。ファイルはJSONで作ります。
あとは、\$translateProvider.preferredLanguageでどの言語のファイルを読み込むか指定します。ここでは、findLanguageでブラウザ設定を2文字で読み込んでいます。アプリによってはen_USとen_UKを分けたい場合もあると思うので、その場合はfindLanguageを最適なものにしてください。

国際化された言語ファイル

scripts/translate/lang_en.jsonとscripts/translate/lang_ja.jsonで英語と日本語のリソースを記載しています。

scripts/translate/lang_ja.json

{
    "appName":"AngularJSの国際化対応確認",
    "index":{
        "read":"簡単国際化！",
        "description":"AngularJSでも、簡単に国際化対応ができます。"
    }
}

設定で指定した場所からファイルを読み込みます。JSONで記述します。

最後にHTML中で国際化すべきタグを記述します。

<h1 translate="index.read"></h1>
<h2 translate="index.description"></h2>

以上です。

どうでしょう？

AngularJSでアプリを作るためには国際化は必須の機能だと思いますが、ちょっと癖があります。このページを覚えておくと、AngularJSを使うときに、きっと役に立つはずです。