JavaScriptでOS名とかブラウザ名を調べるコード例

JavaScriptを使っていて、こういう場面ってないですか？

ユーザーのOS名を判定したい
使っているブラウザ名を調べたい

そういう時は、ほんの数行のコードを書けばすぐ分かります。

ここでは自分向けのメモも兼ね、
JavaScriptでブラウザ名とかOS名を判定するコード例を紹介します。

このページの目次

１．OS名を判定する方法＆コード例
２．ブラウザ名を判定する方法＆コード例
ここまでのまとめ

１．OS名を判定する方法＆コード例

まずはOS名の判定から

市場規模的には、次の４つが判定できれば十分なはずです。

Windows
MacOS
Linux
Unix（X11）

こういうOS名は直接取得ってできません。

でもユーザーエージェント（ navigator.userAgent ）の値を調べれば、間接的に取得できます。

例えば自分の環境の場合、 userAgent の値は次みたいになってました。

5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

1	5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

Windows とか Wind64 とかの文字列が含まれてるのが分かるはず

なのでOS名を調べるには、ざっくり次みたいなコードで判定できます。

/// OS名を取得
var OSName = 'Unknown';
if (navigator.userAgent.indexOf("Win")!=-1) OSName="Windows";
if (navigator.userAgent.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.userAgent.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.userAgent.indexOf("Linux")!=-1) OSName="Linux";

/// OS名を表示
console.log('OS name : ', OSName);

/// OS名を取得

var OSName = 'Unknown';

if (navigator.userAgent.indexOf("Win")!=-1) OSName="Windows";

if (navigator.userAgent.indexOf("Mac")!=-1) OSName="MacOS";

if (navigator.userAgent.indexOf("X11")!=-1) OSName="UNIX";

if (navigator.userAgent.indexOf("Linux")!=-1) OSName="Linux";

/// OS名を表示

console.log('OS name : ', OSName);

ただし、 navigator.userAgent の値は偽装とかも可能なので要注意！

必ずしも正しいOS名を取得できる・・・とは限らないことは了解しておいてください。

２．ブラウザ名を判定する方法＆コード例

ブラウザ名の判別も、ユーザーエージェント（ navigator.userAgent ）の値から判定できます。

例えば僕の環境の場合、ブラウザごとに次の値が返ってきました、、、、、

Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

1	Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0

1	Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0

Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36 OPR/62.0.3331.43

1	Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36 OPR/62.0.3331.43

Opera はなぜか Chrome とか Safari みたいな値まで返してくる模様・・・

なので正確な判断までは難しいです。

でも大まかに判別するためのコードを書くなら、こんな感じ

/// ブラウザ名を取得
var browerName = 'Unknown';
if (navigator.userAgent.indexOf("Chrome")!=-1) browerName="Chrome";
if (navigator.userAgent.indexOf("Firefox")!=-1) browerName="FireFox";
if (navigator.userAgent.indexOf("Safari")!=-1) browerName="Safari";
if (navigator.userAgent.indexOf("OPR")!=-1) browerName="Opera";

/// ブラウザ名を表示
console.log('Browser name : ', browserName);

/// ブラウザ名を取得

var browerName = 'Unknown';

if (navigator.userAgent.indexOf("Chrome")!=-1) browerName="Chrome";

if (navigator.userAgent.indexOf("Firefox")!=-1) browerName="FireFox";

if (navigator.userAgent.indexOf("Safari")!=-1) browerName="Safari";

if (navigator.userAgent.indexOf("OPR")!=-1) browerName="Opera";

/// ブラウザ名を表示

console.log('Browser name : ', browserName);

こちらも偽装とかされている場合、正しいブラウザ名とは限らないので要注意

ここまでのまとめ

ということで、OS名とかブラウザ名の判定方法まとめ

OS名を判定する方法
ユーザーエージェント（ navigator.userAgent ）の値には Win とか Mac が含まれるので、そこから原始的に判定できる
ブラウザ名を判定する方法
これも同じくユーザーエージェントの値から Chrome とか Firefox の値が含まれてるか調べ、そこから大まかに判定すればOK