サーバ側でブラウザの言語設定を見るには Accept-Language ヘッダを読めばいいけど、クライアント側でそれに該当する情報を取得したくなったので、調査結果をメモ。
言語設定を取得するスクリプト
とりあえず結果があればいい人向けに、最初に結論を書いておきます。
// 最優先の言語だけ取得
var language = (window.navigator.languages && window.navigator.languages[0]) ||
window.navigator.language ||
window.navigator.userLanguage ||
window.navigator.browserLanguage;
// クライアント側で受け付けている言語リストを取得
var languages = window.navigator.languages || [
window.navigator.language ||
window.navigator.userLanguage ||
window.navigator.browserLanguage
];
クロスブラウザのための工夫
IE対応
「JavaScript でブラウザの言語設定を取得」を参考にしました。
IEやOperaはnavigator.languageが存在しないので、navigator.userLanguageとnavigator.browserLanguageを参照する必要があるらしい。
navigator.languageの挙動の差
FirefoxをChromeはどちらもnavigator.languageに対応していますが、微妙に挙動が違います。
MDNによるとFirefoxではnavigator.languageは以下のような挙動をするそうです。
-
navigator.languagesはAccept-Language HTTPヘッダと同じ配列を返す -
navigator.languageはAccept-Language HTTPヘッダの一番先頭の要素
しかし、Chromeでの挙動を検証してみたところ、
2016年3月7日現在の最新版の Chrome 49.0.2623.75 では以下のような挙動をしました。
-
navigator.languagesはAccept-Language HTTPヘッダと同じ値を返す -
navigator.languageはAccept-Language HTTPヘッダの設定に関わらず常にブラウザUIの言語設定を返す
Chromeの場合、「言語と入力の設定」から言語の優先順位を変えてもnavigator.languageは変わりません。
どのブラウザであっても Accept-Language HTTPヘッダと同じ値を取得したいので、一番最初にnavigator.languagesを見るようにしてあります。