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

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

連日の猛暑続き、仕方ないとはいえイヤになりますね! クーラーの効いた室内で働けることに感謝仕切りの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のケース などなど、実に細かく判別することが可能です。

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