w2uiの多言語ユーティリティを使う

w2uiの多言語対応するための機能

w2uiには、UIをローカライズするための機能「w2utils.locale」があります。

w2ui公式の言語設定ドキュメント

言語設定が記載されているJSONファイルがありますので、これを元に追加＆編集することで対応することが可能です。

GitHub　w2ui言語ファイル

このファイルの中の「ja-jp.json」が日本語ファイルになります。

各オブジェクトを作成する前に、1文記載することで翻訳してくれます。

w2utils.locale('locale/ja-jp.json');

またファイル内の「phrases」に、システム固有の文章を追記することも可能です。

{
    "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」を呼び出します。

var a = w2utils.lang('Japan');

langメソッドの処理自体は、ソースを見ると単純な仕組みです。

function lang (phrase) {
	var translation = this.settings.phrases[phrase];
	if (translation == null) return phrase; else return translation;
}

localeメソッドで指定されたJSONファイルのphrases要素を連想配列として利用し、引数で指定された要素名の値を返しているだけです。

この機能を利用して、サイドバーをメニュー替わりに設定して翻訳する関数のサンプルを作ってみました。

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);
};

使い方は、サイドバーオブジェクトを作成するときに、作成した関数に設定を渡して翻訳しています。

$().w2sidebar(cnvNodeName(サイドバー設定));