概要
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 もあるので,オリジナルのドキュメントも参考にされたい.