jquery.localize.jsで多言語対応 - まめーじぇんと@Tech

前から対応せねば・・・と思っていた多言語対応をしました。

いろいろと調べたところ、jquery.localize.jsが一番やりやすそうだったので、
今回はこちらで。

1: jquery.localize.jsをダウンロード。
コチラから。
https://github.com/coderifous/jquery-localize

解凍し、jquery.localize.jsを作業フォルダにコピーします。

2: jquery.jsとjquery.localize.jsを読み込み。
これはHTMLのheaderの中にでも。

<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.localize.js" charset="utf-8"></script>

3: 下記Javascriptの記載を追加

<script>
var opts = {
	language : lang,
	skipLanguage : "en"
};
$("[data-localize]").localize("test", opts);
</script>

僕は、HTML内に英語を記載しているので、”英語は翻訳しない”という意味で
skipLanguage : "en"を追加します。
HTML内に日本語で記載していて、英語に翻訳する場合は、

var opts = {
	language : lang,
	skipLanguage : "jp"
};

となります。念のため。

4:JSONを追加
翻訳の記載のあるJSONを作ります。
今回は、test-ja.jsonという名前で。
この"test"が、上記3番で書いた$("[data-localize]").localize("test", opts);
の"test"となります。

英語のファイルであればtest-en.jsonとなります。

test-ja.json

"title": "てすと"
"footer": {
	"home": "ホーム",
	"about": "このサービスについて"
}

上記のfooterのように階層を作ることもできます。

5: HTMLから呼び出し
例えばh3のタグから呼び出すのであれば、下記のように"data-localize"
を追加します。

<h3 data-localize="title">Test message here</h3>

このdata-localizeは3で指定した$("[data-localize]").localize("test", opts);の
[ ](カッコ)内で指定した文字列です。

階層を持ったJSONを指定する際は、こんな感じ

<h3 data-localize="footer.home">Home</h3>

6: 動かしてみる
これで、ブラウザの言語設定が日本語であれば、日本語に翻訳されて表示されるハズです。

ちなみに、Mac + Chromeの環境では、Chromeの言語設定を変えてもダメらしく、
Mac自体の言語設定を切り替える必要があるようです。

7: JSONのフォーマットチェック (番外編)
JSONのフォーマットまミスっていると(もちろん)翻訳がなされない
（僕の環境ではHTMLに直接した英語が表示される）ので、
JSONはきちんとしたフォーマットである必要があります。

そのためのサイトは、下記がオススメ。

JSONLint
http://jsonlint.com/

自分の書いたJSONのフォーマットをチェックしてくれるサイトです。
エラーの内容はわかりにくいけど、一応わかる・・・。

8: 実行時 / デプロイ時の注意 (番外編)
僕の環境は、Mac + GAE + Eclipseで開発していますが、
localhostで実行しても、なぜかうまく表示されないことがありました。
※Eclipse上でcleanしてもダメなこともあり・・・。

おそらくブラウザがキャッシュを持っているせいだと思われるので、
一度ブラウザを閉じて、再度localhostを起動してみることを
オススメします。
※一応、僕の環境ではこれでうまくいった。

最初は自分の実装がマズいのか、環境のせいなのかわからず、
ここだけで2時間くらいハマった。。。