組み込みJSのi18n（国際化）対応

以下の対応を行うことで、a-blog cmsで使われるJavaScriptで使われるメッセージなどをi18n（国際化）対応する事ができます。

変数化

翻訳する箇所を変数化します。以下のソースはアラートメッセージを変数化しています。変数はなんでも大丈夫ですが、グローバルを汚してしまう事になるので、ここではACMS.i18nのプロパティとして利用しています。

ACMS.Ready(function(){
  alert(ACMS.i18n.alertMess);
});

下準備

先ほど作成した変数に翻訳した文字列が入ってくるようにします。

/js/i18n.jsを開き以下のように追記してください。ここで、t() の引数に指定する文字列はドットつなぎで適応なものを設定ください。

i18next.use(i18nextXHRBackend).init({
  lng: navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage),
  debug: false,
  load: 'languageOnly',
  fallbackLng: 'ja',
  backend: {
    loadPath: ACMS.Config.jsRoot+'locales/{{lng}}/{{ns}}.json'
  }
}, function(err, t) {
  ACMS.i18n = {};

  ACMS.i18n.alertMess = t('hoge.message1');  // この行を追記
});

翻訳ファイル（json）の用意

最後に翻訳ファイルを用意します。翻訳ファイルはJSONファイルになっており、直感的に編集できるようになっております。

翻訳ファイルのパス

以下のルールのパスで翻訳ファイルを設置してください。

/js/locales/言語/translation.json
(e.g) /js/locales/en/translation.json

/js/locales/en/translation.json

{
  "hoge": {
    "message1": "Hello World."
  }
}

/ /js/locales/ja/translation.json /

{
  "hoge": {
    "message1": "こんにちは世界。"
  }
}

先ほど t() の引数に設定したドットで区切った記述により、jsonファイルのオブジェクトとして指定していきます。

これでブラウザの設定によって自動的に言語が選択されるようになりました。