android html5 iOS mac windows

UserAgent判定JSライブラリ「UAParser.js」と「Platform.js」の比較

投稿日：2019年5月27日

2019年時点で開発が継続しているUA判定JSライブラリから２つ選択して動作を確認しました。

Webリソースから比較

github比較

GitHub
 
faisalman/ua-parser-js
https://github.com/faisalman/ua-parser-js
UAParser.js - JavaScript library to identify browser, engine, OS, CPU, and device type/model from userAgent string. Supports browser & node.js environment. Also available as jQuery/Zepto plugin...
  • Watch: 110、Start: 3,647、Fork: 625。
  • コントリビュータ: 72名。
  • 最新コミット: 7か月前。
GitHub
 
bestiejs/platform.js
https://github.com/bestiejs/platform.js/
A platform detection library. Contribute to bestiejs/platform.js development by creating an account on GitHub.
  • Watch: 65、Star: 2,391、Fork: 301。
  • コントリビュータ: 18名。
  • 最新コミット1年前。

UAParser.jsに軍配。

NPMリポジトリ比較

npm
 
ua-parser-js
https://www.npmjs.com/package/ua-parser-js
Lightweight JavaScript-based user-agent string parser

週間ダウンロード: 4,300,462、ライセンス: デュアルライセンス(GPL-2.0/ MIT)。
（MITとして採用します ）

npm
 
platform
https://www.npmjs.com/package/platform
A platform detection library that works on nearly all JavaScript platforms.

週間ダウンロード: 666,770、ライセンス: MIT。

こちらもUAParser.jsに軍配。

実際に使用して比較

二つのライブラリを同時に使って使用感を確かめてみます。

検証環境

  • Windows10（Chrome、Firefox、Edge）
  • MacBookPro（Safari）
  • iPhone（Safari）
  • Android（Chrome）

UAParser.js、Platform.jsをインストール

ua-detectディレクトリを作り、npm initだけしてある状態です。

UAParser.jsインストール。0.7.19が入りました。

C:\src\js\ua-detect>npm install ua-parser-js
+ ua-parser-js@0.7.19
added 1 package in 0.667s

Platform.jsインストール。1.3.5が入りました。

C:\src\js\ua-detect>npm install platform
+ platform@1.3.5
added 1 package in 0.753s

検証用コード

単純な検証が目的なので、一枚っぺらのindex.htmlを用意して、node_modules内に入ったJSをリンクするだけにしておきます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="node_modules/ua-parser-js/dist/ua-parser.min.js"></script>
    <script src="node_modules/platform/platform.js"></script>
    <script>
        console.log("ua : ", window.navigator.userAgent);

        let parser = new UAParser();
        console.log("ua-parser-jsの結果-----------------------");
        console.log(JSON.stringify(parser.getResult(), null, 4));

        console.log("platformの結果-----------------------");
        console.log("platform.name : ", platform.name);
        console.log("platform.version : ", platform.version);
        console.log("platform.product : ", platform.product);
        console.log("platform.manufacturer : ", platform.manufacturer);
        console.log("platform.layout : ", platform.layout);
        console.log("platform.os : ", JSON.stringify(platform.os, null, 4));
        console.log("platform.description : ", platform.description);
    </script>
</head>

<body>
    console.logを参照。
</body>

</html>

HTTPサーバにindex.htmlを配置

index.htmlをHTTPサーバ上に置いて様々なブラウザからアクセスしてみます。http-serverコマンドでHTTPサーバを立ち上げています。

インストール
C:\src\js\ua-detect> npm install http-server -g

コマンドを打ったディレクトリをドキュメントルートにしてHTTPサーバ起動
C:\src\js\ua-detect> http-server

検証開始

PC版Chrome

Windows10のChromeからアクセスした結果。
（開発者ツールコンソールにダンプされた内容）

ua :  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36
ua-parser-jsの結果-----------------------
{
    "ua": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36",
    "browser": {
        "name": "Chrome",
        "version": "74.0.3729.169",
        "major": "74"
    },
    "engine": {
        "name": "WebKit",
        "version": "537.36"
    },
    "os": {
        "name": "Windows",
        "version": "10"
    },
    "device": {},
    "cpu": {
        "architecture": "amd64"
    }
}
platformの結果-----------------------
platform.name :  Chrome
platform.version :  74.0.3729.169
platform.product :  null
platform.manufacturer :  null
platform.layout :  Blink
platform.os :  {
    "architecture": 64,
    "family": "Windows",
    "version": "10"
}
platform.description :  Chrome 74.0.3729.169 on Windows 10 64-bit

レンダリングエンジンの判定結果がUAParser.jsはWebKit、platform.jsはBlinkと差があります。Chromeはバージョン28からWebkit → Blinkとしてブランチした為platform.jsが正解です。

