Globalizeを使ってメッセージのローカライズを行う

Globalizeとsprintfを使って、UIのメッセージやValidateメッセージのローカライズに対応します。
Globalizeはメッセージのローカライズを、sprintfはプレースホルダとして使用します。

Install

Globalizeは下記のリンクからcheckoutして必要なファイルをコピーします。
https://github.com/jquery/globalize/

sprintfは下記のリンクからダウンロードします。
http://sprintf.googlecode.com/files/sprintf-0.7-beta1.js

globalize.cultures.jsのサイズが大きいので、culturesの下にある必要な言語のみ残して、minifyすることをお勧めします。

<script src="lib/sprintf.js"></script>
<script src="lib/globalize.js"></script>
<script src="lib/cultures/globalize.cultures.js"></script>
<script src="src/msg.js"></script>

ローカライズメッセージの作成

UI用メッセージやValidateエラー時に出力するメッセージ、エラーメッセージなどを記述します。
普通は言語ごとに作成した方がよいでしょう。

src/msg.js

(function(global) {
var Globalize;
Globalize = global.Globalize;

Globalize.addCultureInfo('en', {
  messages: {
    // UI messages.
    'loading': 'Loading',
    'save': 'Save',
    'edit': 'Edit',

    // Validate messages.
    'empty_attr': '%(attr)s is empty',

    // Error messages.
    'err_not_found': 'Not found %s',
    'err_tech_support': '%s. Please contact the technical support'
  }
});

Globalize.addCultureInfo('ja', {
  messages: {
    // UI messages.
    'loading': '読み込み中',
    'save': '保存',
    'edit': '編集',

   // Validate messages.
   'empty_attr': '%(attr)s が空です',

   // Error messages.
   'err_not_found': '%s が見つかりません',
   'err_tech_support': '%s。テクニカルサポートにご連絡ください'
  }
});
}(this));

メッセージユーティリティーの作成

sprintfとglobalizeを組み合わせて使用するので、ユーティリティーを作成した方がよいでしょう。それ以外にも、Globalizeは数値/日時/通貨のフォーマットやパースが可能なのでそちらもあわせて使ってみるとよいでしょう。

  /*!
   * Globalize wrapper functions.
   */
  module.Message = {
    /**
     * @param {string} key
     *    A localize message key.
     * @param {(string|Object)=} options
     *    sprintf named arguments OR string.
     * @param {string=} culture
     *    Culture names,
     *    "en", ["en-US", "ja"], "fr;q=0.4, es;q=0.5, he"(RFC2616 sec 14.4.).
     * @return {string} the replaced message.
     */
    getMessage: function(key, options, culture) {
      var opts = options || {},
          locStr = Globalize.localize(key, culture);
      return sprintf(locStr, opts);
    },
    /**
     * @param {(Date|number)} value
     *    A value according to the given format string.
     * @param {string} format
     *    A format string of globalize.
     * @param {string=} culture
     *    Culture names,
     *    "en", ["en-US", "ja"], "fr;q=0.4, es;q=0.5, he"(RFC2616 sec 14.4.).
     * @return {string} the formatted value.
     */
    format: function(value, format, culture) {
      return Globalize.format(value, format, culture);
    }
  };

使う

UI message

var msg = Message.getMessage('loading');
$('#loading span').text(msg);

データ属性のvalidate

Backbone.Modelのvalidateのエラーメッセージとして使います。

var model = Backbone.Model.extend({
  [… snip …]
  // Backbone.Modelのvalidate(問題なければnullを返し、そうでなければ何か返す)
  validate: function(attrs) {
    var errors = [];
    if (!(_.isString(this.get('id')) && this.get('id').length > 0)) {
      var msg = Message.getMessage('empty_attr', {attr: 'id'});
      errors.push(msg);
    }
    if (!(_.isString(this.get('title')) && this.get('title').length > 0)) {
      var msg = Message.getMessage('empty_attr', {attr: 'title'});
      errors.push(msg);
    }
    return _.any(errors) ? errors : null;
  },
  [… snip …]
});

参考

Going Global with JavaScript and Globalize.js
JavaScript sprintf - Dive Into JavaScript