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

16641 ワード
HTML i18next JavaScript l10n.js HTML テキストリンク

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>

下記が結果です。

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" : "世界"
    }
}

日本語の例は下記です。

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

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

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

Python基礎文法5
Golangカスタムjsonエクスポートフィールド名