概要
- 画面メッセージの国際化を行いたい。
- 画面はReactで一部作成してしまい、残りはjQueryなどで実装。
なんてことがありました。今後Reactに画面を置き換えることを考えても、コストをなるべく低く抑えたい。そんな時に取った手法。
解決法
jquery-i18n+i18nextを利用すると、以下の利点が得られる。
- メッセージリソースファイルをフルReact実装にしても使いまわせる。
→メッセージをjsonで保持可能。React用のi18nコンポーネント「React-Intl」や「react-i18n」はjsonファイルをメッセージリソースファイルとして利用可能。
実装方針
以下のコードをjsとして定義しておく。(例です)
// ブラウザの設定を読み込んで言語設定を取得
var lang = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
lang = lang.split("-")[0];
i18next.use(i18nextXHRBackend).init({
lng: lang,
debug: false,
fallbackLng : false,
defaultLng : 'en',
backend : {
loadPath: '/system/locales/{{lng}}/{{ns}}.json'
// http://<IPAddress>/system/locales/<lng>/<namespaces(default:translation)>.jsonにアクセスする。
}
}, function(err, t) {
i18nextJquery.init(i18next, $);
$("[data-i18n]").localize();
});
画面側はこんな感じで実装すれば、切り替わる。
<th data-i18n="sample.component.name">Name</th>
<th data-i18n="sample.component.endpointurl">EndpointURL</th>
<th data-i18n="sample.component.address">Address</th>
jsonファイルは以下のように指定可能。
/system/locales/en/translation.json
{
"sample": {
"component": {
"name": "Name",
"endpointurl": "EndpointURL",
"address": "Address"
}
}
}
/system/locales/ja/translation.json
{
"sample": {
"component": {
"name": "名前",
"endpointurl": "エンドポイントURL",
"address": "アドレス"
}
}
}
jQueryのモーダルダイアログ内のメッセージ出力を国際化とか、実際にフルReactの画面に適用してみるとか、そういう話はまたおいおい。