JavaScriptで簡単にブラウザのUA判定する方法まとめ！バージョンや一覧表示におまけを紹介！

トップ
プログラミング
JavaScript
JavaScriptで簡単にブラウザのUA判定する方法まとめ！バージョンや一覧表示におまけを紹介！

スポンサードリンク

JavaScriptで簡単にブラウザのUA判定する方法まとめ！バージョンや一覧表示におまけを紹介！

2016年02月21日 [JavaScript]

クライアントサイドで軽くユーザエージェント(UA)を判定したい時に
JavaScriptを使うと便利ですが、これだ！という情報がヒットしないのでまとめてみました。

スクリプト上でwindow.navigator.userAgentを使うことでクライアントPCのブラウザを簡単に取得できます。

userAgent関数によるブラウザ判定

// ブラウザのUAを小文字で取得
var userAgent = window.navigator.userAgent.toLowerCase();

// 一般的なブラウザ判定
if (userAgent.indexOf('msie') != -1) {
  /* IE. */
  return 'ie';
} else if (userAgent.indexOf('chrome') != -1) {
  /* Google Chrome. */
  return 'chrome';
} else if (userAgent.indexOf('firefox') != -1) {
  /* FireFox. */
  return 'firefox';
} else if (userAgent.indexOf('safari') != -1) {
  /* Safari. */
  return 'safari';
} else if (userAgent.indexOf('opera') != -1) {
  /* Opera. */
  return 'opera';
} else if (userAgent.indexOf('gecko') != -1) {
  /* Gecko. */
  return 'gecko';
} else {
  return false;
}

// ブラウザのUAを小文字で取得

var userAgent = window.navigator.userAgent.toLowerCase();

// 一般的なブラウザ判定

if (userAgent.indexOf('msie') != -1) {

/* IE. */

return 'ie';

} else if (userAgent.indexOf('chrome') != -1) {

/* Google Chrome. */

return 'chrome';

} else if (userAgent.indexOf('firefox') != -1) {

/* FireFox. */

return 'firefox';

} else if (userAgent.indexOf('safari') != -1) {

/* Safari. */

return 'safari';

} else if (userAgent.indexOf('opera') != -1) {

/* Opera. */

return 'opera';

} else if (userAgent.indexOf('gecko') != -1) {

/* Gecko. */

return 'gecko';

} else {

return false;

}

やっていることはすごく単純で、userAgent関数を利用してブラウザのUAを取得させます。

取得時にはブラウザ判定しやすいようにtoLowerCase()で小文字に変換してます。

あとはindexOf(‘任意の文字列’)関数で検索文字列内に任意の文字列が含まれているか判定させ、一致すればそれぞれのブラウザの文字列を返すようにしています。

基本的にこのスクリプトでブラウザ判定を行なうことが可能ですが、
一番厄介なIEのバージョン判定は別途行なう必要があります。

IEのバージョン判定をスクリプトで実装する

// ブラウザのUAを小文字で取得
var userAgent = window.navigator.userAgent.toLowerCase();
// アプリケーションのバージョンを小文字で取得
var appVersion = window.navigator.appVersion.toLowerCase();

// IEの判定
if (userAgent.indexOf("msie") != -1) {
  /* IE. */
  
  // IEのバージョン判定
  if (appVersion.indexOf("msie 6.") != -1) {
    /* IE6. */
    return 'ie6';
  } else if (appVersion.indexOf("msie 7.") != -1) {
    /* IE7. */
    return 'ie7';
  } else if (appVersion.indexOf("msie 8.") != -1) {
    /* IE8. */
    return 'ie8';
  } else if (appVersion.indexOf("msie 9.") != -1) {
    /* IE9. */
    return 'ie9';
  } else if (appVersion.indexOf("msie 10.") != -1) {
    /* IE10. */
    return 'ie10';
  } else {
    return 'ie';
  }
}

// ブラウザのUAを小文字で取得

var userAgent = window.navigator.userAgent.toLowerCase();

// アプリケーションのバージョンを小文字で取得

var appVersion = window.navigator.appVersion.toLowerCase();

// IEの判定

