JavaScriptで本格的に多言語対応（i18n）できる超便利なライブラリ

JavaScriptでアプリ開発していたとき・・・

こういう条件で多言語対応（i18n = internationalization）したい場面がありました。

そこまで労力をかけたくない、
サーバー側でアレコレしたくない、
SEO的なことも考えなくていい、
クライアント側で翻訳したい、
でも自動翻訳とか使いたくない

そこでいいライブラリないかなと探していると・・・

Glottologist という良さ気なのを発見！

なんと１つのJSONファイルを用意すれば、多言語化対応ができるらしいです。

使ってみたら超便利だったので、
ここでは Glottologist でJavaScriptから多言語化するやり方をまとめました。

このページの目次

手順１．まずは glottologist.js を読み込み
手順２．多言語化するテキスト要素に glot-model クラス付与
手順３．翻訳用ファイル（JSON）を用意する
手順４．翻訳ファイルを読み込み多言語化コード実行
補足．ちなみにローカルから翻訳JSONを読み込むには
蛇足．多言語化（i18n）する別の方法
ここまでのまとめ

手順１．まずは glottologist.js を読み込み

このライブラリは次のGitHubページからダウンロードできます。

▼ arguiot/Glottologist

GitHub

arguiot/Glottologist

https://github.com/arguiot/Glottologist

An easy to use translate library. Contribute to arguiot/Glottologist development by creating an account on GitHub.

必要なのは glottologist.min.js だけな模様

▼ CDN読み込みなら次のscriptタグを書けばOK

<!-- Glottologist読み込み -->
<script src="https://unpkg.com/glottologist"></script>

1 2	<!-- Glottologist読み込み --> <script src="https://unpkg.com/glottologist"></script>

ちなみにページロード時に即翻訳なら head タグ内で読み込みがベストです。

逆に多言語化（i18n）を重視しないなら body タグ最後でもOKです。

手順２．多言語化するテキスト要素に glot-model クラス付与

お次はHTML側での設定。

翻訳テキストに glot-model 属性を付与していきます。

例えばリスト要素を作り、その中のテキストを翻訳したいなら・・・

各要素への glot-model 属性の付け方はこんな感じですね。

▼ リスト要素のHTML例

<ul>
  <li><span glot-model="label_eclair">
    ECLAIR
  </span></li>
  <li><span glot-model="label_kitkat">
    KITKAT
  </span></li>
  <li><span glot-model="label_oreo">
    OREO
  </span></li>
</ul>

<ul>

<li>

ECLAIR

</li>

<li>

KITKAT

</li>

<li>

OREO

</li>

</ul>

このようにテキスト要素を span とかで囲み、 glot-model に翻訳識別子を指定するだけ

ちなみに用途ごとに接頭辞をつけると分かりやすいかもしれません。

▼ 翻訳識別子前につける接頭辞例

ラベル（テキスト全般）　：　 label_
ボタン　：　 btn_
プレースホルダー　：　 hint_
テキスト入力欄　：　 input_

名前の付け方はいろいろ工夫すればいいと思います。

手順３．翻訳用ファイル（JSON）を用意する

次に翻訳ファイルの用意

１つのJSONファイルを作るだけで英語・日本語などに複数対応できます。

その作り方は次のような感じ

たとえば作成ファイル名を glot-data.json としましょう。

その場合、 glot-model 属性に対応する以下のJSONを作成していきます。

▼ 実際に作成した JSONファイルの内容

{
  "label_eclair": {
    "en": "Eclair",
    "ja": "エクレア"
  },
  "label_kitkat": {
    "en": "KitKat",
    "ja": "キットカット"
  },
  "label_oreo": {
    "en": "Oreo",
    "ja": "オレオ"
  }
}

{

"label_eclair": {

"en": "Eclair",

"ja": "エクレア"

"label_kitkat": {

"en": "KitKat",

"ja": "キットカット"

"label_oreo": {

"en": "Oreo",

"ja": "オレオ"

}

HTMLで glot-model 属性の値を持つキーを作り、そのなかに "en" とか "ja" みたいな各言語ごとの翻訳テキストを定義していけばいいだけです。

手順４．翻訳ファイルを読み込み多言語化コード実行

あとは今用意したJSONを読み込み、翻訳を実行するだけです。

Glottologistオブジェを作成
JSONファイルを import メソッドから読み込み
読み込み後に render メソッドで翻訳実行

実際に試してみたコードはコチラ！

window.addEventListener('DOMContentLoaded', function(){
  var glot = new Glottologist();
  glot.import("data.json").then(() => {
    glot.render();
  });
});

window.addEventListener('DOMContentLoaded', function(){

var glot = new Glottologist();

glot.import("data.json").then(() => {

glot.render();

});

そして実際のページを開いて見ると・・・

見事に多言語化されてました！

たった１つのJSONで多言語化できるのは便利ですね。

補足．ちなみにローカルから翻訳JSONを読み込むには

ただしこのライブラリ、１つ問題があります。

それは Glottologist#import からローカルファイルが読み込めないこと

実際にローカルからJSON読み込みすると、次のエラーが出てしまうんです。

glottologist.min.js:1 Fetch API cannot load file:///C:/example/html/glot-dict.json.js. URL scheme must be "http" or "https" for CORS request.

1	glottologist.min.js:1 Fetch API cannot load file:///C:/example/html/glot-dict.json.js. URL scheme must be "http" or "https" for CORS request.

CROSポリシー違反でこういうエラーが出る模様・・・

この解決策は script を動的に読み込むテクニックを使うことですね。

▼ ちょうどこの記事で解説したやつ

PisukeCode - Web開発まとめ

jQueryで外部JSファイルを動的に読み込む方法とコード例

https://pisuke-code.com/jquery-load-outer-js-dynamically

外部JSファイルを読み込む場合、head内などで読み込むのが普通だと思います。しかし場合によってはJSコード内で動的に読み込みしたい場合もあるはずそこでjQuery（またはJavaScript）で外部JSを動的に読み込む方法についてまとめました。外部JSを読み込みさせる（jQueryの場合）jQueryで外部JSを読み込みさせる方法はそれほど難しくありません。外部JSファイルを読み込みするscriptタグを作り、bodyタグに追加するだけです。その具体的なコード例は次の通りまず次のような内容の outer.js というファイルがあるとしましょう。$(...

実際にこのテクニック＋一工夫すれば、ローカルJSONでも読み込みできます。

そのやり方は次の通り

１．まず JS としてJSONを定義

▼ glot-dict.json.js として作成

const GLOT_DICT_JSON = {
  "label_eclair": {
    "en": "Eclair",
    "ja": "エクレア"
  },
  "label_kitkat": {
    "en": "KitKat",
    "ja": "キットカット"
  },
  "label_oreo": {
    "en": "Oreo",
    "ja": "オレオ"
  }
}

const GLOT_DICT_JSON = {

"label_eclair": {

"en": "Eclair",

"ja": "エクレア"

"label_kitkat": {

"en": "KitKat",

"ja": "キットカット"

"label_oreo": {

"en": "Oreo",

"ja": "オレオ"

}

２．scriptを動的に読み込んで翻訳

▼ こんなコード

var glot = new Glottologist();
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file:///C:/example/html/glot-dict.json.js";
script.onload = function(){
  Object.keys(GLOT_DICT).forEach(function(key, idx){
    glot.assign(key, this[key]);
  }, GLOT_DICT);
  glot.render();
};
document.body.appendChild(script);