ウェブアプリでローカリゼーション - 読み書きプログラミング

Dashboard ウィジェットをまねて以下のようにしました。

1. localizedStringsを定義したja.jsなどを用意

var localizedStrings = {};
localizedStrings['Example'] = '例';
localizedStrings['Hello!'] = 'こんにちは!';

2. html内でブラウザの言語に応じて上記jsを読み込む。
以下の例ではapp.html?lang=jaというようにURLでも指定可能にしました。

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 id="hello">Hello!</h1>
    <script type="text/javascript">
<!--
var match, lang;
lang = navigator.language.replace(/-.*$/, '');
if (match = window.location.search.match(/lang=([\w-]+)/)) lang = match[1];
document.write('<script src="http://maps.google.com/maps/api/js?sensor=true&language=' + lang + '"></script>');
switch (lang) {
    case 'ja':
        document.write('<script src="localize/' + lang + '.js"></script>');
        break;        
}
-->
    </script>
    <script src="app.js">
</body>
</html>

3. app.js(app.coffee)内でローカライズ

getLocalizedString = (key) ->
    if localizedStrings? then localizedStrings[key] ? key else key

localize = ->
    idWordPairs =
        'hello' : 'Hello!'
    document.title = getLocalizedString 'Maps'
    for key, value of idWordPairs
        document.getElementById(key).innerText = getLocalizedString value

localize()

HTMLとidWordPairsの両方に同じ英単語が並ぶのがちょっと不満です。