Posted at

javascriptでブラウザの言語設定を取得する

More than 3 years have passed since last update.

サーバ側でブラウザの言語設定を見るには 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.userLanguagenavigator.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.languageAccept-Language HTTPヘッダの設定に関わらず常にブラウザUIの言語設定を返す

Chromeの場合、「言語と入力の設定」から言語の優先順位を変えてもnavigator.languageは変わりません。

どのブラウザであっても Accept-Language HTTPヘッダと同じ値を取得したいので、一番最初にnavigator.languagesを見るようにしてあります。


参考