現在Monacaで作成したアプリの多言語ローカライズを行おうと、こちらのページの2つ目の方法(i18nextを使った方法)を参考に実装をしております。
サイトの内容通り、
・i18next
・i18next-xhr-backend
・jquery-i18next
の3つをMonaca LocalKitでインストールし、翻訳ファイルであるtranslation.jsonを作成して現在以下のようなファイル構成になっております。
・index.html
・locales/ja/translation.json
・locales/en/translation.json
これで実行すると翻訳文が入るということなのですが、どうにも翻訳文が入ってくれません。
Chromeのコンソールで確認すると以下のエラー文が表示されていました。
Failed to load file:///〜〜〜/www/locales/ja/translation.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(i18nextXHRBackend.js:76)
ちなみに現在、どこに問題があるのか分からないため、読み込まれるJSONファイルをjaのみになるようにしています(JavaScriptコードを参照)。
よろしくお願いいたします。
HTML
1 <!--head--> 2 <script src="components/i18next/i18next.js"></script> 3 <script src="components/i18next-xhr-backend/i18nextXHRBackend.js"></script> 4 <script src="components/jquery-i18next/jquery-i18next.js"></script> 5 6 <!--body--> 7 <div data-i18n="test.header">ここに翻訳文が入る</div>
JavaScript
1var lng = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage); 2if (lng.split('-').length == 2) 3 lng = lng.split('-')[0]; 4i18next.use(i18nextXHRBackend).init({ 5 lng: lng, 6 backend: { 7 loadPath: './locales/ja/translation.json' // ←動作確認のため、一旦読み込むファイルをjaに固定しています 8 } 9}, function(err, t) { 10 jqueryI18next.init(i18next, $); 11 $("[data-i18n]").localize(); 12}); 13
JSON
1<!--日本語のtranslation.json--> 2{ 3 "test": { 4 "header": "ヘッダータイトル" 5 } 6} 7 8<!--英語のtranslation.json--> 9{ 10 "test": { 11 "header": "Header Title" 12 } 13}
あなたの回答
tips
プレビュー