アメリカやヨーロッパ、アジアなどの海外向けにもアプリをリリースしようと思った際に必要になるのが多言語化です。
アプリの多言語化は、各国語のリソースファイルをアプリ内に用意して、OSなどから得られる言語設定情報を元に表示を切り替える仕組みになっています。

今回はアプリを多言語化する方法を二種類紹介します。一つはフレームワークでの対応、もう一つは汎用的な多言語化ライブラリを使った方法です。

フレームワークでの対応

今回はAngularでの方法を紹介します。Angularは標準で国際化機能（i18n）が組み込まれています。
Angularプロジェクト内の node_modules/.bin/ng-xi18n が多言語化のための実行ファイルになります。

まず多言語化したいコンポーネントHTMLファイルに以下のように記述します。
i18n属性だけを指定しても良いですが、 属性値に@@〜 をつけておくことでキーとして管理できるようになるので分かりやすいです。

<h1 i18n="@@header">
  Welcome to {{title}}!
</h1>

そして ng-xi18n を実行して、言語ごとに翻訳ファイルを作成します。
ここでは日本語の翻訳ファイルを作成します。

$ node ./node_modules/.bin/ng-xi18n  --i18nFormat=xlf  --outFile=src/locale/messages.ja.xlf

そうすると各コンポーネントHTMLファイルを確認して翻訳ファイル messages.ja.xlf を生成してくれます。内容は次のようになります。

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="header" datatype="html">
        <source>
    Welcome to <x id="INTERPOLATION"/>!
  </source>
        <target/>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.ts</context>
          <context context-type="linenumber">3</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>

後は target タグの中に翻訳結果を書いていくだけです。

<trans-unit id="header" datatype="html">
  <source>
    Welcome to <x id="INTERPOLATION"/>!
  </source>
  <target>
    ようこそ <x id="INTERPOLATION"/>！
  </target>
  <context-group purpose="location">
    <context context-type="sourcefile">src/app/app.component.ts</context>
    <context context-type="linenumber">3</context>
  </context-group>
</trans-unit>

そしてAngularの実行時にlocaleと翻訳ファイルを指定して実行します。

$ ng serve --open  --aot --locale ja --i18n-format xlf --i18n-file src/locale/messages.ja.xlf

こうすることで日本語化されたAngularアプリが起動できます。

i18nextを使った方法

もう一つはi18nextを使う方法です。こちらは昔からよく知られた国際化ライブラリです。

今回は以前作ったホットペッパーAPIを使ったデモアプリに適用してみます。

JavaScriptライブラリのインストール

まず必要なライブラリをインストールします。

  • i18next
  • i18next-xhr-backend
  • jquery-i18next

の3つが必要です。
i18next-xhr-backend はメッセージファイルを外部化した時に読み込むためのもので、jquery-i18next はjQueryを使って翻訳を簡単に実行できるライブラリです。

これらをMonaca IDEのJS/CSSコンポーネントの追加と削除から登録します。

翻訳ファイルの準備

翻訳ファイルは任意の場所に置いて構いませんが、今回は www/locales/ 以下に置いてあります。内容は次のようになります。

日本語（ja/translation.json）

{
    "list": {
        "header": "レストラン検索",
        "get": "レストラン取得"
    },
    "detail": {
        "back": "戻る",
        "header": "レストラン詳細",
        "restaurant": {
            "name": "名前",
            "address": "住所"
        }
    }
}

英語（en/translation.json）

{
    "list": {
        "header": "Search Restaurant",
        "get": "Get Restaurant"     
    },
    "detail": {
        "back": "Back",
        "header": "Restaurant Detail",
        "restaurant": {
            "name": "Name",
            "address": "Address"
        }
    }
}

初期設定

まず最初に初期設定を行います。実行環境によって言語コードが ja-JP と ja のどちらかになるため、最初に先頭2文字を取得するように調整したうえで読み込む翻訳ファイルを指定しています。

// 国際化の準備
var lng = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
if (lng.split('-').length == 2)
  lng = lng.split('-')[0];
i18next.use(i18nextXHRBackend).init({
    lng: lng,
    backend: {
        loadPath: `./locales/${lng}/translation.json`
    }
}, function(err, t) {
  jqueryI18next.init(i18next, $);
  $("[data-i18n]").localize();
});

最後に実行している $("[data-i18n]").localize(); が、ローカライズの実行処理です。
この場合、多言語化を行いたいタグに対して事前に data-i18n 属性を指定しておく必要があります。

<div data-i18n="list.header">Search Restaurant</div>

このようにすると、翻訳ファイルの中からlist.headerに該当する文字列が取得されます。

なお、遷移した先の画面は翻訳されていないため、画面遷移の際に $("[data-i18n]").localize(); を再度実行する必要があります。

実行結果は以下のようになります。

日本語

英語

大きなアプリになると手作業で作るのは難しいかも知れませんが、小さなアプリであればi18nextで手軽に国際化対応できそうです。i18nを使った今回のコードはgoofmint/Monaca_i18nにアップロードしてありますので実装時の参考にしてください。