if (userAgent.indexOf("msie") != -1) {

/* IE. */

// IEのバージョン判定

if (appVersion.indexOf("msie 6.") != -1) {

/* IE6. */

return 'ie6';

} else if (appVersion.indexOf("msie 7.") != -1) {

/* IE7. */

return 'ie7';

} else if (appVersion.indexOf("msie 8.") != -1) {

/* IE8. */

return 'ie8';

} else if (appVersion.indexOf("msie 9.") != -1) {

/* IE9. */

return 'ie9';

} else if (appVersion.indexOf("msie 10.") != -1) {

/* IE10. */

return 'ie10';

} else {

return 'ie';

}

上記のソースはIE10まで判定できます。

IE11がなぜ含まれていないかは後述で説明していきたいと思います。

さて、IEの場合はuserAgent関数に加えて、appVersionという関数も利用しています。
appVersionはブラウザのバージョン情報を保持しているものでこれにIEのバージョンが含まれています。

なので両方用いることで簡単に判定が行えます。

IEの互換表示モード利用時のUAの表記に注意

たまにIE8なのにIE7としてご認識されることがあります。

特にUAを判定してクライアントの情報を取得するモニタリングツールを使っている際や、
そういったソフトウェアを開発したりする際は気を付ける必要がありますね。

実はその多くの原因はIEの互換表示モードです。

この互換表示モードは新しいバージョンのIEでは動作しないウェブサイト上で、
切り替えて利用されるケースが多いですが、利用者によってはどのサイトでも有効になる設定をしていることがあります。

しかも互換表示モード利用時はUAまで書き換わってしまいます・・・。

例えIE10や11でもIE7として認識されてしまうと、厄介です。

上記のソースのような記述にした理由はこのご認識を回避するためです。

もし仮にusarAgent関数だけでバージョンも判定すると

if (userAgent.indexOf('msie 10') != -1) {
  /* IE10. */
  return 'msie 10';
}

if (userAgent.indexOf('msie 10') != -1) {

/* IE10. */

return 'msie 10';

}

のような記述になりますが、これでは互換表示モード利用時のIE10では判定されません。

なので別途appVersionという関数を使い、ブラウザのバージョン情報を取得させました。

IE11だけUA判定ができない

という感じでIEだけバージョン判定を別途してあげるだけで実現はできますが、
実はこの記述では長ったらしい上に、IE11の判定ができません。

IE11からUAのフォーマットが大きく変わってますからね・・・。

IE11を含めてUAを判定する方法

// IEのバージョン
var version;
 
// ブラウザのUAを小文字で取得
var userAgent = window.navigator.userAgent.toLowerCase();
 
// IEの判定
var isIE = (userAgent.indexOf('msie') >= 0
               || userAgent.indexOf('trident') >= 0);

// IEのバージョンを取得
if (isIE) {
  // 正規表現によりUA文字列を配列に分割
  var arr = /(msie|rv:?)\s?([\d\.]+)/.exec(userAgent);
  version = (arr) ? arr[2] : '';
}

// IEのバージョン

var version;

// ブラウザのUAを小文字で取得

var userAgent = window.navigator.userAgent.toLowerCase();

// IEの判定

var isIE = (userAgent.indexOf('msie') >= 0

|| userAgent.indexOf('trident') >= 0);

// IEのバージョンを取得

if (isIE) {

// 正規表現によりUA文字列を配列に分割

var arr = /(msie|rv:?)\s?([\d\.]+)/.exec(userAgent);

version = (arr) ? arr[2] : '';

}

実はIE11のUAには“Trident”が含んでおり、これが含まれているかを判定します。

IE11より古いバージョンでは“MSIE”という文字列が含まれています。

この両方のいずれかが含まれていればIEであるか判定が可能です。

また、IE11の場合はバージョン情報が“rt”以降に記述されており、他のIEと大きく書式が異なっています。
古いIEでは”msie”以降に記述されています。

サンプルコードの配列に分割する処理では、それぞれ文字列以降のバージョン情報を切り抜いています。

あとはバージョンを取得させればOKです。

Windows10のEdgeのUAを判定する方法

Windows10の標準ブラウザである「Edge」ですがIEの独自機能を持たず、
Chrome、Safari、Firefoxなどのモダンなブラウザと同じ機能を持ったブラウザとして動作しています。

なのでIEのUA判定は使えないので注意が必要です。

// ブラウザのUAを小文字で取得
var userAgent = window.navigator.userAgent.toLowerCase();

// Edgeの判定
if (userAgent.indexOf('edge') != -1) {
  /* Edge. */
  return 'edge';
} else {
  return false;
}

// ブラウザのUAを小文字で取得

var userAgent = window.navigator.userAgent.toLowerCase();

// Edgeの判定

if (userAgent.indexOf('edge') != -1) {

/* Edge. */

return 'edge';

} else {

return false;

}

Edgeだからといって大して意識することなく、
普通にUAの中にはedgeとありますので「Edge」かどうか簡単に判定させることが可能です。

基本的なブラウザのUAを判定するプログラムのまとめ

// ブラウザのUAを小文字で取得
var userAgent = window.navigator.userAgent.toLowerCase();
 
// IEの判定
var isIE = (userAgent.indexOf('msie') >= 0
               || userAgent.indexOf('trident') >= 0);

// IEのバージョンを取得
if (isIE) {
  // 正規表現によりUA文字列を配列に分割
  var arr = /(msie|rv:?)\s?([\d\.]+)/.exec(userAgent);
  version = (arr) ? arr[2] : '';
  
  return 'ie'+version;
} else {

  // IE以外のブラウザ判定
  if (userAgent.indexOf('chrome') != -1) {
    /* Google Chrome. */
    return 'chrome';
  } else if (userAgent.indexOf('firefox') != -1) {
    /* FireFox. */
    return 'firefox';
  } else if (userAgent.indexOf('safari') != -1) {
    /* Safari. */
    return 'safari';
  } else if (userAgent.indexOf('opera') != -1) {
    /* Opera. */
    return 'opera';
  } else if (userAgent.indexOf('edge') != -1) {
    /* Edge. */
    return 'edge';
  } else if (userAgent.indexOf('gecko') != -1) {
    /* Gecko. */
    return 'gecko';
  } else {
    return false;
  }
}

// ブラウザのUAを小文字で取得

var userAgent = window.navigator.userAgent.toLowerCase();

// IEの判定

var isIE = (userAgent.indexOf('msie') >= 0

|| userAgent.indexOf('trident') >= 0);

// IEのバージョンを取得

if (isIE) {

// 正規表現によりUA文字列を配列に分割

var arr = /(msie|rv:?)\s?([\d\.]+)/.exec(userAgent);

version = (arr) ? arr[2] : '';

return 'ie'+version;

} else {

// IE以外のブラウザ判定

if (userAgent.indexOf('chrome') != -1) {

/* Google Chrome. */

return 'chrome';

} else if (userAgent.indexOf('firefox') != -1) {

/* FireFox. */

return 'firefox';

} else if (userAgent.indexOf('safari') != -1) {

/* Safari. */

return 'safari';

} else if (userAgent.indexOf('opera') != -1) {

/* Opera. */

return 'opera';

} else if (userAgent.indexOf('edge') != -1) {

/* Edge. */

return 'edge';

} else if (userAgent.indexOf('gecko') != -1) {

/* Gecko. */

return 'gecko';

} else {

return false;

}

合わせ技で強引に判定させてしまっていますが、一応これでだいたいのブラウザは判定できると思います。

ただ動作検証はしていないので、ご了承下さい。

ブラウザ毎のUA早見表のまとめ

環境や細かいバージョンなど考慮するときりがないので代表的なものだけを抜粋します。

Internet Explorer

IE6

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0;)

IE7

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)

