jquery.localize.js で手軽に Web ページを多言語対応
jQuery プラグインの jquery.localize.js を使って、Web サイトを多言語化(国際化)します。リツイート直後のツイートを表示するやつ を多言語対応するのに使いました(現在は使用していません)。
jquery.localize.js を使うと手軽に多言語対応(というかローカライズ)できます。
使い方
ライブラリの参照
jQuery と jquery.localize.js を参照します。
https://gist.github.com/jz5/d29b839387523ac41d8b
翻訳する箇所の修正
翻訳する箇所に、data-localize 属性を付けます(属性名はなんでもいいです)。
https://gist.github.com/jz5/2693b7af9f287b07fdff
翻訳データの作成
翻訳データの JSON ファイルを用意します。「example-en.json」のように「名前-言語名.json」というファイル名にします。
https://gist.github.com/jz5/4fa1d27b80cdba3facfa
対応する言語の分だけ用意します。
翻訳プラグインを実行
localize メソッドを呼びます。
https://gist.github.com/jz5/268ac04939ca03282f37
以上で、ブラウザーの言語が en の場合は次のように置き換わります。
https://gist.github.com/jz5/ecc48f52ce1772a6c21e
処理をスキップ
ブラウザーの言語が、日本語の場合、処理をスキップするには、次のように書きます。
https://gist.github.com/jz5/7eddbe44ff9e1352a5af
強制的に言語を設定
強制的に言語を設定するには、次のように書きます。
https://gist.github.com/jz5/c729134188fc4fd76a3e
少しもの足りない点
動作からわかるように、上記の場合、一度 日本語が表示された後、英語に変わります。海外からのアクセスも少しあるので、ちょっとだけ多言語対応したいというようなケースに良さそうです。
また、テキストや、input タグの value 属性部分しか対応できません。JavaScript で表示する alert のメッセージを翻訳したいようなケースは、まったく別の処理が必要です。このプラグインを通して訳語を取得するのもできません。
その他のオプション
紹介した以外に、もう少しだけ細かなオプションがあります。詳しくは、jquery.localize.js を参照してください。