スポンサードリンク


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

    UA判定 方法

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

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

     

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

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

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

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

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

     

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

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

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

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

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

     

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

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

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

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

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

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

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

     

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

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

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

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

     

    IE11だけUA判定ができない

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

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

     

    スポンサードリンク

     

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

     

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

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

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

     

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

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

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

     

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

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

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

     

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

     

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

     

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

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

     

    ブラウザ毎の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の文字列”
      The following two tabs change content below.
      よっき
      パソコンが大好きな青年。職業はプログラマ。 幼少期からパソコンが好きで、趣味がそのまま仕事になりました。 主にウェブ系コンテンツの開発が中心です。 自作PCの魅力に惹かれたのは学生時代の頃で、現在に至ります。 自作PC専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

      スポンサードリンク


      コメントを残す




      *

      このページの先頭へ