IE8

Mozilla/4.0 (compatible; GoogleToolbar 5.0.2124.2070; Windows 6.0; MSIE 8.0.6001.18241)

IE9

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)

IE10

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)

IE11

Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko

Google Chrome

Google Chrome

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.52 Safari/537.36

FireFox

FireFox

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:9.0.1) Gecko/20100101 Firefox/9.0.1

Safari

Safari

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8) AppleWebKit/536.25 (KHTML, like Gecko) Version/6.0 Safari/536.25

Opera

Opera

Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; ja) Presto/2.10.289 Version/12.00

Edge

Edge

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10162

おまけ

IEで簡単にUserAgentを確認する方法([アドレス] バーに以下を入力)

javascript:alert(navigator.userAgent)

ChromeでUAを偽装する方法(コマンドプロンプトでに以下を入力)

C:¥…¥chrome.exe” –user-agent=“UserAgentの文字列”

この記事を書いた人
最新の記事

よっき

パソコンが大好きな青年。職業はプログラマ／ＳＥ。フリーランスとしてウェブサイトの構築・保守の業務に従事。専門学校とパソコンスクールで講師も担当。幼少期からパソコンが大好きで、趣味がそのまま仕事に転じた。自作PCの魅力に惹かれたのは学生時代の頃。自作PC専門ブログで、お得な情報を紹介しています。

こちらの記事もどうぞ！

JavaScript

記事公開日：2016年2月21日

JavaScriptで簡単にブラウザのUA判定する方法まとめ！バージョンや一覧表示におまけを紹介！

JavaScriptで簡単にブラウザのUA判定する方法まとめ！バージョンや一覧表示におまけを紹介！

userAgent関数によるブラウザ判定

IEのバージョン判定をスクリプトで実装する

IEの互換表示モード利用時のUAの表記に注意

IE11だけUA判定ができない

IE11を含めてUAを判定する方法

Windows10のEdgeのUAを判定する方法

基本的なブラウザのUAを判定するプログラムのまとめ

ブラウザ毎のUA早見表のまとめ

Internet Explorer

Google Chrome

FireFox

Safari

Opera

Edge

おまけ

よっき

最新記事 by よっき (全て見る)

こちらの記事もどうぞ！

コメントを残す