• 作成日:

ユーザーエージェントを判定し、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() {
  var ua = navigator.userAgent;
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にどんなクラスがついているか確認してみましょう。例えばぼくのサイトの場合、3つのクラスがついていました。

クラスを見ると、パソコンの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', 'ヒラギノ角ゴ ProN W3', sans-serif;}

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


さいごに…

画面サイズの条件分岐だけではなく、ユーザーエージェントを使った条件分岐ができれば、もっと細かい設定ができるようになります。例としてフォントの変更をしましたが、それ以外にもスマホのときは表示させない設定やアニメーションの動きをパソコンとスマホで分けることもできます。

コピペで簡単にできる設定なのでぜひ試してみてください。

 

参考サイト
デバイスとブラウザ情報をjavascriptで取得して、bodyにクラスとして付与するコード