でぃべろっぱーず・さいど

ぼんやりとJavaScriptでの多言語対応について。

実装方法は色々あって、メリット・デメリットがそれぞれあるので、思いつくままにさらさら書きます。

基本方針

メッセージ系は、定数としてオブジェクトにまとめておきます。

var messages = {};
message.loading = 'ロード中';
message.error = 'エラーが発生しました。';

小文字だと分かりづらかったら、大文字にしておくというのも手。

var M = {};
M.LOADING = 'ロード中';
M.ERROR = 'エラーが発生しました。';

で、使うときに、

alert(messages.error);

こんな感じで使います。

で、この messages オブジェクトに、どうやってそのときの言語を設定するのかという話。

1.サーバ側（動的に生成されるページのロジック）でメッセージを管理

サーバ側で、DBや或いは設定ファイル（Railsならymlとかかな）に、多言語の情報を保持しておきます。
ページを表示したときに、ページ中のscriptタグで messages オブジェクトを作ってやります。

<script>
  var messages = {};
  message.loading = 'ロード中';
  message.error = 'エラーが発生しました。';
</script>

英語だったら、

<script>
  var messages = {};
  message.loading = 'now loading';
  message.error = 'error was occuerd';
</script>

こんな感じで。そのときの言語を判断するのは、サーバ側で保持しているユーザ情報の言語設定とか、或いはGETパラメータで渡された値とか。

或いは、上記メッセージが書いてある言語別語とのjsファイルを用意しておいて、動的に読み込み先を変えるという手もあります。
↓フォルダ毎に管理しておくとか。

<script type="text/javascript" src="/messages/ja/message.js" />

↓ファイル名で管理するとか。

<script type="text/javascript" src="/messages/ja.js" />

2.JavaScript でメッセージを管理

メッセージオブジェクトに一つ階層を持たせて、

var messages = {};
messages.ja = {};
messages.en = {};

それぞれの言語のところにメッセージを詰め込んでいくと。
で、使うときに、

var useMessages = messages['ja'];

こんな感じで使ってみるとか。

fastladderのjs を見てたら、↓こういう分岐でメッセージをセットし分けてた。

if(typeof Language != "undefined" && Language == 'English'){
}else{
}

script.aculo.us のロードと同じように、GETパラメータでjsに値を渡してやったりとか。

<script type="text/javascript" src="hoge.js?lang=ja" />

みたいな感じで読み込むようにして、

hoge.js のソース中で、

var LANGUAGE = 'en';//デフォルト設定
var s = document.getElementsByTagName('script');
for(var i =0,len = s.length;i<len;i++){
  if(s[i].src.indexOf('hoge.js?') > 0){
    var tmp = s[i].src.splite(?)[1].splite('&');
    for(var j = 0,leng = tmp.length;j<leng;j++){
      var tmp2 = tmp[j].splite('=');
      if(tmp2.length == 2 && tmp2[0] == 'lang') LANGUAGE = tmp2[1];
    }
  }
}
var useMessages = messages[LANGUAGE];

こんな感じで取り出してやります。

「続・Gmail ショートカットの Cheat Sheet を表示する bookmarklet を作ったよ 」で作ったbookmarkletは、この方法で、英語と日本語のメッセージを出し分けてます。
bookmarkletを多言語対応させたいときとか、多言語分jsファイルを作るよりも、この方法が良いかも。

或いは、上記方法で取得したGETパラメータのlang の値を使って、

var s = document.createElement('script');
s.type = 'text/javascript';
s.charset = 'UTF-8';
s.src = '/messages/'+LANGUAGE + '.js';

とかやって、メッセージのファイルを動的に読み込んでも良いんじゃないかな。
1.の最後に書いている方法を、javascriptでやる方法ですね。
この場合、メッセージのファイルがロードされるまで、そこにアクセスしようとするとエラーになっちゃうから、ちょっと工夫が必要ですが。

こうやって多言語対応を意識して作っておくと、メッセージがソース中に散らばっちゃうこともなく、文言修正とかのメンテナンスも楽になります。