Blinkに変わってもUA文字列は変わっていないのでUAParser.jsはそのままWebkitと出しているようです。platform.jsはどうやってBlinkだと判断しているのでしょうか、ソースを見てみると

      // Use the full Chrome version when available.
      data[1] = (/\bChrome\/([\d.]+)/i.exec(ua) || 0)[1];
      // Detect Blink layout engine.
      if (data[0] == 537.36 && data[2] == 537.36 && parseFloat(data[1]) >= 28 && layout == 'WebKit') {
        layout = ['Blink'];
      }

Chrome28以上でWebkitと書かれていてバージョンが537.36だったらBlinkと見做す判定式が入っていました。アドホックな涙ぐましい努力です。そこまでしてBlinkかどうかを知りたいケースは一般的なWeb屋さんにはないかもですが・・・。

PC版Firefox

Windows10のFirefoxからアクセスした結果。 

ua :  Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0
ua-parser-jsの結果-----------------------
{
    "ua": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0",
    "browser": {
        "name": "Firefox",
        "version": "66.0",
        "major": "66"
    },
    "engine": {
        "name": "Gecko",
        "version": "66.0"
    },
    "os": {
        "name": "Windows",
        "version": "10"
    },
    "device": {},
    "cpu": {
        "architecture": "amd64"
    }
}
platformの結果-----------------------
platform.name :  Firefox
platform.version :  66.0
platform.product :  null
platform.manufacturer :  null
platform.layout :  Gecko
platform.os :  {
    "architecture": 64,
    "family": "Windows",
    "version": "10"
}
platform.description :  Firefox 66.0 on Windows 10 64-bit

判定結果に差はありませんでした。

PC版Edge

Windows10のEdgeからアクセスした結果。 

ua :  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134
ua-parser-jsの結果-----------------------
{
    "ua": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134",
    "browser": {
        "name": "Edge",
        "version": "17.17134",
        "major": "17"
    },
    "engine": {
        "name": "EdgeHTML",
        "version": "17.17134"
    },
    "os": {
        "name": "Windows",
        "version": "10"
    },
    "device": {},
    "cpu": {
        "architecture": "amd64"
    }
}
platformの結果-----------------------
platform.name :  Microsoft Edge
platform.version :  17.17134
platform.product : null
platform.manufacturer : null
platform.layout :  EdgeHTML
platform.os :  {
    "architecture": 64,
    "family": "Windows",
    "version": "10"
}
platform.description :  Microsoft Edge 17.17134 on Windows 10 64-bit

こちらも判定結果に差はありませんでした。
「Trident」という文字が見当たらないだけで気分が良くなるのは私だけでは無いと思います。

PC版Safari

MacBookProのSafariからアクセスした結果。

ua : "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Safari/605.1.15"
ua-parser-jsの結果-----------------------
{
    "ua": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Safari/605.1.15",
    "browser": {
        "name": "Safari",
        "version": "12.1",
        "major": "12"
    },
    "engine": {
        "name": "WebKit",
        "version": "605.1.15"
    },
    "os": {
        "name": "Mac OS",
        "version": "10.14.4"
    },
    "device": {},
    "cpu": {}
}
platformの結果-----------------------
platform.name :  "Safari"
platform.version :  "12.1"
platform.product :  null
platform.manufacturer :  null
platform.layout :  – "WebKit"
platform.os :  "{
    "architecture\": 32,
    "family": "OS X",
    "version": "10.14.4"
}" 
platform.description :  "Safari 12.1 on OS X 10.14.4"

本物のWebkitです。判定結果に差はありませんが、CPU情報が取れなくなりました。 ブラウザ上でCPUを知りたいケースも余りないので問題は無いです。

しかし64ビットCPUなのにplatform.jsの方は何故か32ビットと出てしまっています。UAParser.jsの方は空、MacOSだから言うまでもないってことでしょうか。

iOS版Safari

iPhone6のSafariからアクセスした結果。 

ua : "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Mobile/15E148 Safari/604.1" 
ua-parser-jsの結果-----------------------
{
    "ua": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Mobile/15E148 Safari/604.1",
    "browser": {
        "name": "Mobile Safari",
        "version": "12.1",
        "major": "12"
    },
    "engine": {
        "name": "WebKit",
        "version": "605.1.15"
    },
    "os": {
        "name": "iOS",
        "version": "12.2"
    },
    "device": {
        "vendor": "Apple",
        "model": "iPhone",
        "type": "mobile"
    },
    "cpu": {}
}
platformの結果-----------------------
platform.name :  "Safari
"
platform.version :  "12.1" 
platform.product :  "iPhone" 
platform.manufacturer :  "Apple" 
platform.layout :  "WebKit" 
platform.os :  "{
    "architecture": 32,
    "family": "iOS",
    "version": "12.2"
}" 
platform.description :  "Safari 12.1 on Apple iPhone (iOS 12.2)"

