JavaScriptはブラウザによって実行されるクライアント向けスクリプト言語ですが、その国際化の標準的な仕様はありません。
ここでは、一般的なポイント、および主要なライブラリを使った国際化について説明します。
※jQueyを使わないJSONを使った国際化については、こちらを参照してください。
ロケール、書式、タイムゾーン
JavaScriptの一般的なプログラミングでの国際化のポイントを以下に挙げます。
.NET AjaxライブラリやjQuery、その他固有のライブラリの情報については各情報リソースを参照ください。
- ユーザーロケール(言語と地域)の判定
ユーザーの使用する言語や住んでいる地域によって、書式やメッセージを切り替えたい場合、そのユーザーのロケール(言語と地域の情報)を取得する必要があります。
JavaやPHPといった通常のプログラミング言語には、これらの情報を取得する関数がありますが、JavaScriptにはこれらと等価のものはありません。
一般的なJavaScriptのプログラミングでは、ユーザーの使用するブラウザの言語情報から言語を取得します。
例えば、ユーザーの使っているFirefoxが日本版か英語版かということです。
この情報は、殆どのブラウザにおいて、設定画面で変えられる言語設定の情報ではないことに注意が必要です。
以下は、ブラウザの言語情報から言語コードを切り出す簡単なコードです。function wwnaviGetLang(){
return (navigator.userLanguage||navigator.browserLanguage||navigator.language).substr(0,2);
}このコードは、日本語版ブラウザを使っているユーザーの言語は日本語ということを意味します。
OSの言語設定や、サーバーにアクセスする時のHTTPリクエストに入れられる言語情報などは、反映されないことに注意が必要です。地域については、上記のコードの2文字目以降にセットされている場合もありますが、保障はありません。
なお、後述のUTCとの時差によって代表的なものを取得することはできますが、これも正確な判定ではありません。*ブラウザの言語設定を反映させたい場合には、jQuery-Browser-Languageという、リモートホストにアクセスし、HTTPリクエストの言語を抽出する(ブラウザの言語設定を認識する)jQueryライブラリがあります。
- 日付、通貨などの書式
JavaやPHPといった主要なプログラミング言語には、ロケールに沿った書式変換をする関数、クラスがありますが、JavaScriptにはそういった関数はありません。
もし、ユーザーの言語情報などによって書式を切り替えたい場合は、そういった処理を作りこむ必要があります。
これらを全言語分作成するのは大変ですが、.NET AjaxやjQueryなどのライブラリにはそういった汎用ライブラリが用意されています。(※jQueryには、日付、通貨などの多言語用ライブラリとしてGlobがあります。)
例えば、日付や通貨を書式変換して表示している個所は、固定の書式が使われていないか確認し、切り替えの必要がある場合は、上記のようなライブラリを使うことをお勧めします。
- ユーザーのタイムゾーンを取得する
JavaScriptには、タイムゾーンを取得する関数はありませんが、UTC(世界標準時間)とクライアントPCの時計の時差を求める関数があります。
これにより、サーバーの共通時間を各クライアントPCの時間に変換するといった処理ができます。また、UTCとの時差から、代表的なユーザーの地域を特定することができます。
以下は、UTC(世界標準時間)とクライアントPCの時計の時差を時間単位で求めるコードです。function getTzOff() {
var date = new Date();
return tzoff = ( date.getHours() – date.getUTCHours() 24 ) % 24;
}この情報に、下記のような時差と地域の対応表を合わせることで、javaScriptからユーザーの代表的な地域を予想することができます。
0=GB
1=IT
2=FI
3=RU
4=AE
5=PK
6=BD
7=ID
8=PH
9=JP
10=AU
11=NC
12=NZ
13=TO
14=TO
15=US
16=US
17=US
18=US
19=US
20=CL
21=BR
22=BR
23=GL(上記の国コードをタイムゾーンのIDに変えれば、
サーバー側でユーザーの代表的なタイムゾーンも予測できます)
*同じ時差に対応する地域がいくつもあることに注意が必要です。
実際には、ユーザーが自分の地域を後で設定できるようにする必要があります。
以下はそのライブラリを使ったサンプルコードです。
$.browserLanguage(function( language , acceptHeader ){
var l = acceptHeader; l = l.substring(0,2);
alert(l); // これはHTTPリクエストヘッダーを解析し、
// “en”, “ja”…といったブラウザ言語設定と同じ値を返します。
});
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>
…* 呼出し元のHTML全てに埋めこむ必要あり。
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)非同期通信の場合、読み込みが完了する前にコードが実行されるのでうまく処理されません。
* 各JSファイルのコード量が増えますが、呼出し元のHTMLを修正する必要がありません。wwnaviでは自動化を実現するため、デフォルトではこの方法をとっています。
- 初期化コードの記述
上記の読み込みの直後に、プロパティファイルの場所や名前、対象言語などを設定する処理を記述します。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の文字列の外部化サンプルで確認できます。
gettextを使った国際化
JavaScriptのgettext、サンプルなどはこちらから入手できます。
C言語版gettextについてはgettext によるメッセージ処理をご参照ください。
.NET Ajaxライブラリを使った国際化
.NET Ajaxライブラリについてはをご参照ください。
※オリジナルソース：
ソフトウェア国際化ツール World Wide Navi JavaScript国際化プログラミング
最近のコメント