jQueryでローカライズ(多言語化)対応する方法(globalize編)

jquery

jspやPHPでは馴染み深いローカライズ(多言語化)ですが、jQuery、JavaScriptでは、まだまだ浸透していないように感じます。

jQuery、JavaScriptでもローカライズ(多言語化)は出来ます。
今回は、jQueryのローカライズ(多言語化)プラグイン、globalize.jsを使った言語の切り替え方を紹介します。

[スポンサーリンク]

ローカライズ(多言語化)とは、ユーザが使用している環境(ロケール)によって、日本語か英語を切り分けて表示することを指しています。

この章でやること

globalize.jsを使って、ローカライズ(多言語化)対応します。

globalize.jsを取得する

まずは、こちらのサイト(GitHub)からglobalize.jsを取得します。
ZIPボタンでzipファイルがダウンロードできます。
globalize-localize2

globalize.jsを使用してローカライズ(多言語化)する

globalize.jsを使ったサンプルソースです。

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>globalize.jsのサンプル</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="./js/globalize.js"></script>
<script src="./js/cultures/globalize.culture.ja.js"></script>


<!-- スクリプト部分 -->
<script type="text/javascript">
$(document).ready(function() {

    // ここでja,enを指定します。
    // 本来であれば、Cookie等からロケールを取得して設定します。
    Globalize.culture("ja");

    Globalize.addCultureInfo( "ja", {
            messages: {
                        "test": "これはテストです。"
                      }
    });

    Globalize.addCultureInfo( "en", {
        messages: {
                    "test": "This is test!"
                  }
    });
});
</script>
</head>

<!-- HTML部分 -->
<body bgcolor="#e2e2e2">

<input type="button" onClick="alert(Globalize.localize('test', Globalize.culture()))" value="click!"/>

</body>
</html>

解説

19行目で、ロケールを指定しています。
39行目のGlobalize.localizeで、「test」に紐づくメッセージを取得しています。
ロケールは、Globalize.culture()で取得しています。サンプルソースではjaになります。

デモ

実際に動かすことが出来ます

さいごに

JavaScript、jQueryでローカライズ(多言語化)対応と聞くと、以前ならめんどくさそうといった印象もありました。
globalize.jsを使うことで、大分簡単に出来るようになります。
最近では、サーバサイドだけではなく、JavaScript、jQueryのクライアントサイドでローカライズすることも珍しいことではなくなりました。
ローカライズライブラリを積極的に使っていきましょう!

globalize.jsは、メッセージのローカライズ(多言語化)だけではなく、数字やカレンダーの表記もローカライズしてくれます。
このあたりはまた別の機会に!
それでは!