JavaScriptでブラウザ言語を取得したい

Question

###実現したいこと
この条件分岐の形式で、JavaScriptでブラウザ言語を取得したいです。
（jQueyrでも構いません。）

if( language == 'ja' ){
	alert('日本語');
}else if( language == 'en' ){
	alert('English')	
}

下記のソースコードが悪いのか、それとも添付画像の設定が悪いのでしょうか。
###ソースコード１
こちらを書いてみましたが、「日本語」と出てしまします。

var language = (window.navigator.languages && window.navigator.languages[0]) ||
	window.navigator.language ||
	window.navigator.userLanguage ||
	window.navigator.browserLanguage;

###ソースコード２
次にこちらで試したみたのですがやはり「日本語」です。

var language = function() {
  var ua = window.navigator.userAgent.toLowerCase();
  try {
    // chrome
    if( ua.indexOf( 'chrome' ) != -1 ){
      return ( navigator.languages[0] || navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2);
    }
    // それ以外
    else{
      return ( navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2);
    }
  }
  catch( e ) {
    return undefined;
  }
}

###設定画面
自分のブラウザ設定画面はこのように「English」になっているのですが、この設定がおかしいのでしょうか？
それともやはり上のソースコードがおかしいでしょうか？

###追記
下図のようにPC言語設定も変えたのですが、相変わらず「ja」でした。

Comments

[otn]

設定は間違って無さそうなので、language に代入した直後に、その値を表示してみては？

[miyabi_pudding]

ブラウザ自体もそうなのですが、
PCの言語設定も変えてみて、試されるといいかもしれません。
Qiitaの記事にて、
>navigator.languagesはAccept-Language HTTPヘッダと同じ値を返す
とありますので、この場合は、サーバー側でPCの元の設定から取得するような仕組みに思います。
また、
>Chromeの場合、「言語と入力の設定」から言語の優先順位を変えてもnavigator.languageは変わりません。
とあるので、ブラウザの言語設定だけでは、質問者さんの意向に沿わない結果になる可能性があるでしょう。

[raisinchan]

otnさん
firefoxでふつうにこれだけでも「ja」です。
var language = window.navigator.language;
alert(language);

miyabi_takatsukさん
やってみます。ありがとうございます。

[m.ts10806]

miyabi_takatsukさんの懸念事項が当たってそうに思います。navigator自体がネットワーク接続の有無(online)のチェックに使われたりもするのでブラウザの言語設定いじるくらいでは確認できなさそうに思います。

[coco_bauer]

window.navigator.languages で返される値は言語のリストです(例えば、["en-US", "zh-CN", "ja-JP"])。
それを論理積(&&)や論理和(||)で演算しようとしているのは間違いです（&&や||で演算されるのは論理値(TRUE,FALSE)であるべきです）。
&&や||で演算すると、とりあえずFALSE(0)でなければTRUEと判断して演算をしますから、エラーは出ないですが、意味のある値にはなりません。

[raisinchan]

みなさんお世話になってます。ブラウザとPCの言語設定を両方変えた上で、firefoxで下記をやっても「ja」でした。果たして正解は…
var language = window.navigator.language;
alert(language);

Answer 1

Firefoxでwindow.navigator.language(s)でjaが取得できない原因

分かりました!! 恐らくこれでOKな気が。。違いましたらごめなさい(｡•ㅅ•｡)????

『言語設定(O)...』をクリック

ちなみに、『代替言語を設定(L)...』も関係あるのか、試してみました。先に結果を言うと、無関係でした????

file:///..., http://... でファイル取得

ローカルファイルを読み込む方法が、2通りあることに気づき、両方で試してみました。

明示されてなかったと思うのですが(見落としていたらすみません(｡•ㅅ•｡)????)、「質問者さんの実行環境はローカルだった」いう前提で、以下話を進めています。

file:///... でファイル取得

http://... でファイル取得

その他わかった事 まとめ

window.navigator.languagesの値は、HTTPヘッダーのAccept-Language域の値

とW3C等の仕様書には記述してありました(小生の、上記にある前回答より)。

ただ、file:///...スキームを使ってファイルを取得・表示する場合場合は、直接ファイルを参照する仕組みらしく、リクエストという処理はありません。

HTTPリクエストが必要ない場合でも、ブラウザ設定の「ウェブページの(優先)言語設定」は利用され、window.navigator.languages の値として取得出来るようですね????

参照仕様書

