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

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

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

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

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

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

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

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

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

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

▼ arguiot/Glottologist

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

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

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

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

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

お次はHTML側での設定。

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

 

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

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

▼ リスト要素のHTML例

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

 

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

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

  • ラベル(テキスト全般) :  label_
  • ボタン :  btn_
  • プレースホルダー :  hint_
  • テキスト入力欄 :  input_

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

手順3.翻訳用ファイル(JSON)を用意する

次に翻訳ファイルの用意

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

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

 

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

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

そのやり方は次の通り

 

1.まず JS としてJSONを定義

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

2.scriptを動的に読み込んで翻訳

▼ こんなコード

もしローカルファイルから 翻訳したい場合は、このコードを試してみてください。

蛇足.多言語化(i18n)する別の方法

最後に蛇足。

多言語化(i18n)するなら、次みたいな方法 もあります。

▼PHP+gettext による多言語化(i18n)マニュアル

▼ JavaScriptからGoogle翻訳を使えるAPI

サーバー側で多言語化するなら PHP + gettext が確実ですね。(面倒だけど・・・)

ここまでのまとめ

以上、JavaScriptで本格的に多言語化対応するやり方でした。

ただし、この方法は次の目的なら使うのはNGです。

  • 日本以外でもSEO集客がしたい
  • 検索流入をもっと増やしたい

SEO的な事情があるなら、PHP+gettext のやり方 をオススメします。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください