デバイス判別をする便利ライブラリ UAParser.js

2023-06-05
UAParser.js logo

スマートフォン、タブレット、ウェアラブルデバイス、スマートTVなどの普及で、Webコンテンツを閲覧するデバイスが多種多様になってきました。
デバイスのOSやブラウザなど様々な情報は、UserAgent文字列から判別できますが、非常に複雑になっているので、ライブラリを使うのが便利です。

公式サイト
https://github.com/faisalman/ua-parser-js

動作サンプル(CodePen)

各種情報を表示しています。スマートフォンなど各デバイスで確認ください。

コード解説

HTMLへのロードは、CDNを使うのが便利です。JSDeliverのサイトからコピペします。

JSDeliver
https://www.jsdelivr.com/package/npm/ua-parser-js

HTML
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@1.0.35/src/ua-parser.min.js"></script>

主として取得できる項目は、以下の５つです。

  • ブラウザ情報
  • デバイス情報
  • ブラウザエンジン情報
  • OS情報
  • CPU情報
JavaScript
//宣言
const ua = new UAParser();

//ブラウザ情報取得
ua.getBrowser();
// {name: 'Chrome', version: '113.0.0.0', major: '113'}

//デバイス情報取得
ua.getDevice();
// {vendor: undefined, model: undefined, type: undefined}
// 取得できないことも多い

//ブラウザエンジン情報取得
ua.getEngine();
// {name: 'Blink', version: '113.0.0.0'}

//OS情報取得
ua.getOS();
// {name: 'Windows', version: '10'}

注意点

現状、気づいている注意点です。

  • ブラウザ名、OS名はほぼ正確な情報が取得できます。
  • OSのバージョンは、Windows11でも10となるので、あてになりません。
    • Android13も10と表示されていました。
    • （これらはバグではなく仕様）
  • デバイス名は、ほぼ取得できないと考えたほうがよさそうです。

使用例

OSによる切り分け

JavaScript
const ua = new UAParser();
switch(ua.getOS().name){
  case 'Android':
    //Android
  break;
  case 'iOS':
    //iOS
  break;
  case 'Windows':
    //Windows
  break;
  case 'Mac OS':
    //Mac OS
  break;
  default:
    //Others
  break;
}

端末サイズによる切り分け

JavaScript
const ua = new UAParser();
switch(ua.getDevice().type){
  case 'mobile':
    //モバイル端末
  break;
  case 'tablet':
    //タブレット端末
  break;
  case 'smarttv':
    //スマートTV
  break;
  case 'wearable':
    //ウェアラブル端末
  break;
  default:
    //その他端末（主としてPC）
  break;
}

2021年マルウェア混入の件

Googleで「UAParser」を検索すると、2021年に「マルウェアが混入した」という事件が検索結果にたくさん出てきます。

  • マルウェアが混入したのはnpmのパッケージで、この記事で紹介したCDNからのロードの場合は関係ない
  • （当たり前ですが）作者の故意ではなくすぐ対策もされた

以上の理由から、現在このライブラリを使用することは「問題ない」と判断しています。

100%カンペキではないですが、便利なライブラリはうまく活用していきましょう！

関連記事