• File URI Scheme -Wikipedia.en-
• RFC 8089 The "file" URI Scheme -IETF-

Comments

[miyabi_pudding]

これビンゴな気がしますね。
ブラウザによって、言語の設定箇所いくつか存在するようですしね。

[退会済みユーザー]

そうであれば良いのですが…(´????๑›ω‹๑)????

[think49]

質問者さんが掲示したスクリーンショットを見る限りでは、これが正解ですね。
"Firefox will display the first language as your default and will display alternate languages if necessary in the order they appear." を日本語訳すれば、AzumaOさんが無関係とされたSSの日本語文と一致します。
https://support.mozilla.org/en-US/kb/use-firefox-another-language

Answer 2

回答欄で書いた方がよさそうなので、自信のない案ですが書いておきます。
・Chromeでは期待通り
・Firefoxでは常にja
ということですよね。

Firefoxでアドオンオフでも起こるということで、望み薄ですが、
プロファイルを新規に作成してみて試してみてください。
Multiple Firefox profiles - Mozilla | MDN

Answer 3

[間違いが多く含まれる回答になってしまい、大部分を削除しました。質問者様、すみません(｡•ㅅ•｡)????
以下、質問内容に関連のある、参照した仕様書のリンクはそのまま置いておきます。]

参考文献

window.navigator,language(s)に関する MDN, W3C, IETF の使用書・仕様書のリンク、抜粋。
。参照順。

MDN

• Navigator​Language​.language (MDN)

• Navigator​Language​.languages (MDN)

• HTML5.2 (W3C)

window . navigator . language
Returns a language tag representing the user’s preferred language.

window . navigator . languages
Returns an array of language tags representing the user’s preferred languages, with the most preferred language first. The most preferred language is the one returned by navigator.language.

language, of type DOMString, readonly, nullable
Must return a valid BCP 47 language tag representing either a plausible language or the user’s most preferred language. [BCP47]
languages, of type DOMString[], readonly
Must return a read only array of valid BCP 47 language tags representing either one or more plausible languages, or the user’s preferred languages, ordered by preference with the most preferred language first. The same object must be returned until the user agent needs to return different values, or values in a different order. [BCP47]

• plausible languages -HTML5.2-(W3C)

To determine a plausible language, the user agent should bear in mind the following:

...

To avoid introducing any more fingerprinting vectors, user agents should use the same list for the APIs defined in this function as for the HTTP Accept-Language header.

• Accept-Langage -HTTP 1.1-(IETF)

5.3.5. Accept-Language

The "Accept-Language" header field can be used by user agents to
indicate the set of natural languages that are preferred in the
response. Language tags are defined in Section 3.1.3.1.

• Accept-Language used for locale setting (W3C)

The Accept-Language header is information about the user's language preferences that
is passed via HTTP when a document is requested. Mainstream browsers allow these language preferences to be modified by the user.

Comments

[otn]

いやそれは、そうなんですが、質問者さんの環境で何故そうならないかが謎なんです。

[miyabi_pudding]

otnさん>そこなんですよね・・・。

[退会済みユーザー]

本当に「原理」を理解していましたか、ontさん? ってか誰ですか??

上記の会話のやり取りでは原理まで言及されておらず、小生の上記回答で、少なくとも「HTMLのlang属性が無関係である」事が分かりました。(miyabiさんのやり取りから私の上記回答が生まれました。貴殿を巻き込みご容赦下さい(｡•ㅅ•｡)????)

相手の回答に横槍を入れる時間が余っているのなら、
考えられる原因→解決を提示する方が生産的では?

- firefoxの消去・再インストールで治るのではないか(chromeは◯の様なので)
- レジストリ関連を触ってはいないか
- firefoxは最新か

等、何か解決に繋がりそうな案は無かったのでしょうか。。いや、てゆーか、一つくらい提案せんかいごるぁぁあああ!!!(急にキレてすみませんw)

余計なコメントをする時間があるとは余程優秀なのでしょう。otnさんの解決策(ベストアンサー)期待しております。<(_ _)> かしこ

[退会済みユーザー]

raisinchanさんとmiyabiさん、迷惑かけてすみません_o⊇ ????

[otn]

> ってか誰ですか??
質問に対するコメントでやりとりしていました。
最初から設定は間違いないことは分かっていたので、最初はスクリプトの質問に書かれていない部分のバグを疑ったのですが、そうでもないようで、遠隔での調査に行き詰まっていたところです。