スマホになるとdeviceやproductに情報が入ります。ここらへんの有無でモバイルかPCかを判定出来そうです。

CPU情報は取れず、platform.jsさんはまた32bitだと勘違いをされております。

Android版Chrome

Android7のChromeからアクセスした結果。

ua :  Mozilla/5.0 (Linux; Android 7.1.1; HTV33) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.90 Mobile Safari/537.36
ua-parser-jsの結果-----------------------
{
    "ua": "Mozilla/5.0 (Linux; Android 7.1.1; HTV33) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.90 Mobile Safari/537.36",
    "browser": {
        "name": "Chrome",
        "version": "73.0.3683.90",
        "major": "73"
    },
    "engine": {
        "name": "WebKit",
        "version": "537.36"
    },
    "os": {
        "name": "Android",
        "version": "7.1.1"
    },
    "device": {
        "type": "mobile"
    },
    "cpu": {}
}
platformの結果-----------------------
platform.name :  Chrome Mobile
platform.version :  73.0.3683.90
platform.product :  null
platform.manufacturer :  null
platform.layout :  Blink
platform.os :  {
    "architecture": 32,
    "family": "Android",
    "version": "7.1.1"
}
platform.description :  Chrome Mobile 73.0.3683.90 on Android 7.1.1

スマホデバイス情報からiPhoneでは出ていたvendor、modelが消え、mobileであることしか分かりません。Android端末はベンダが複数ですからまぁブラウザからは取れないでしょう。無くても困りませんしノープロブレムです。

結論

ブラウザ判定において、マストで欲しい情報は以下の4つかと思います。

  • ブラウザ名
  • ブラウザバージョン
  • OS名
  • OSバージョン

これらに関しては両ライブラリとも取れる情報は同じで問題なく使えそうであることが分かりました。が今回の比較では、

  1. 使い勝手の良さ
  2. 普及度、使用実績
  3. コントリビュータ数の多さ

を選定理由としてUAParser.jsを選択したいと思います。Blinkを判定しなければならないケースではPlatform.jsも選択肢に入るのかも。

-android, html5, iOS, mac, windows

執筆者：

関連記事

IndexedDBにblob保存されたPDFファイルを外部アプリに頼らずにJavascriptで表示（後編）

目次1 はじめに2 ビューワ機能を提供してくれるnpmモジュールを選別する3 実装開始3.1 ng2-pdfjs-viewerを使えるようにする3.2 PDFビューワコンポーネントを作る3.3 Hom …

ブラウザから起動したカメラの撮影画像をjavascriptで圧縮【Compressor.js】

「モバイル用Webアプリで撮影したカメラ画像のファイルサイズが大きすぎる・・・」 そんな悩みは無いですか？ 昨今カメラ会社の経営が傾くほどスマホのカメラ性能が向上、それに応じて年々ファイルサイズも増大 …

キャッシュされているはずのServiceWorker資源にオフラインアクセス出来ない（Workbox + ionicons）

そのHTTPリクエストしたファイル資源、ひょっとしてURLパラメータついてたりしませんか？ 目次1 事象2 原因3 対処 事象 ionic3（SPA）でWorkboxを使ったServiceWorker …

【タップするだけ】インスタグラム、twitterのプロフィール画像を簡単に拡大表示する方法（iPhone、Android）

インスタのプロフィール画像って小さくてよく見えないですよね・・・。 インスタに限らず「何が写ってるのかスマホ画面を拡大して見たいな」という時は「設定」から「アクセシビリティ」を設定することで拡大表示機 …

Stripe + Javaでオーソリ（与信の確保）を実装する

Stripeでチャリンチャリン、サービスを開発するエンジニアにとっては夢がありますよね。 例え自分で個人的に売るものが無かったとしても、Web決済システムを構築できるノウハウを持っておけば、公的な仕事 …

PREV
SNS他Webサービスの情報流出、セキュリティ事故に巻き込まれたかどうか調べる
NEXT
IndexedDBにストアしたオブジェクトのキー値を部分的に更新する

2024/11/03

AngularアプリをPlaywright、 Jestテストし、カバレッジをマージする（V8編）

2024/10/05

AngularアプリをPlaywrightテストしてカバレッジを計測する（webpack + istanbul編）

2022/01/28

Angular11から12にアップデートしたらng serveがproductionモードで起動するようになってしまう

2021/12/08

podman + docker-comopseでwordpressを起動

2021/12/04

podmanをdockerとして使う

プロフィール

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯技術者として楽しく生きることを目指しています。デスマに負けず健康第一。

 

カテゴリー

アーカイブ