Help us understand the problem. What is going on with this article?

Meteorでi18nパッケージを使う

More than 3 years have passed since last update.

概要

English
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 形式を使うことにする.

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

ja.i18n.yml
ok: 決定
cancel: キャンセル

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

ja.i18n.yml
_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.setLocalePromise を返すので,.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 もあるので,オリジナルのドキュメントも参考にされたい.

jkawamoto
博士(情報学)専門はクラウドコンピューティング、プライバシ&セキュリティ保護。最近は分散ストレージとクラウドで学術アルゴリズムを効率的に評価することに取り組んでいます。
http://www.jkawamoto.info
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away