jquery.localize.js で手軽に Web ページを多言語対応

jQuery プラグインの jquery.localize.js を使って、Web サイトを多言語化（国際化）します。リツイート直後のツイートを表示するやつを多言語対応するのに使いました（現在は使用していません）。

jquery.localize.js を使うと手軽に多言語対応（というかローカライズ）できます。

使い方

jQuery と jquery.localize.js を参照します。

	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="jquery.localize.min.js"></script>

view raw

index.html

hosted with ❤ by GitHub

翻訳する箇所に、data-localize 属性を付けます（属性名はなんでもいいです）。

<span data-localize="pronamachan">プロ生ちゃん</span>

view raw

index.html

hosted with ❤ by GitHub

翻訳データの JSON ファイルを用意します。「example-en.json」のように「名前-言語名.json」というファイル名にします。

対応する言語の分だけ用意します。

localize メソッドを呼びます。

$("[data-localize]").localize("example");

view raw

script.js

hosted with ❤ by GitHub

以上で、ブラウザーの言語が en の場合は次のように置き換わります。

<span data-localize="pronamachan">Pronama-chan</span>

view raw

index.html

hosted with ❤ by GitHub

ブラウザーの言語が、日本語の場合、処理をスキップするには、次のように書きます。

$("[data-localize]").localize("example", { skipLanguage: "ja" })

view raw

script.js

hosted with ❤ by GitHub

強制的に言語を設定するには、次のように書きます。

$("[data-localize]").localize("example", { language: "en" })

view raw

script.js

hosted with ❤ by GitHub

動作からわかるように、上記の場合、一度日本語が表示された後、英語に変わります。海外からのアクセスも少しあるので、ちょっとだけ多言語対応したいというようなケースに良さそうです。

また、テキストや、input タグの value 属性部分しか対応できません。JavaScript で表示する alert のメッセージを翻訳したいようなケースは、まったく別の処理が必要です。このプラグインを通して訳語を取得するのもできません。

紹介した以外に、もう少しだけ細かなオプションがあります。詳しくは、jquery.localize.js を参照してください。

Posted by jz5