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

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

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


## ソースコード
ちなみにおいらのコードはとても汚いです。
Githubにも置いておきますね → [Github - UserAgentChecker.js](https://github.com/mtskf/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に登録する予定。)

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

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

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


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

```js
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)
```