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

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

この章では、JSONを使ったリソース管理をWorld Wide Naviのサンプルを交えて説明します。

リソースファイルの作成

JSファイル内の埋めこみ文字列をJSONファイルに外部化します。

sample_1.js

var msg1 = 'msg1:';  
->var msg1 = wwnRs.sample1_1(*1); 
function msgA() {
    alert(msg1 + "Hello, this is a sample1 text."); 
    ->alert(msg1 + wwnRs.sample1_2(*1));    
}

../wwnaviRs/wwnaviBundle.json

{
'sample1_1' : 'msg1:',(*2)
'sample1_2' : 'Hello, this is a sample1 text.'(*2)
}

*1) wwn.sample1_1 = JSON変数.JSONキー
*2) 'sample1_1' : 'msg1' = 'JSONキー' : 'JSON値'
   最後の","は削除する必要があります。削除しない場合、IEは正しくJSONを解析できません。

JSONのロード処理を他のJSファイルに作成

文字列をJSONに外部化した後、それらをユーザーロケール(ブラウザの言語設定)に適した形で、上記の変数にロードする処理を書く必要があります。処理は、はじめに呼ばれる1つのJSファイル(この章では'wwnaviJs.json.js'と呼びます)にまとめて、HTMLヘッダーで読み込むことがのぞましいです。

HTMLヘッダー

<head>
...
<script src="wwnaviRs/wwnaviJs.json.js" type="text/javascript"></script> (*1)
<script src="sample_1.js" type="text/javascript"></script>
...

wwnaviJs.json.js (初期化コード)

// 通常のAjax HTTPリクエスト関数
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;
    }
}

// 「同期」処理でのAjaxによるファイル読み込み関数
// 通常のAjax通信は「非同期」ですが、それではファイル読み込みが完了するまで待機できないので、 
// 「同期」方法を採用しています。
function wwnaviLoadJs(url){
    htoj = wwnaviHttpRequest();
    htoj.open("GET", url, false);
    htoj.send(null);
    return htoj.responseText;
}

// JSON変数(「wwnRs」は、sample_1.jsと同じである必要あり)の初期化
var wwnRs = eval('({"_rslang":""})');

// HTTPサーバーアクセスを通じてユーザーロケールを取得するためのコールバック関数 (JSONP) (最後の行参照)
function wwnParseLang(json) {

    // 言語と国コード(例：en-us)を取得するためのHTTPヘッダー
    var l = ''; if(json['Accept-Language'] != undefined) l = json['Accept-Language'];
    if(l.indexOf(',') >=0) l = l.substring(0, l.indexOf(','));

    // マスターのJSONリソース(ロケールなしのもの)を、JSON変数へ読み込む (同期Ajax).
    wwnRs = eval("(" + wwnaviLoadJs('wwnaviRs/wwnaviBundle.json') + ")"); 
    wwnRs._rslang='default'; 

    try {
        // ユーザーロケール(変数'l')のJSONリソースを、JSON変数に読み込む (同期Ajax).
        wwnRs = eval("(" + wwnaviLoadJs('wwnaviRs/' + l+ '/wwnaviBundle.json') + ")");
        wwnRs._rslang=l; // 使用されたリソースのロケールコードを設定
    }catch(e){
        // エラー(ユーザーロケールのリソースが見つからない)場合、マスターを使用
    }

    wwnRs._ulang=l; // 検出したユーザーロケールを設定

}

// ユーザーロケールを取得するために、jQuery browser languageライブラリ(*)のJSONP APIを使用していますが、 
// 他のものを使うことも可能です。
document.write(
'<script type="text/javascript" src="http://ajaxhttpheaders2.appspot.com/?callback=wwnParseLang"></script>'
);

*)jQuery browser languageライブラリについては、GitHubを参照してください。

JSONファイルの配置
マスターJSONファイル(ステップ1の'wwnaviRs/wwnaviBundle.json')と翻訳(ローカライズ)されたファイルを、上記の初期化コードに従い、ロケールのディレクトリに配置します。
```
ローカライズされたリソース = wwnaviRs(リソースパス)/ユーザーロケール/wwnaviBundle(リソース名).json
```
ローカライズされたリソースを追加するだけで、JavaAScriptメッセージをユーザーの言語設定に基づいて切り替えられます。
```
../wwnaviRs/wwnaviBundle.json  ... 英語 (デフォルト)
../wwnaviRs/ja/wwnaviBundle.json ... 日本語
../wwnaviRs/ko/wwnaviBundle.json ... 韓国語
```

これらの処理は、World Wide Navi内のJavaScriptの文字列外部化のサンプルで確認できます。

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

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

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