hidao’s blog

IT系とか読書ログとか。

JavaScript 1ファイルだけで多言語対応するクラス作った

使い方

まずMultilingualizationクラス内のdictionaries変数に翻訳前の文をキー、翻訳後の文を値にした言語ごとの JSON で辞書を定義します。

次にHTMLファイル内の翻訳したいタグにdata-translate属性を付け、値に翻訳前の文(辞書のキー)を設定しておきます。

フォームロード完了時(window.onloadなど)にMultilingualization.translateAll()を呼ぶと画面内のdata-translate属性の付いているタグ内を翻訳後の文で上書きします。 innerHTMLに上書きしているので、内包するタグはすべて破棄されます。 また、翻訳後の文にHTMLが記述されている場合は解釈され描画されます。

各言語の同一キーしかうまく翻訳されませんので、dictionaries変数の各言語内のキーは同一になるようにしてください。

表示される環境の言語が辞書にない場合の言語のデフォルト値はenです。

A class for simple multilingual support in pure j…