Photo by keepps
前回のブラウザの言語をJavascriptから調べるを元に、ページのメッセージを言語切り替えするスクリプトを作ってみました。
実際のページは、これです。
一つのHTMLの中に複数の言語のメッセージを書き、それぞれの言語をCSSのクラスで指定することで、ブラウザに合わせた言語のみが表示されるようになります。
日本語版のブラウザで見ると「こんにちは世界」、英語版やポルトガル語版のブラウザで見ると、それぞれの言語でメッセージが表示されます。
デフォルトの言語は英語に設定しているので、日本語やポルトガル語以外のブラウザで見た場合は、英語のメッセージが表示されます。
このスクリプトでは、JSでブラウザの言語を取得したあと、表示するCSSを切り替えることで、メッセージ切り替えを実現しています。使い方などはページのソースを参考にしてください。
設置する前には、CSSとこのスクリプトはなるべく先頭で実行するようにしてください。あまり下の方で読み込むと画面がちらつく可能性があります。
言語の切り替えするなら、Apacheのcontent negotiationでいいじゃん!ってご意見を複数から頂いたのですが、Railsのpage cacheで使いたい、複数言語のHTMLを作ると修正が面倒なので、1つのHTMLで全部の言語を記述したい、Google翻訳APIとも組み合わせたいなぁ、などの理由で作ってみました。
なお、動作確認は、FF3 (3.0.1), FF2 (2.0.16), IE6 (SP2 6.0.2900), IE7 (7.0.5730), Safari3 (3.1.2), iPhone Safari (OS 2.1), Opera9 (9.27), Google Chrome (0.2.149.30)、Wii ブラウザで取れていますが、Windows MobileのIEやOperaでは動かない事を確認しています。
Window MobileのIEやOperaでJavascriptのデバグの方法をご存じの方は教えていただけますか?