この記事は最新更新日から、4年以上経過しています。
w2uiの多言語対応するための機能
w2uiには、UIをローカライズするための機能「w2utils.locale」があります。
言語設定が記載されているJSONファイルがありますので、これを元に追加＆編集することで対応することが可能です。
このファイルの中の「ja-jp.json」が日本語ファイルになります。
各オブジェクトを作成する前に、1文記載することで翻訳してくれます。
|
1 |
w2utils.locale('locale/ja-jp.json'); |
またファイル内の「phrases」に、システム固有の文章を追記することも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "locale" : "ja-JP", "dateFormat" : "yyyy/mm/dd", "timeFormat" : "h24", "currency" : "^[\\$]?[-+]?[0-9]*[\\.]?[0-9]+$", "currencyPrefix" : "¥", "currencySuffix" : "", "currencyPrecision": 0, "groupSymbol" : ",", "float" : "^[-]?[0-9]*[\\.]?[0-9]+$", "shortmonths" : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], "fullmonths" : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], "shortdays" : ["月", "火", "水", "木", "金", "土", "日"], "fulldays" : ["月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日", "日曜日"], "phrases" : { ■ここに追記することも可能■ "Japan":"日本" } } |
上記の「Japan」を「日本」にしたい場合は、「w2utils.lang」を呼び出します。
|
1 |
var a = w2utils.lang('Japan'); |
langメソッドの処理自体は、ソースを見ると単純な仕組みです。
|
1 2 3 4 |
function lang (phrase) { var translation = this.settings.phrases[phrase]; if (translation == null) return phrase; else return translation; } |
localeメソッドで指定されたJSONファイルのphrases要素を連想配列として利用し、引数で指定された要素名の値を返しているだけです。
この機能を利用して、サイドバーをメニュー替わりに設定して翻訳する関数のサンプルを作ってみました。
|
1 2 3 4 5 6 7 8 9 10 |
var cnvNodeName = function(data){ var tmp= JSON.parse(JSON.stringify(data), function(key, value){ if(key == 'text') { value = w2utils.lang(value); } return value; }); return $.extend(data, tmp); }; |
使い方は、サイドバーオブジェクトを作成するときに、作成した関数に設定を渡して翻訳しています。
|
1 |
$().w2sidebar(cnvNodeName(サイドバー設定)); |