ランディングページのようなちょっとした静的ページをローカライズしたい時があると思います。
そんな時に便利なi18nextを導入してみて便利だったので共有します。

i18nextって？

https://www.i18next.com/
Javascriptで書かれた国際化のためのフレームワークです。
プラグインが豊富で色々なフレームワークや環境で利用できるのがうれしいです。

使い方

今回はフロントだけでページを国際化対応される例で使い方を説明します。

ダウンロード

bowerでダウンロードできます

bower install -D i18next
bower install -D i18next-browser-languagedetector

i18next-browser-languagedetectorはブラウザの言語設定をいい感じに取得してくれるプラグインです。
豊富なプラグインの一覧はこちらをご確認ください。

html

次のようにresourcesで多言語化のためのリソースを設定してi18nextを初期化します。
初期化後はi18next.t関数で指定したキーによって、ローカライズされた値を取得することができます。
これはページ表示後にHello Worldをアラート表示するサンプルです。
日本語設定のブラウザで開けばこんにちは、世界と表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="bower_components/i18next/i18next.js"></script>
  <script src="bower_components/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script>
</head>
<body>

<script>
  // i18next初期化
  i18next
    .use(i18nextBrowserLanguageDetector) // ブラウザの言語設定をいい感じに解析して適切な言語を適用してくれる
    .init({
      fallbackLng: 'en',
      debug: true,
      resources: {
        en: {
          translation: {
            key: 'Hello World'
          }
        },
        ja: {
          translation: {
            key: 'こんにちは、世界'
          }
        }
      }
    });
  alert(i18next.t('key'));
</script>
</body>
</html>

属性にキーを指定する使い方

i18next.t関数で翻訳後のリソースを取得できるのは良いですが、全てのHTMLタグをJavascriptで取得したくは無いですよね。
jquery-i18nextプラグインを使えはdata-i18next属性にキーを指定できるので、要素ごとにJavascriptを書くことなく一括で多言語化することができます。

追加インストール

jqueryとjquery-i18nextパッケージをインストールします。

bower install -D jquery
bower install -D jquery-i18next

html

次で示すコードのように、ある要素以下を全て多言語化することができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="bower_components/i18next/i18next.js"></script>
  <script src="bower_components/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script>
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/jquery-i18next/jquery-i18next.js"></script>
</head>
<body>
<div id="container">
  <p data-i18n="hoge"></p><!-- 言語設定に応じたテキストが設定される -->
  <p data-i18n="piyo"></p><!-- 言語設定に応じたテキストが設定される -->
</div>

<script>
  // i18next初期化
  i18next
    .use(i18nextBrowserLanguageDetector) // ブラウザの言語設定をいい感じに解析して適切な言語を適用してくれる
    .init({
      fallbackLng: 'en',
      debug: true,
      resources: {
        en: {
          translation: {
            hoge: 'Hoge',
            piyo: 'Piyo'
          }
        },
        ja: {
          translation: {
            hoge: 'ほげ',
            piyo: 'ぴよ'
          }
        }
      }
    });
  $(function () {
    // jqueryI18next初期化
    jqueryI18next.init(i18next, $);
    $('#container').localize();
  });
</script>
</body>
</html>

$('#container').localize(); でcontainerをidにもつdivタグ以下の全ての要素を多言語化しているのがわかります。

まとめ

フロントだけで多言語化対応できるのはよいですね。
導入もとても簡単なので色々な場面で使えそうです。

また一つ武器を手に入れた感

i18nextを使ってフロントエンドでお手軽ローカライズ

i18nextって？

使い方

ダウンロード

html

属性にキーを指定する使い方

追加インストール

html

まとめ