GlobalizeライブラリでJavaScriptの国際化をしてみる

In: JavaScript| technology

13 7月 2011

やり方だけは何度か聞いたことがあったけれど、意外と実際にやってみたことがない対応、国際化（私だけかもしれない）。
いろんな言語でそれぞれやり方あるけれど、JavaScriptで国際化って、あまり聞いたことがない気がします。
最近ちょっと調べてみる機会に恵まれたので、メモがてらまとめてみようかと思います。

国際化とは？

マルチロケールとか、多言語対応とか、英語化とか、いろんな人がいろんな言葉で説明してくれているけれど、概念的には、「国際化」と「地域化」という二つの言葉でくくるのが正しいようです。
国際化は、UI上の表示やなんかを複数の文化（言語・度量衡含め）に対応できる仕組みを作ることで、地域化はその仕組みに乗っかって、その国や地域の言語や表記に翻訳・変換すること。
世の中の英語化対応と言われているものは、国際化→地域化の二つの作業のコンボを指していることが多いみたいですね。

ちなみに、国際化と地域化をくくって「グローバライゼーション」と言ったりもするみたいです。
あと、似たようなタイミングで出てくる「i18n」と「L10N」。これも国際化と地域化のことを指しています。「i18n」というのは国際化の別名で、「internationalization」の最初と最後のアルファベットとその間の文字数を取ったもの。「L10N」は地域化の別名で、「localization」の最初と最後のアルファベットとその間の文字数をとったものです。それぞれ大文字小文字なのは、iの大文字とLの小文字は区別がつきにくいから。

国際化のライブラリ

ちょっと調べてみた範囲だと、gettext-js、localizer.jsといったものがあるそうですが、今回は、長いものには巻かれてみろってことで、Globalizeというライブラリを使ってみようと思います。

Globalizeとは？

天下のマイクロソフトさん謹製のjsライブラリです。元はjQueryのプラグインのひとつとして始まったものですが、ついに独立したライブラリとしてデビューしたようです。さすがにテキストの翻訳は自分でしなければなりませんが、日時や数字の表記のロケール対応はすでにしっかりサポートされており、その数350超。
作った元が元だけに、ロケールの対応数はまじ半端ないと思います（でも、バージョン管理に入れる時間を待つのが面倒だったから、英語と日本語だけ残してひとまず全部消したのは内緒 :-P）。あと、プロジェクトとしてそれなりに持続しそうな雰囲気があるのもグッドですね。
ただ、まだプラグインからライブラリへと変遷してきているせいなのか、jQuery-glob → jQuery-global → Globalize、と名前も実装方法も微妙に変化していっています。昨日まで見えていたGitHubのドキュメントが、次の日いきなり404なんてこともあったので、そこはちょっとマイナス。

Globalizeの使い方

今回の検証環境

前回に引き続き、同じくWindows。

  • Google Chrome 12.0.742.91
  • Firefox 4.0.1
Globalizeの始め方

先ほど紹介したここから、globalizeを落としてきます。GitHubなり通常のダウンロードなりお好きなほうで。必要なものはlibフォルダの中にすべて入っているので、今回はlibフォルダ以下のみを持ってきて、i18nとでもリネームしておきます。

github的にはjQueryの中にありますが、jQueryはいりません。

コードを書いてみる

Readme.mdを参考にやってみます。基本的には、globalize.jsと一緒にlib/cultures/globalize.culture.****.jsを読み込むことで、ロケールの設定準備が整います。こんな感じで呼び出せばいいですね。

<script type="text/javascript" src="js/i18n/globalize.js" />
<script type="text/javascript" src="js/i18n/cultures/globalize.culture.ja.js" />

呼び出しができたら、実際にコードを書いてみます。
言語の指定はこんな形です。”ja”や”ja-JP”のような形で、cultureメソッドの引数を指定します。

Globalize.culture("ja");

こうすることで、cultureを日本語（”ja”）で指定したときに日付や単位を日本仕様で利用することができるようになります。
この指定をしない場合、デフォルトの言語は英語（”en”）になります。

引数になるロケールの取得は、DBでユーザ情報の言語設定を保持しておいて使ったり、リクエストのロケールをとってきたりすれば、自動的にロケールを選ぶ形も作れるでしょう。

次に、addCultureInfoメソッドを利用して、翻訳したいテキストとキーをJSON形式で追加します。外部ファイルとかに出して、globalize.culture.****.jsと同時に読み込むのもいい感じですね。

Globalize.addCultureInfo( "ja", {
    messages: {
        "hello": "こんにちは！"
    }
});

ここまで書いたところで、ようやく国際化対応の準備が整いました。
実際にメッセージの置き換えは、以下のようなlocalizeメソッドを利用します。

alert(Globalize.localize("hello", "ja"));

これでメッセージが置き換わります。あとは、”ja”で作ったものと同じノリで、”en”とか”fr”とか作ってみるといいんじゃないでしょうか。

ほかにも数値や日付を置き換えてくれたりするメソッドもあったりするのですが、それはまた別の機会ということで。

Via：


1 Response to GlobalizeライブラリでJavaScriptの国際化をしてみる

Avatar

JavaScriptで和暦変換する | 思考の蝶

11月 6th, 2011 at 16:05:02

[...] GlobalizeライブラリでJavaScriptの国際化をしてみる [...]

Comment Form

About this blog

ゆるーく、ふわーっと、興味のままに。

自分のかたわらに置いておくメモ代わり。

Photostream

Categories

Archives

Copyright © 2007 - Katawara.* - is proudly powered by WordPress | ログイン

Compositio Theme is created by: Design Disease brought to you by PremiumThemes.com