- 2008-09-19 (Fri) 2:32
- Javascript
Photo by midnightglory
多言語対応のサイトを作っていると問題になるのが、メッセージの切り替えです。PHPやRailsを使っている場合は、HTTP_ACCEPT_LANGUAGEを見てメッセージ生成を切り替えれば良いのですが、静的ファイルの場合は、そうは行きません。
そこで、今回はJavascriptだけでブラウザの言語を取得する方法を調べてみました。
ググっていると、ブラウザ依存ですが取得する方法が見つかったので、各ブラウザで検証した所、navigator.browserLanguage、navigator.language、navigator.userLanguageのいずれかで取得できることが分りました。
ただ、この値はブラウザのデフォルト言語環境のなので、HTTP_ACCEPT_LANGUAGEとは違う値が返ってきます。たとえば、日本語OSに英語版のFirefoxを入れている場合は、”en”が返ります。
それでまとめてみたのが、このbrowserLanguage()です。
実行すると”en”や”ja”などの言語情報が返ってきます。
function browserLanguage() {
try {
return (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2)
}
catch(e) {
return undefined;
}
}
あなたのブラウザの言語設定は「」です。
「」内に何も表示されていなかった場合は、コメントでブラウザの種類とバージョンを教えてください。
動作確認ができているのは、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), Windows Mobile IE (7.7), Windows Mobile Opera (8.65), Wii ブラウザ (Opera 9.30)です。
思いつく限りの環境で試しました。
これだけでは役には立たないので、次はコレを使った言語切り替えライブラリを作ってみます。
このリンク先で、メッセージが出ていなかったり、「Sorry. We don’t support your language.」と表示されている、もしくは、日本語が表示されても、読み込み時にちらついているなどありましたら、コメントいただけると助かります。
参考資料
各言語の実行結果。
- FF3 (3.0.1)
- navigator.language: ja-JP
- navigator.browserLanguage: undefined
- navigator.systemLanguage: undefined
- navigator.userLanguage: undefined
- FF2 (2.0.16)
- navigator.language: ja
- navigator.browserLanguage: undefined
- navigator.systemLanguage: undefined
- navigator.userLanguage: undefined
- Safari3 (3.1.2)
- navigator.language: ja-jp
- navigator.browserLanguage: undefined
- navigator.systemLanguage: undefined
- navigator.userLanguage: undefined
- iPhone Safari (OS 2.1)
- navigator.language: ja-jp
- navigator.browserLanguage: undefined
- navigator.systemLanguage: undefined
- navigator.userLanguage: undefined
- Opera9 (9.27)
- navigator.language: ja
- navigator.browserLanguage: ja
- navigator.systemLanguage: undefined
- navigator.userLanguage: ja
- IE6 (SP2 6.0.2900) / IE7 (7.0.5730)
- navigator.language: undefined
- navigator.browserLanguage: ja
- navigator.systemLanguage: ja
- navigator.userLanguage: ja
- Google Chrome (0.2.149.30)
- navigator.language: ja-JP
- navigator.browserLanguage: undefined
- navigator.systemLanguage: undefined
- navigator.userLanguage: undefined
- Windows Mobile IE (7.7)
- navigator.language: undefined
- navigator.browserLanguage: undefined
- navigator.systemLanguage: ja
- navigator.userLanguage: ja
- Windows Mobile Opera 8.65
- navigator.language: ja
- navigator.browserLanguage: ja
- navigator.systemLanguage: undefined
- navigator.userLanguage: ja
- Wii ブラウザ (Opera 9.30)
- navigator.language: ja
- navigator.browserLanguage: ja
- navigator.systemLanguage: undefined
- navigator.userLanguage: ja
Related posts
Comments:0
Trackbacks:3
- Trackback U 1ff8 RL for this entry
- http://blog.masuidrive.jp/index.php/2008/09/19/how-to-detect-your-browser-language-from-javascript/trackback/
- Listed below are links to weblogs that reference
- ブラウザの言語をJavascriptから調べる。 from @masuidrive blog
- trackback from 最速グルメ検索研究会（東京グルメ by ayucat 改め） 08-09-19 (Fri) 11:59
-
[Web] 「静的ファイル」での多言語対応…
多言語対応のサイトを作っていると問題になるのが、メッセージの切り替えです。PHPやRailsを使っている場合は、HTTP_ACCEPT_LANGUAGEを見てメッセージ生成を切り替えれば良いのですが、静的…
- pingback from links for 2008-09-21 « 個人的な雑記 08-09-21 (Sun) 15:02
-
[...] masuidrive on rails – ブラウザの言語をJavascriptから調べる。 (tags: programming javascript) [...]
- trackback from 大人になったら肺呼吸 09-11-13 (Fri) 7:07
-
[JavaScript][スタイルシート]ブラウザのデフォルト言語に応じて動的にCSS(スタイルシート)を切り替える方法…
カスケーディングスタイルート(以下CSS)では、条件によってスタイルを切り替えるといった、スクリプトのような条件分岐を行うことができません。*1 このため、ページに適用するスタイルを動的に切り替える方法の１つとして、JavaScriptでCSSファイルを切り替える方法があり…