localizer.js - JavaScript で多言語対応を考える
- 2008.02.08 Friday
- dev
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 とサンプルをダウンロード。
スポンサーリンク