JavaScript
jQuery
多言語化
i18next
jquery-i18n

[jquery-i18next] JavaScriptで多言語を表示する

JavaScriptで多言語を表示することができるライブラリを紹介します。

i18next

https://www.i18next.com/

i18next-xhr-backend

https://github.com/i18next/i18next-xhr-backend

jquery-i18next

https://github.com/i18next/jquery-i18next

今回使用したJavaScriptライブラリのバージョンは下記の通りです。


JavaScriptライブラリ

Bootstrap: 3.3.7

jQuery: 3.3.1
i18next: 12.0.0
i18next-xhr-backend: 1.5.1
jquery-i18next: 1.2.1


i18next とは

JavaScriptの多言語化フレームワークです。言語毎に定義された文字列を表示します。


i18next-xhr-backend とは

言語毎に文字列を定義したJSONファイルを切り替えることができます。


jquery-i18next とは

HTML属性data-i18nに指定されたキーをもとに言語毎に定義された文字列を表示します。


ライブラリの読み込み

下記のファイルを参照します。

i18next.min.js

jquery-i18next.min.js

i18nextXHRBackend.min.js


index.html

<script type="text/javascript" src="../lib/i18next/i18next.min.js"></script>

<script type="text/javascript" src="../lib/jquery-i18next/jquery-i18next.min.js"></script>
<script type="text/javascript" src="../lib/i18next-xhr-backend/i18nextXHRBackend.min.js"></script>


基本的な使い方

デモはこちら

ソースファイルはこちら

画面に表示する文字列を定義したJSONファイルを言語毎に作成します。

locales/en/string.json(英語)

locales/ja/string.json(日本語)

locales/zh/string.json(中国語)


locales/ja/string.json

{

"label": {
"label1": "作成する",
"label2": "読み込む1<br>読み込む2"
},
"title": {
"title1": "更新する"
},
"placeholder": {
"placeholder1": "削除する"
}
}

i18next.use関数とjqueryI18next.initで初期化します。loadPathに言語毎に指定したJSONファイルと同じパスになるように指定します。$('[data-i18n]').localize()を実行すると、HTML属性HTML属性data-i18nに指定されたキーから文字列が表示されます。

i18next.use(i18nextXHRBackend).init({

backend: {
loadPath: 'locales/{{lng}}/string.json'
},
debug: false,
defaultLng: 'en',
fallbackLng: false,
lng: lang,
}, function (err, t) {
jqueryI18next.init(i18next, $);
$('[data-i18n]').localize();
});


ラベルを表示する


ソースコード上のHTML

<div data-i18n="label.label1"></div>



ブラウザ上のHTML

<div data-i18n="label.label1">作成する</div>



ラベルを表示する(文字列のHTMLを有効にする)


ソースコード上のHTML

<div data-i18n="[html]label.label2"></div>



ブラウザ上のHTML

<div data-i18n="[html]label.label2">読み込む1<br>読み込む2</div>



valueとtitleを表示する


ソースコード上のHTML

<input type="button" data-i18n="[value]title.title1;[title]title.title1">



ブラウザ上のHTML

<input type="button" data-i18n="[value]title.title1;[title]title.title1" value="更新する" title="更新する">



placeholderを表示する


ソースコード上のHTML

<input type="text" data-i18n="[placeholder]placeholder.placeholder1">



ブラウザ上のHTML

<input type="text" data-i18n="[placeholder]placeholder.placeholder1" placeholder="削除する">



オプション(置換文字)

デモはこちら

ソースファイルはこちら

useOptionsAttrオプションを有効にすることで、表示する文字列に置換文字を指定することができます。


locales/ja/string.json

{

"label": {
"label1": "値1={{v1}}, 値2={{v2}}"
}
}

jqueryI18next.initで初期化するときに、useOptionsAttrオプションでtrueを指定します。

i18next.use(i18nextXHRBackend).init({

backend: {
loadPath: 'locales/{{lng}}/string.json'
},
debug: false,
defaultLng: 'en',
fallbackLng: false,
lng: lang,
}, function (err, t) {
jqueryI18next.init(i18next, $, {
useOptionsAttr: true // optionを有効にする
});
$('[data-i18n]').localize();
});


置換文字を表示する


ソースコード上のHTML

<div data-i18n="label.label1" data-i18n-options='{"v1":"aaa","v2":"bbb"}'></div>



ブラウザ上のHTML

<div data-i18n="label.label1" data-i18n-options="{&quot;v1&quot;:&quot;aaa&quot;,&quot;v2&quot;:&quot;bbb&quot;}">値1=aaa, 値2=bbb</div>


以上です。