JavaScript国際化プログラミング - jQueryを使った国際化

JavaScript国際化プログラミング
jQueryを使った国際化

jQieuryのライブラリjquery.i18n.propertiesを使った、Javaプロパティファイル形式でのリソース管理について記述します。

リソースファイル(プロパティファイル)の作成
JSファイルに埋めこまれている文字列をプロパティファイル(.properties)に記述(外部化)します。

プロパティファイルの作成については、Java国際化プログラミング - メッセージをご参照ください。

jQueryライブラリを読み込む

必要なJSファイル(jquery.min.js、jquery.i18n.properties.js)を読み込みます。
以下の二つの方法があります。

A. 元のHTMLのスクリプトタグに埋めこむ (通常の方法)

<head>
...
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.i18n.properties.js" type="text/javascript"></script>
...

B. 各JSから動的に読み込む。

function wwnaviHttpRequest(){
    if(window.ActiveXObject){
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e2){
                return null;
            }
         }
    }else if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }else{
        return null;
    }
}
function wwnaviLoadJs(url){
    htoj = wwnaviHttpRequest();
    htoj.open("GET", url, false);
    htoj.send(null);
    return htoj.responseText;
}

eval(wwnaviLoadJs('wwnaviRs/jquery.min.js'));
eval(wwnaviLoadJs('wwnaviRs/jquery.i18n.properties.js'));

* 必要なJSファイルを同期通信(*1)で読み込み、実行しています。

... (JSのコード)

(*1)非同期通信の場合、読み込みが完了する前にコードが実行されるのでうまく処理されません。

初期化コードの記述
上記の読み込みの直後に、プロパティファイルの場所や名前、対象言語などを設定する処理を記述します。
```
jQuery.i18n.properties({name:'wwnaviBundle(*1)',path:'wwnaviRs(*2)/',mode:'both',
   language:wwnaviGetLang()(*3),callback:function(){}});
```
(*1)プロパティファイルの名前(基底名)です。
(*2)プロパティファイルのパスです。
(*3)対象の言語コード('en'や'ja'など)です。この場合、以下のようなブラウザの言語情報を取得する関数を作成して指定しています。
```
function wwnaviGetLang(){
    return (navigator.userLanguage||navigator.browserLanguage||navigator.language).substr(0,2);
}
```
*ブラウザ設定の値を使いたい場合は、jQuery-Browser-Languageが使えます。
これはリモートホストにアクセスすることで、HTTPリクエストヘッダーを読むことができます。

以下はこのライブラリを使った初期化コード(ブラウザの設定を認識可)です。
```
$.browserLanguage(function( language , acceptHeader ){
    var l  = acceptHeader; l = l.substring(0,2);
    jQuery.i18n.properties({name:'wwnaviBundle',path:'wwnaviRs/',mode:'both',language:l,callback:function(){}});
});
```
※ブラウザの言語情報の取得については、ロケール、書式、タイムゾーンをご参照ください。
メッセージ読み込み処理を記述する。
メッセージ読み込みのコードを文字列の位置に埋めこみます。
```
var msg1 = jQuery.i18n.prop("sample1_1(*1)");
```
(*1)1.で作成したプロパティファイルの対応するキーです。
.propertiesファイルを配置する。
.propertiesファイルを初期化コードで指定したパスに配置します。
ファイル名は以下の規則に従います。
```
基底名(例："wwnaviBundle") + "_" + 言語名(例："ja")
```
基底名だけのファイルはデフォルトのリソースとなり、対応する言語のものがある場合は、そちらが読み込まれます。
以下のように言語分のリソースを追加するだけで、言語を切り替えができるようになります。
```
../wwnaviRs/wwnaviBundle.properties  ... English (default)
../wwnaviRs/wwnaviBundle_ja.properties ... Japanese
../wwnaviRs/wwnaviBundle_ko.properties ... Korean
```

上記はWorld Wide Navi付属のJavaScriptの文字列の外部化サンプルで確認できます。

国際化プログラミングトップへ

JavaScript国際化プログラミングjQueryを使った国際化

JavaScript国際化プログラミング
jQueryを使った国際化