search
LoginSignup
61

More than 3 years have passed since last update.

posted at

updated at

userAgentでブラウザ&デバイス判別 2017年版

ブラウザのUserAgentを調べて、ユーザーのブラウザ名・バージョン・デバイスの種類を判定するJavaScriptライブラリをアップデートしました。CSSでの場合分けに使えるように、Modernizrっぽく <html> タグのクラス名に判定結果が追加されるようにしてみました。

よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。

ソースコード

ちなみにおいらのコードはとても汚いです。
Githubにも置いておきますね → Github - UserAgentChecker.js

// -------------------------------------------------------------------------------
// User Agent Checker
// -------------------------------------------------------------------------------

+(function() {

    window._uac = {}; // define _uac as a global object
    var ua = window.navigator.userAgent.toLowerCase();
    var ver = window.navigator.appVersion.toLowerCase();

    // check browser version
    _uac.browser = (function(){
            if (ua.indexOf('edge') !== -1) return 'edge';                           // Edge
            else if (ua.indexOf("iemobile") !== -1)      return 'iemobile';         // ieMobile
            else if (ua.indexOf('trident/7') !== -1)     return 'ie11';             // ie11
            else if (ua.indexOf("msie") !== -1 && ua.indexOf('opera') === -1){
                    if      (ver.indexOf("msie 6.")  !== -1) return 'ie6';              // ie6
                    else if (ver.indexOf("msie 7.")  !== -1) return 'ie7';              // ie7
                    else if (ver.indexOf("msie 8.")  !== -1) return 'ie8';              // ie8
                    else if (ver.indexOf("msie 9.")  !== -1) return 'ie9';              // ie9
                    else if (ver.indexOf("msie 10.") !== -1) return 'ie10';             // ie10
            }
            else if (ua.indexOf('chrome')  !== -1 && ua.indexOf('edge') === -1)   return 'chrome';    // Chrome
            else if (ua.indexOf('safari')  !== -1 && ua.indexOf('chrome') === -1) return 'safari';    // Safari
            else if (ua.indexOf('opera')   !== -1) return 'opera';                  // Opera
            else if (ua.indexOf('firefox') !== -1) return 'firefox';                // FIrefox
            else return 'unknown_browser';
    })();

    // check device
    _uac.device = (function(){
            if(ua.indexOf('iphone') !== -1 || ua.indexOf('ipod') !== -1 ) return 'iphone';
            else if (ua.indexOf('ipad')    !== -1) return 'ipad';
            else if (ua.indexOf('android') !== -1) return 'android';
            else if (ua.indexOf('windows') !== -1 && ua.indexOf('phone') !== -1) return 'windows_phone';
            else return '';
    })();

    // check ios version
    _uac.iosVer = (function(){
            if ( /iP(hone|od|ad)/.test( navigator.platform ) ) {
                    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
                    var versions = [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
                    return versions[0];
            }
            else return 0;
    })();
  _uac.isIE = (_uac.browser.substr(0, 2) === 'ie' && _uac.browser !== 'iemobile');
    _uac.isiOS = (_uac.device === 'iphone' || _uac.device === 'ipad');
    _uac.isMobile = (ua.indexOf('mobi') !== -1 || _uac.device === 'iphone' || (_uac.device === 'windows_phone' && ua.indexOf('wpdesktop') === -1) || _uac.device === 'iemobile');
    _uac.isTablet = (_uac.device === 'ipad' || (_uac.device === 'android' && !_uac.isMobile));
    _uac.isTouch  = ('ontouchstart' in window);
    _uac.isModern = !(_uac.browser === 'ie6' || _uac.browser === 'ie7' || _uac.browser === 'ie8' || _uac.browser === 'ie9' || (0 < _uac.iosVer && _uac.iosVer < 8));

    // Set the results as class names of the html
    var homeClass = function() {
        var classStr = ' ';
        classStr += (_uac.browser !== '') ? _uac.browser + " " : 'browser-unknown ',
        classStr += (_uac.device  !== '') ? _uac.device + " "  : 'device-unknown ',
        classStr += (_uac.isMobile) ? 'mobile ' : 'desktop ',
        classStr += (_uac.isTouch) ? 'touch '  : 'mouse ',
    classStr += (_uac.isiOS) ? 'ios ' : '',
    classStr += (_uac.isIE) ? 'ie ' : '',
        classStr += (_uac.isModern) ? 'modern ' : 'old ';
    return classStr;
    };

  document.addEventListener('DOMContentLoaded', function() {
    document.documentElement.className += homeClass();
  });

})();

使い方

userAgentChecker.js または userAgentChecker.min.js をHTMLにインポートしたり、requireJSしてどうぞ。(暇があればcdnjsに登録する予定。)

<script type="text/javascript" src="/path/to/userAgentChecker.min.js"></script>

HTMLタグのクラスに自動で結果が付け加えられます。こんな風に。

<html class="safari iphone mobile touch modern ">

JSコードで判定結果を使いたい場合は、グローバルオブジェクトの_uacでアクセスできます。

console.log(_uac.browser);      // returns browser name - ie. chrome, safari, ie10, edge, iemobile, etc.
console.log(_uac.device);       // returns device name  - ie. iphone, ipad, android, windows_phone
console.log(_uac.isIE);         // returns if it's IE (boolean)
console.log(_uac.isiOS);        // returns if it's ios (boolean)
console.log(_uac.isMobile);     // returns if it's a mobile device (boolean)
console.log(_uac.isTablet);     // returns if it's a tablet device (boolean)
console.log(_uac.isTouch);      // returns if it's a touch device (boolean)
console.log(_uac.isModern);     // returns if it's a modern browser (boolean)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
61