本稿は Qiita 投稿記事 のバックアップです．

概要

Meteor を使った Web アプリケーションを国際化 (i18n) する際の備忘録． universe:i18n パッケージの使い方をまとめる．

universe:i18n

Atmosphere に登録されている国際化パッケージの一つ． サポートしているロケールの一覧は，ここから確認できる． また，JSON または YAML で翻訳対応表を渡すことができる．

インストールには，次のコマンドを実行する．

$ meteor add universe:i18n

インポートは，必要なスクリプトファイルで

import i18n from "meteor/universe:i18n";

とすれば良い．

翻訳語の登録

翻訳対応表はファイルで与えることもできるが，API を使って個別に登録することもできる．

i18n.addTranslation("ロケール", "名前空間", "キーワード", "語");

の形式で登録できる．

翻訳語ファイル

前節の様に個別に i18n.addTranslation 関数を使って登録するのは手間なので， ファイルで与えることができる． 翻訳語のファイルは JSON か YAML に対応しており， ファイル名がそれぞれ .i18n.json または .i18n.yml で終わる必要がある． ここでは，YAML 形式を使うことにする．

翻訳ファイルは単純なキー・バリューの組み合わせを列挙する．

ok: 決定
cancel: キャンセル

また，_namespace 属性を使って各ファイルが属する名前空間を指定できる．

_namespace: ui
ok: 決定
cancel: キャンセル

各翻訳ファイルがどのロケール用のものか示すには， ファイルのパスにロケールを含めるか，_locale 要素を与えるか二通りの方法がある． ファイルを開かなければ分からない _locale 要素よりは，ファイルのパスを使う方が良いだろう．

ファイルパスは，

• en-us.i18n.yml
• en-us/someName.i18n.yml

などの形式がサポートされている． これらのファイルは，imports 以外に置いておけば自動でインポートされる．

翻訳語の取得

キーワードに対応する翻訳語を取得するには， i18n.__(namespace, key) メソッドを使う．

i18n.__("ui", "ok"); // -> 決定

ロケールの設定・変更

ロケールの設定・変更には，i18n.setLocale(locale) メソッドを使う． このメソッドは，非同期で翻訳データを取得する． i18n.setLocale は Promise を返すので，.then を使って新しいロケールを使った操作を行える．

Angular-Meteor での利用

Angular-Meteor で利用する場合， i18n.getTranslation メソッドをスコープに登録してテンプレートで利用する． 例えば，

class AppCtrl {

  constructor() {
    this.translator = i18n.getTranslation;
  }

}

というコントローラを用意すれば，テンプレート側では，

<md-button ng-click="$ctrl.onNext()" aria-label="$ctrl.translator('ui', 'ok')">
  {{$ctrl.translator("button", "start")}}
</md-button>

と利用できる．ロケールが変更されるたびに表示を変えるためには，

const setLocalePromise = i18n.setLocale(locale) || i18n.setLocale("en");
setLocalePromise.then(() => {
  this.translator = i18n.getTranslation;
});

などとすれば良い．（上の例はロケールが見つからない場合に英語を設定している）

ただし，UI イベント以外の原因で setLocale を呼んだ場合（例えばコンストラクタ内など） DOM の更新は行われない． この場合は，$scope.$apply() を使う必要がある．

constructor($scope) {

  const setLocalePromise = i18n.setLocale(getLang()) || i18n.setLocale("en");
  setLocalePromise.then(() => {
    $scope.$apply(() => {
      this.translator = i18n.getTranslation;
    });
  });

}

詳細は，AngularJS and scope.$apply（日本語訳）を参考のこと．

まとめ

Meteor 用国際化パッケージ universe:i18n の最低限の使い方をまとめた． 今回紹介していない API もあるので，オリジナルのドキュメントも参考にされたい．