2012年3月
« 1月   4月 »
 1234
567891011
12131415161718
19202122232425
262728293031  

カテゴリー

最近のコメント

    <!–:ja–>JSONによるJavaScriptの国際化(文字列切り替え)<!–:–><!–:en–>JavaScript Internationalization with JSON<!–:–>

    以前、JavaScript国際化プログラミング で、jQueryを使った、Javaプロパティファイルによる国際化(文字列切り替え)、および他の国際化ライブラリ(Glob(jquery-global)など)について書きましたが、今回は、jQueryを使わず、Pure Java JSONによる文字列切り替えについて書こうと思います。

    オリジナルコンテンツは、ソフトウェア国際化ツールWorld Wide Navi付属の、国際化プログラミングの章になりますので、そちらも参照してください。

    1.リソースファイルの作成

    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を解析できません。

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

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

    HTMLヘッダー

    <head>
    ...
    <script src="wwnaviRs/wwnaviJs.json.js"
     type="text/javascript">
    </script>
    <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
    src="http://ajaxhttpheaders2.appspot.com/
    ?callback=wwnParseLang"
    type="text/javascript"></script>"
    );

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

    3.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の文字列外部化のサンプルで確認できます。



    You must be logged in to post a comment.