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

執筆者：

関連記事

hidden.inとSoftEtherで無料のビデオ会議環境を構築する

自粛が続いて会えない人も多くなり、人との交流が恋しくなりますね。 仕事ではミーティングをオンライン化するニーズが増え、以下メジャーなパブリックサービスを使っている人も増えていると思います。 Skype …

Android操作動画をGIF画像化する（Windows編）

Web上のスマホ操作説明に動画を入れ、直感的で分かり易くしたいことがあります。 Android + Windows環境かつ無料で行う場合は「AZ スクリーンレコーダー」と「openAVItoGIF」の …

History APIを使ってIonic（3以前のSPA）でブラウザの戻るボタンやAndroidバックキーを押すと前サイトに戻ってしまう件に対応する

Ionic2や3ではまだAngular Routerを採用していなかったので、ページ遷移をしてもブラウザ履歴が積まれず、Androidのバックキーやブラウザの戻るボタンを押すとサイトに入ってくる前のペ …

adb devicesコマンドでAndroid端末を認識しない

目次1 事象2 原因3 解決 事象 USB接続するAndroidによって以下のエラーが出たりします。 C:\src\ionic\awsomeapp>adb devices List of dev …

Stripe＋Java＋Payment Request APIでApple Pay、Google Payを使ったテストWeb決済をしてみる

自分で作ったサービスを運用してチャリンチャリンしたい・・・エンジニアならこんな夢、一度は見たことがあるんじゃないでしょうか。 夢を実現する為、以前Stripeのcheckout.jsを使ったテストWe …

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

2022/01/28

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

2021/12/08

podman + docker-comopseでwordpressを起動

2021/12/04

podmanをdockerとして使う

2021/11/28

podmanとNode.js公式コンテナイメージでnodeコマンドを使う

2020/10/10

Android、iPhoneが向いている方向をWeb地図上で表現してみる（leaflet.js使用）

プロフィール

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯現役技術者を目指しています。健康第一。

 

カテゴリー

アーカイブ