Monacaアプリを多言語化しよう国際化対応へ。中津川篤司Twitter3Facebook19はてブPocket3LINEアメリカやヨーロッパ、アジアなどの海外向けにもアプリをリリースしようと思った際に必要になるのが多言語化です。アプリの多言語化は、各国語のリソースファイルをアプリ内に用意して、OSなどから得られる言語設定情報を元に表示を切り替える仕組みになっています。今回はアプリを多言語化する方法を二種類紹介します。一つはフレームワークでの対応、もう一つは汎用的な多言語化ライブラリを使った方法です。今回はAngularでの方法を紹介します。Angularは標準で国際化機能(i18n)が組み込まれています。多言語化のための実行ファイルになります。多言語化したいコンポーネントHTMLファイルに以下のように記述します。つけておくことでキーとして管理できるようになるので分かりやすいです。実行して、言語ごとに翻訳ファイルを作成します。ここでは日本語の翻訳ファイルを作成します。内容は次のようになります。タグの中に翻訳結果を書いていくだけです。context-type="linenumber">3</context></context-group></trans-unit>そしてAngularの実行時にlocaleと翻訳ファイルを指定して実行します。src/locale/messages.ja.xlfこうすることで日本語化されたAngularアプリが起動できます。i18nextを使った方法もう一つはi18nextを使う方法です。こちらは昔からよく知られた国際化ライブラリです。今回は以前作ったホットペッパーAPIを使ったデモアプリに適用してみます。JavaScriptライブラリのインストールまず必要なライブラリをインストールします。i18nexti18next-xhr-backendjquery-i18nextの3つが必要です。jQueryを使って翻訳を簡単に実行できるライブラリです。IDEのJS/CSSコンポーネントの追加と削除から登録します。以下に置いてあります。内容は次のようになります。"Address"}}}初期設定まず最初に初期設定を行います。どちらかになるため、最初に先頭2文字を取得するように調整したうえで読み込む翻訳ファイルを指定しています。ローカライズの実行処理です。属性を指定しておく必要があります。Restaurant</div>このようにすると、翻訳ファイルの中からlist.headerに該当する文字列が取得されます。再度実行する必要があります。実行結果は以下のようになります。大きなアプリになると手作業で作るのは難しいかも知れませんが、小さなアプリであればi18nextで手軽に国際化対応できそうです。i18nを使った今回のコードはgoofmint/Monaca_i18nにアップロードしてありますので実装時の参考にしてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。