スマートフォン、タブレット、ウェアラブルデバイス、スマート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%カンペキではないですが、便利なライブラリはうまく活用していきましょう！
最終更新日: 2024-08-23