android html5 iOS mac windows

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

投稿日：2019年5月27日 更新日：

（私はUAParser.jsを使っています）

ネットを探すとUA文字列を解析してブラウザ判定をするコードが一杯出てきます。

でもUA解析プログラムを自前で作ってシステムに組み込むとなると、新しいブラウザがリリースされた時とか、レンダリングエンジンが変わる際にUAも変わって再考しなきゃいけくなるんじゃ・・・とか気になってきます。

仕事でやるにしては実利が低いコードを一生懸命考える時間があるなら本来の製造に時間を費やしたいのが本音ですから、同目的のライブラリを採用して判定した方が時間の節約が出来ます。新しいブラウザが出てきたらライブラリもバージョンアップしてくれるでしょうしね。

沢山ある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サーバを立ち上げています。

「npm install http-server -g」で簡単に入ります。

インストール
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の方は結果がJSONなので扱い易い印象です。

レンダリングエンジンの判定結果が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と見做す判定式が入っていました。アドホックな涙ぐましい努力ですね。（537.36を判定するロジックって結構見るのですが、これもし変わったらどうするんでしょうね？）

そこまでしてBlinkかどうかを知りたいケースって・・・私は無いです。platform.jsさん、折角Blinkと正解を出しているのにあまりグッと来ませんでした。頑張ってるのにすみません。

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の方は潔く空にしています。誤った情報になるなら空の方がいいですね。

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

執筆者：

関連記事

Android+ChromeでlocalhostアクセスしてPCサーバへPort Forward（Fwdアプリ使用）

昨今はプライバシーの侵害防止、セキュリティ観点から、HTTPS環境下でないと使えないHTML5 APIが増えました。 反してAndroid7でオレオレ証明書に関する仕様が変わり、Android6だった …

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

前回Javascriptでコンパス機能を実装して、Android、iPhoneの背面が向いている方角が数値（0～360：0が北）で分かるようになりました。 One IT Thing  8 P …

Angular、React、VueのDL数をnpmtrends.comで調べる

目次1 対象読者2 3つの内どれを選ぶべきか3 npmtrends.comについて4 比較結果5 それぞれの長所6 で、どれを採用するべきか 対象読者 これからフロントエンドの勉強をしようと考えている …

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

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

Apple PayのWeb決済を開発する為にSandboxテスターを作ってiPhoneに設定

Web上でApple Pay支払いが出来るサービスが増えていますね。 決済にApple Payが使えるシステムにしておけば、PayPalよりもエンゲージ率は高くなるはずです。 自分が開発しているWeb …

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
 

東京在勤、職歴2n年中年ITエンジニアです。まだ開発現場で頑張っています。

19歳（1996年）から書き始めたアウトプット用プライベートWeb日記数が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけど仲間が居なくて孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。

カテゴリー

アーカイブ