SimpleBoxes

localizer.js - JavaScript で多言語対応を考える

JavaScript で多言語に対応する手法について少し考えてみます。

できるだけ簡素なインタフェースで、また直感的に扱えるようにした方がいいでしょう。

例えば、

document.write(_('Hello world!'));

のように特殊な関数 _ に文字列を渡して、対応する言語で表示するようなインタフェースにします。

関数名 _ は、標準的な多言語対応ライブラリ gettext に準じました。

var __Localizer = function()
{
  this.strings = {};
  this.getLocalizedString = function(str)
  {
    if (__Localizer.strings[str] && __Localizer.strings[str] != '')
      return __Localizer.strings[str];
    return str;
  };
  return this;
}
__Localizer = new __Localizer();
_ = __Localizer.getLocalizedString;

ここでは __Localizer というグローバルオブジェクトを定義しています。

言語データを定義するには、以下のような __Localizer.strings を定義するスクリプトを読み込みます。

__Localizer.strings = {
  'Hello world!' : 'こんにちわ世界!'
};

HTML 文書のヘッダ部分で

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>samples - localizer</title>
<script type="text/javascript" src="localizer.js"></script>
<script type="text/javascript" src="locale/ja.js"></script>
</head>

のように言語データ (locale/ja.js) を読み込んでもいいのですが、多くの HTML 文書の html 要素には、lang もしくは xml:lang 属性が指定されているかと思います。折角なので、この属性値を対応した言語データを動的に読み込むようにしてみます。

var __Localizer = function()
{
  this.strings = {};
  this.getLocalizedString = function(str)
  {
    if (__Localizer.strings[str] && __Localizer.strings[str] != '')
      return __Localizer.strings[str];
    return str;
  };
  var path = '';
  var jses = document.getElementsByTagName('script');
  for (var i=0,n=jses.length;i<n;i++)
  {
    if (jses[i].src.indexOf('localizer.js') == -1) continue;
    path = jses[i].src.replace('localizer.js','');
    break;
  }
  var html = document.getElementsByTagName('html')[0];
  if (html)
  {
    var lang = html.getAttribute('xml:lang') || html.getAttribute('lang');
    if (!lang) lang = 'en';
    document.write(['\n<','script type="text/javascript" src="',path,'locale/',lang,'.js"></','script>'].join(''));
  }
  return this;
};
__Localizer = new __Localizer();
_ = __Localizer.getLocalizedString;

script 要素の生成には、document.createElement を使った方法もありますが、ブラウザによってうまく動作しない場合もあるため、ここでは document.write を利用しています。

スクリプトは localizer.js という名称になり、言語データは「locale/」というディレクトリに置かれます。

  • localizer.js
  • locale/
    • en.js (英語)
    • ja.js (日本語)

サンプル HTML は以下のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>sample - localizer.js</title>
<script type="text/javascript" src="localizer.js"></script>
</head>
<body>
<p>「Hello world!」をローカライズした文字で表示します。</p>
<p><script type="text/javascript">
<!--
  document.write(_('Hello world!'));
// -->
</script></p>
</body>
</html>

ソースでは「Hello world!」となっていますが、表示言語として日本語 (xml:lang="ja") が指定されているため、翻訳された文字列「こんにちわ世界!」が表示されます。

また、日本語リソースが設定されていない場合は、渡した文字列 (このサンプルの場合「Hello world!」) がそのまま返ってきます。

ちなみに同様の仕組みは Serene Bach 3 でも利用されています。

当スクリプトは MIT ライセンスで配布されます → localizer とサンプルをダウンロード

このエントリーをはてなブックマークに追加

スポンサーリンク

<< PerlMagick のインストールではまる :: Fastladder on Mac OS X 10.4 Tiger >>