Answer 4

navigator.languages (HTML Standard)

https://momdo.github.io/html/system-state.html#language-preferences
https://html.spec.whatwg.org/multipage/system-state.html#language-preferences

To avoid introducing any more fingerprinting vectors, user agents should use the same list for the APIs defined in this function as for the HTTP Accept-Language header.

意訳「これ以上の"fingerprinting vectors"の導入を避けるために、ユーザーエージェントはHTTPの Accept-Languageヘッダと同じようにこの関数で定義されたAPIのために同じリストを使うべきです。」

ブラウザの言語設定

https://www.w3.org/International/questions/qa-lang-priorities

確認手段

(A) navigator.languages の値を見る

console.log(navigator.languages)

(B) 開発者ツールの [ネットワーク] タブでリクエストヘッダ Accept-Language を確認する。

Re: raisinchan さん

Comments

[think49]

個人的にはあれこれ試すよりも、しっかりと状況把握するのが先決だと思います。
質問者さんはずっと、navigator.language値のみを見ており、navigator.languagesは確認していません。
navigator.languagesに ja があるなら、優先順位設定の問題と想定出来ます。
Accept-Languageヘッダにjaがないなら、言語設定そのものが出来ていないのでしょう。
ヘッダはPHPで確認しているそうですが、ここまで改善しないなら確実な方法を私ならとります。
ヘッダが期待通りでないなら、Proxy設定とか、あたりをつけるポイントが変わってくると思います。

Answer 5

結論が出たので、回答させていただきます。
javascriptにて、言語を取得するには（特定）二つ条件が必要になります。
一つは、質問者さんが実践した、
ブラウザにての、言語設定。
もう一つは、HTML自体の言語設定になります。

<html lang="en">
</html>

といったものです。
この条件では、en-USを取得できたので、間違い無いかと。
そのまま自然に、lang属性を設定しないと、
もちろん日本で購入されたマシンでは、デフォルトは、jaに設定されてしまいます。
また、マシン自体の言語設定を英語にしても、jaデフォルトになりました。
（Macbook Pro、最新OSにて確認）
なので、
ブラウザの設定+HTMLの言語設定をされると、
質問者さんのご意向に沿った結果を得られるでしょう。

Comments

[raisinchan]

ありがとうございます。

➀ブラウザ設定
➁PC設定
➂<html lang="en">になったことを出力後のHTMLで確認
↓
var language = window.navigator.language;
alert(language);
↓
やはり「ja」でした。…手ごわいｗ

確認した環境はこちらです。macだとうまくいくんですね。
・firefox
・win10

[raisinchan]

ちなみに上の➀➁の状態でPHPでこうしても
<html lang="<?= substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2); ?>">

HTMLの出力はこうでした。
<html lang="ja">

つまりどうやらPHPでも取得できてないみたいです。

[miyabi_pudding]

く、windowsだとダメでしたか。
もう少しこちらでも検証してまいります。

[raisinchan]

お手数おかけします。自分でも検索してわかったらご報告させて頂きます。
それにしてもよくある操作だろうと思ったのですが、ネットに的確な情報がないのも不思議ですよね。

[raisinchan]

「winとchrome」だと仰る方法でできていました。
「winとfirefox」のときだけできないみたいですね。
5月4日以降、firefoxで言語系のバグがあるみたいですから、それが原因でしょうか。

[miyabi_pudding]

最近は、Googleの検索の精度が微妙なのも影響しているかと思います。
（音声検索機能の充実のために試験しているのかと思われます）

さて、当方の環境で、細かく調査いたしましたが、下記のような結果が得られました。
いずれも、Windows 10にて、window.navigator.languageの取得結果です。
FireFox 66.0.4：ブラウザの言語優先を変えるだけで、言語変化取得
Google Chrome：ブラウザの言語優先、HTMLのlang属性、両方設定で言語変化

ふむ、FireFox、一応、当方の環境でも最新バージョンのはずですが、
バグがあるのであれば、その可能性はありますね・・・。
入れているアドオンとかも影響あるかもしれません。

[raisinchan]

firefoxいけちゃいましたか？？バージョンも一緒で、再インストールして、アドオンを切ってもダメでしたので、うーん、ですね。こちらの環境のことでご迷惑おかけしてしまい申し訳ございません。
ひとまず言語での条件分岐がテストしたかったので、chromeでやっていきます。
また何かわかりましたらご返信いたします。