ユーザーのデバイス環境をjavascriptで取得する方法

javascript 2016年8月11日

デバイス毎に柔軟な対応を!

連日の猛暑続き、仕方ないとはいえイヤになりますね！クーラーの効いた室内で働けることに感謝仕切りのDAIMAです。

さて今回は、デバイスやブラウザなど、ユーザーの閲覧環境をjavascriptで取得し、判別して別々の処理を行う方法をご紹介します。

コード解説


$(function(){

  var ua = window.navigator.userAgent.toLowerCase();

  if (ua.indexOf('ipad') != -1) {
  alert('iPadで見ているなッ!');
  }else if(ua.indexOf('iphone') != -1){
  alert('iPhoneで見ているなッ!');
  }else if(ua.indexOf('Android') != -1){
  alert('Androidで見ているなッ!');
  }else{
  alert('iPhone・iPad・Android以外で見ているなッ！');
  };
  });

上記のスクリプトを実行すると、アクセスしたユーザーのデバイスに応じて、 DIOっぽいアラートを返してくれます。

原理は単純で、まずnavigatorオブジェクトから
userAgent（ユーザーエージェント）情報を取得し、変数「ua」に代入。

その変数を対象に、
indexOfメソッドで「ipad」、「iPhone」など特定の
キーワードが含まれているかを調べることで、
デバイスの判別に活用しています。

アラート部分を書きかえれば、デバイスに合わせた個別の処理が可能です。また、上記の例以外でも、indexOf()の引数の中身を変えることで様々な条件での判別に応用可能です。例えば… indexOf(‘firefox’) → ブラウザがfirefoxのケース indexOf(’blackberry’)　→ デバイスがblackberryのケース indexOf(‘msie 9.’) → ブラウザがIE9のケースなどなど、実に細かく判別することが可能です。

私は今回、この処理をタブレット環境への対応のために利用しました。近年は特に多様なデバイスへの対応が求められてますのでここはしっかり押さえておきたいところですね!