HTML
JavaScript
l10n.js
i18next

HTMLでの国際化(i18nextとl10n.js)

More than 3 years have passed since last update.

cordovaで作ったアプリといった、

サーバーサイドは使わずにフロントエンドだけで国際化を行う必要があるときに、使えそうなライブラリをまとめます。

今回はi18nextとl10n.jsを調べました。

どちらも JSONで言語ごとの文言を書いておき、言語設定にあわせた文言を使用することになります。


i18next

i18nextはjavascriptで様々な言語に対応できるライブラリです。

browserだけでなくnode.jsでもつかえます。

詳細は下記にあります。

http://i18next.com/


インストール

npm を使ってもインストールできますが、とりあえずbowerで

$ bower install i18next


サンプルプログラム

下記にサンプルを示します。

htmlファイルの他に、各言語に対応したjsonファイルを用意します。

jsonから、各言語での表現を引っ張ることが可能です。

jsonファイルは、locales/XXX/translation.json となります。


locales/en/translation.json

{

"member" : {
"red" : "kanako",
"pink" : "ayaka",
"yellow" : "shiori",
"green" : "momoka",
"purple" : "reni"
}
}


locales/ja/translation.json

{

"member" : {
"red" : "夏菜子",
"pink" : "彩夏",
"yellow" : "詩織",
"green" : "杏果",
"purple" : "れに"
}
}

下記がサンプルのHTMLです。

t(xxx.xxx) という形でデータをとってきます。


index.html

<!DOCTYPE html>

<html>
<head>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/i18next/i18next.js"></script>
<script>
i18n.init(function(t) {
$("#red").text(t("member.red"));
$("#pink").text(t("member.pink"));
$("#yellow").text(t("member.yellow"));
$("#green").text(t("member.green"));
$("#purple").text(t("member.purple"));
});
</script>
</head>
<body>
<div>
<ul>
<li id="red"></li>
<li id="pink"></li>
<li id="yellow"></li>
<li id="green"></li>
<li id="purple"></li>
</ul>
</div>
</body>
</html>


下記が結果です。

i18next1.png


jQueryと組み合わせて

jQueryをつかうと、i18n() メソッドと data-i18n属性を使うことで、簡単にHTMLに反映できます。

以下のようにすれば上記と同様の結果が得られます。


index.html

<!DOCTYPE html>

<html>
<head>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/i18next/i18next.js"></script>
<script>
i18n.init(function(t) {
$("#list").i18n();
});
</script>
</head>
<body>
<div>
<ul id="list">
<li data-i18n="member.red"></li>
<li data-i18n="member.pink"></li>
<li data-i18n="member.yellow"></li>
<li data-i18n="member.green"></li>
<li data-i18n="member.purple"></li>
</ul>
</div>
</body>
</html>


l10n.js

l10n.jsもJavaScriptで多言語対応するためのライブラリです。

ソースは以下にあります。

https://github.com/eligrey/l10n.js/


インストール

bowerを使ってインストールできます。

$ bower install l10n


サンプルプログラム

jsonファイルを要素で指定してそれを使います。

jsonの"%title"だったら、"%title".toLocaleString() で各言語に対応した文言をJSONから取得できます。

下記のサンプルはvue.jsを使っています。


index.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<link rel="localizations" href="localization.json" type="application/x-l10n+json">
<script type="text/javascript" src="bower_components/l10n/l10n.js"></script>
<script type="text/javascript" src="bower_components/vue/dist/vue.min.js"></script>
<script>
function l(string) {
return string.toLocaleString();
}
window.onload = function() {
var demo = new Vue({
el: '#demo',
data : {
content1: l("%title"),
content2: l("%world"),
}
});
}
</script>
</head>
<body>
<ul id="demo">
<li>{{content1}}</li>
<li>{{content2}}</li>
</ul>
</body>
</html>


localization.json

{

"en" : {
"%title" : "hello",
"%world" : "world"
},
"ja" : {
"%title" : "こんにちは",
"%world" : "世界"
}
}

日本語の例は下記です。

l10n.png

また、jsonファイルを各言語ごとによういできます。

そのときは、

 <link rel="localization" hreflang="ja" href="japanese.json" type="application/x-l10n+json">

のようにhreflang属性で言語を指定してあげます。