以前、JavaScript国際化プログラミング で、jQueryを使った、Javaプロパティファイルによる国際化（文字列切り替え）、および他の国際化ライブラリ（Glob(jquery-global)など）について書きましたが、今回は、jQueryを使わず、Pure Java 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>
<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を参照してください。
３．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の文字列外部化のサンプルで確認できます。
最近のコメント