Help us understand the problem. What is going on with this article?

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

More than 5 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属性で言語を指定してあげます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした