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



Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>