One IT Thing

IT業界を楽しむ為の学習系雑記

android html5 iOS mac windows

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

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

(私はUAParser.jsを使っています)

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

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

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

沢山あるUA判定JSライブラリの中、ここ数年開発が継続しているライブラリから二つを候補に挙げました。比較してどちらを採用するか決めていきます。

Webリソースから比較

github比較

  • Watch: 110、Start: 3,647、Fork: 625。
  • コントリビュータ: 72名。
  • 最新コミット: 7か月前。
  • Watch: 65、Star: 2,391、Fork: 301。
  • コントリビュータ: 18名。
  • 最新コミット1年前。

UAParser.jsに軍配。

NPMリポジトリ比較

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

週間ダウンロード: 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からSQLiteのDBファイルを取り出す方法をAndroidソースから調べる

AndroidからDBファイルを取り出し、PCに持ってきて、「PupSQLite」や「DB Browser for SQLite」などのツールで内容を確認出来るようにします。 コマンドラインで自動取得 …

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

目次1 はじめに2 検証環境3 Ionicプロジェクト作成4 PDFダウンロード、IndexedDB保存を実装5 実行してみる はじめに PDFをHTTPダウンロードするとHDDに保存されるか、外部ビ …

Android操作動画をGIF画像化する(Windows編)

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

LANに接続しているPCをWindowsから見つける

家庭内LANでNASのIPアドレスを忘れたので調べたい職場LANに接続中のホストを調べたい NetEnumを入れられれば取れる情報も多く、ポートスキャンやパケットキャプチャも出来て幸せになれます。 単 …

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

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


shingo nakanishi。東京で消耗中の職歴20年越え中年ITエンジニアです。「生涯現役プログラマを楽しむ」ことができる働き方探しをライフワークにしています。

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