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

i18next v2 での国際化対応

More than 3 years have passed since last update.

i18next v2 での国際化対応

v2 では幾つかの機能がプラグインとして切り出されており、動作確認に手間取ったので動作例をメモとして残しておきます。v1 に関しては HTMLでの国際化(i18nextとl10n.js) の記事が参考になるかと思われます。

動作例

フォルダ構成

├── bower_components
│   ├── i18next
│   ├── i18next-xhr-backend - リソースのロードに利用
│   ├── jquery
│   └── jquery-i18next - jQueryとの連携に利用
├── locales
│   └── en
│       └── translation.json
│   └── ja
│       └── translation.json
└── index.html

環境構築 (bower)

bower install jquery i18next i18next-xhr-backend jquery-i18next

各種ファイル

locales/en/translation.json
{
  "hello": "hello",
  "world": "world"
}
locales/ja/translation.json
{
  "hello": "こんにちは",
  "world": "せかい"
}
index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <div>
    <span data-i18n="hello"></span>
    <span data-i18n="world"></span>
  </div>
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/i18next/i18next.min.js"></script>
  <script src="bower_components/i18next-xhr-backend/i18nextXHRBackend.min.js"></script>
  <script src="bower_components/jquery-i18next/jquery-i18next.min.js"></script>
  <script>
    (function() {
      'use strict';
      i18next.use(i18nextXHRBackend).init({
        lng: 'ja'
      }, function(err, t) {
        jqueryI18next.init(i18next, $);
        $("[data-i18n]").localize();
      });
    }());
  </script>
</body>
</html>

動作確認

ローカルでWebサーバを立ち上げて確認 (XHRでリソースファイルにアクセスさせる)

  1. python -m SimpleHTTPServer
  2. ブラウザで localhost:8000 にアクセスし こんにちは せかい が表示されることを確認
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
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