最終更新日：2023.01.04

ユーザーエージェントを判定し、bodyに特定のクラスをつける方法【jQuery】

サイトを制作するときにWindowsとMac、AndroidとiPhoneなど、OSや機種によって処理を変更することがありますよね。今回はjQueryでユーザーエージェントを判定して、bodyに特定のクラスをつける方法を紹介します。

ユーザーエージェントで判定する内容は以下のとおり

WindowsかMacか判定
ChromeやIE、Safariなどブラウザを判定
パソコン、タブレット、スマホを判定
AndroidかiPhone、iPadか判定

この記事の目次

UserAgentを判定し、bodyに特定のクラスをつける

jQueryを使ってUserAgentを判定させるので、jQueyの読み込みは忘れないようにしましょう。あとはuserAgent.jsというファイルを作って同じように読み込ませます。このファイルは今の段階では何も書かれてなくてOKです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="path/to/userAgent.js"></script>

次に以下のコードをuserAgent.jsにコピペします。

var ua = navigator.userAgent.toLowerCase();
var ver = navigator.appVersion.toLowerCase();

// IE(11以外)
var isMSIE = (ua.indexOf('msie') > -1) && (ua.indexOf('opera') == -1);
// IE6
var isIE6 = isMSIE && (ver.indexOf('msie 6.') > -1);
// IE7
var isIE7 = isMSIE && (ver.indexOf('msie 7.') > -1);
// IE8
var isIE8 = isMSIE && (ver.indexOf('msie 8.') > -1);
// IE9
var isIE9 = isMSIE && (ver.indexOf('msie 9.') > -1);
// IE10
var isIE10 = isMSIE && (ver.indexOf('msie 10.') > -1);
// IE11
var isIE11 = (ua.indexOf('trident/7') > -1);
// IE
var isIE = isMSIE || isIE11;
// Edge
var isEdge = (ua.indexOf('edge') > -1);
 
// Google Chrome
var isChrome = (ua.indexOf('chrome') > -1) && (ua.indexOf('edge') == -1);
// Firefox
var isFirefox = (ua.indexOf('firefox') > -1);
// Safari
var isSafari = (ua.indexOf('safari') > -1) && (ua.indexOf('chrome') == -1);
// Opera
var isOpera = (ua.indexOf('opera') > -1);
 
$(function() {
  if (isOpera) {
  //オペラならつけるクラス
    $("body").addClass("js_isOpera");
  } else if (isIE) {
  //IEならつけるクラス
    $("body").addClass("js_isIe");
  } else if (isChrome) {
  //Chromeならつけるクラス
    $("body").addClass("js_isChrome");
  } else if (isSafari) {
  //Safariならつけるクラス
    $("body").addClass("js_isSafari");
  } else if (isEdge) {
  //Edgeならつけるクラス
    $("body").addClass("js_isEdge");
  } else if (isFirefox) {
  //Firefoxならつけるクラス
    $("body").addClass("js_isFirefox");
  } else {
    return false;
  }
});
 
  //デバイス判定
  var _ua = (function(u){
  return {
    Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1)
      || u.indexOf("ipad") != -1
      || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
      || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
      || u.indexOf("kindle") != -1
      || u.indexOf("silk") != -1
      || u.indexOf("playbook") != -1,
    Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
      || u.indexOf("iphone") != -1
      || u.indexOf("ipod") != -1
      || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
      || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
      || u.indexOf("blackberry") != -1
  }
})(window.navigator.userAgent.toLowerCase());
 
$(function() {
  if(_ua.Mobile){
  //スマホならつけるクラス
  　$('body').addClass("js_isMobile");
  }else if(_ua.Tablet){
  //タブレットならつけるクラス
  　$('body').addClass("js_isTablet");
  }else{
  //スマホ・タブレット以外ならつけるクラス
  　$('body').addClass("js_isPc");
  }
});

if(navigator.platform.indexOf("Win") != -1){
//Windowsならつけるクラス  
$('body').addClass('js_isWin');
}else{
//Windows以外ならつけるクラス 
  $('body').addClass('js_isNotWin');
}

$(function() {
if( ua.indexOf('iphone') > 0 ) {
//iPhoneならつけるクラス 
$('body').addClass('iphone');
} else if( ua.indexOf('android') > 0 && ua.indexOf('mobile') > 0 ) {
//Andoroidのスマホならつけるクラス 
$('body').addClass('android');
} else if( ua.indexOf('ipad') > 0 ) {
//iPadならつけるクラス 
$('body').addClass('ipad');
} 
});

userAgent.jsへコピペができたら、さっそくbodyにどんなクラスがついているか確認してみましょう。例えばぼくのサイトの場合、３つのクラスがついていました。

クラスを見ると、PC画面でWindowsのChromeで使っていることがわかります。

特定のクラスを使って、フォントを変更する

それでは実際にこのクラスを使ってフォントを設定してみます。例として、iPhoneはヒラギノ角ゴ、AndoroidはgooglefontのNoto Sans Japanese、それ以外は游ゴシックにしてみましょう。

まずjQueryで特定のクラスがあるか調べて、フォントを定義したクラスを付与します。

$(function() {
	var $body = $('body');
	if($body.hasClass('iPhone')){//iPhoneなら
			$body.addClass('macFont');		
	} else if($body.hasClass('Android')){//Androidなら
			$body.addClass('wf-notosansjapanese');		
	} else {//それ以外
	    $body.addClass('winFont');
	}
});

CSSに書くフォントの定義はこちら

/* googlefontからインポート */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

.wf-notosansjapanese { 
      font-family: 'Noto Sans Japanese';}

.macFont {
       font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;}

.winFont {
      font-family: 'Yu Gothic', '游ゴシック', sans-serif;}