近年、スマートフォンやタブレット、ウェアラブルデバイス、スマートTVなどが普及し、Webコンテンツを閲覧するデバイスも多種多様になってきました。
デバイスのOSやブラウザなど様々な情報は、ブラウザが送信するUserAgent文字列から、ある程度の判別をすることができます。
ここでは、UserAgent文字列を活用する際に便利なライブラリ「UAParserJS」をご紹介します。
公式サイト: https://uaparser.dev/
GitHub: https://github.com/faisalman/ua-parser-js
動作サンプル
各種情報を表示しています。スマートフォンなどさまざまなデバイスでアクセスして確認してみてください。
UAParserJSのバージョン2以降について
2024年に登場したUAParserJSのバージョン 2はClient HintsやBot検出などの機能が追加された大規模バージョンアップで、検出面がより強化されています。
その一方で、ライセンスがMITからAGPL (もしくは有償のPROライセンス) に変更されています。ソースコードを公開しない運用など、プロジェクト方針によってはPROライセンスを検討する必要もあるかもしれません1。
このページでは従来どおりにMITライセンスで公開されている1.0.x(v0.7.x)系について解説しています。
導入方法
npmでインストールする方法
npmで簡単に導入することができます。次のように実行するとバージョン1系の最新バージョンがインストールされます。
npm install ua-parser-js@^1CDNを使う方法
CDNを使用する場合は、公式サイトで案内されている jsDelivr を使うとよいでしょう。HTMLファイルにコピーアンドペーストすれば、簡単に導入できます。
jsDelivr https://www.jsdelivr.com/package/npm/ua-parser-js
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@1.0.41/src/ua-parser.min.js"></script>使用例
取得できる項目として、主に以下のようなものがあります。
- ブラウザ名
- OSの種類
- 大まかなデバイスのカテゴリ(モバイル/タブレット/デスクトップ)
- CPUの情報
また、UAParserのドキュメントにはブラウザ・OSなどのリストがあります2。
const ua = new UAParser();
//ブラウザ情報取得
ua.getBrowser(); // {name: 'Chrome', version: '138.0.0.0', major: '138'}
//デバイス情報取得
ua.getDevice(); // {vendor: undefined, model: undefined, type: undefined}
//ブラウザエンジン情報取得
ua.getEngine(); // {name: 'Blink', version: '138.0.0.0'}
//OS情報取得
ua.getOS(); // {name: 'Windows', version: '10'}
//CPU情報取得
ua.getCPU(); // {architecture: 'amd64'}OSによる切り分けの例
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;
}端末カテゴリによる切り分けの例
const ua = new UAParser();
switch(ua.getDevice().type) {
case 'mobile':
//モバイル端末
break;
case 'tablet':
//タブレット端末
break;
case 'smarttv':
//スマートTV
break;
case 'wearable':
//ウェアラブル端末
break;
default:
//その他端末
break;
}Q&A
精度と使いどころは?
UA文字列による判別の精度はどの程度でしょうか。
近年ではUA文字列には端末の機種名や、細かいOSのバージョンなどの情報は含まれないことが多く、また、UA文字列は偽装可能な情報でもあるため、おおまかな情報を把握する手段として活用するのがよいでしょう。
たとえば、Windows 11でアクセスしても、UA上はWindows NT 10.0とするブラウザが多いです。このような細かいバージョン差に対応するためには、他の手段を活用する必要があります。
どのような場面で活用するとよいでしょうか。
従来から、アクセス解析・ログ分析のほか、OSやブラウザの既知の仕様差に対するワークアラウンド(応急的な処置)に用いられることが多いです。
また、厳密な判定やセキュリティ用途には不向きな一方、「OS・ブラウザごとに案内を変える」などといった案内・調整用途で活用されることが多いです。
2021年10月のマルウェア混入事件について
2021年にマルウェアが混入されたという件が気になっています。
2021年10月に、 npm の配布パッケージが一時的にマルウェアが混入してしまった事件がありましたが、現在公開されているバージョンを利用する限り、この問題には該当しません。
作者とコミュニティは数時間でこの問題に気付き、問題のあったバージョンは削除され、配信されていません3。
さいごに
- UAParser.js は UA文字列を解読して、 ブラウザ名やOSの種類、デバイスのカテゴリなどを知ることができるライブラリです
- UA文字列は、アクセス解析やログ目的、OSやデバイスごとに、案内を変更したりUIを調整したりといったおおまかな判定に役立ちます
- バージョン2系では、より詳細かつ正確な情報を取得できるようになっていますが、従来のものとはライセンスが異なるため注意が必要です
UA文字列は万能ではないものの、役立つシーンはたくさんあります！
100%カンペキではないですが、便利なライブラリをうまく活用していきましょう！
- Version 2.0 Will Be Released Under AGPLv3 · faisalman/ua-parser-js · Discussion #674 · GitHub ↩︎
- GitHub – faisalman/ua-parser-js at 1.0.x ↩︎
- Embedded malware in ua-parser-js · GHSA-pjwm-rvh2-c87w · GitHub Advisory Database · GitHub ↩︎
最終更新日: 2025-09-03