JavaScriptで閲覧者のブラウザやOS等のプラットフォームを判定するのに、皆さんはどうしてますでしょうか。

それぞれ独自にユーザーエージェントから推測するコードを実装している方も多いと思います。

しかし、現在様々なプラットフォームが存在するため、正確にプラットフォームを推測するのは、個人の実装では難しいところがあります。実装できたと思っていても、想定外のユーザーエージェントによって正しくブラウザ名やそのバージョン情報を取得できていない場合もあるかもしれません。

そこで今回は、できる限り正確に、そしてラクにプラットフォーム判定を実装したい人向けに、ユーザーのプラットフォームを判定するJavaScriptライブラリ「Platform.js」を紹介します。

「Platform.js」とは

Platform.jsは、ほぼすべてのJavaScriptプラットフォームで動作する、プラットフォーム検出用ライブラリです。オープンソース（MITライセンス）でGitHub上で開発されています。

プラットフォーム判定の一番大事な部分は、より正確により多くのプラットフォームを判定できるかどうかというところですが、このライブラリはオープンソースで開発されていて多くの人間からフィードバックを受けて改良されているので、それだけ独自実装よりも信頼できます。

また、万が一誤判定などのバグを見つけた場合は、GitHub上でIssueを追加すれば対応してくれるかもしれません。みんなでライブラリを良くしていきましょう。

使用方法

ブラウザでそのまま読み込む場合は、platform.jsをGitHubから取得し、読み込みます。

<script src="platform.js"></script>

Node.jsを利用する場合は、npmコマンドでインストールできます。

npm install --save platform

Node.jsで読み込んで利用しましょう。

var platform = require('platform');

後は、定義されたplatformオブジェクトを参照することで、ユーザーのプラットフォーム情報を取得できます。

例えば、以下のように取得できます。

// Windows 7 64ビット版上でIE7互換モードで動作するIE10 x86
platform.name; // 'IE'
platform.version; // '10.0'
platform.layout; // 'Trident'
platform.os; // 'Windows Server 2008 R2 / 7 x64'
platform.description; // 'IE 10.0 x86 (platform preview; running in IE 7 mode) on Windows Server 2008 R2 / 7 x64'

// iPad
platform.name; // 'Safari'
platform.version; // '5.1'
platform.product; // 'iPad'
platform.manufacturer; // 'Apple'
platform.layout; // 'WebKit'
platform.os; // 'iOS 5.0'
platform.description; // 'Safari 5.1 on Apple iPad (iOS 5.0)'

// 指定されたUA文字列をその場で解析することもできる
var info = platform.parse('Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7.2; en; rv:2.0) Gecko/20100101 Firefox/4.0 Opera 11.52');
info.name; // 'Opera'
info.version; // '11.52'
info.layout; // 'Presto'
info.os; // 'Mac OS X 10.7.2'
info.description; // 'Opera 11.52 (identifying as Firefox 4.0) on Mac OS X 10.7.2'

platformオブジェクトの定義

platformオブジェクトがどのような定義でどのような情報を持っているかを紹介します。なお、以下の記載はv1.3.3時点のものです。

platform

プラットフォームの情報が含まれたオブジェクトです。Stringにパースするとプラットフォームの説明が取得できます。

例えば、"Safari 10.0.3 on OS X 10.12.3"のようになっています。

platform.description

プラットフォームの説明です。

例えば、"Safari 10.0.3 on OS X 10.12.3"のようになっています。

platform.layout

ブラウザのレイアウトエンジンの名前です。

例えば、"WebKit"のようになっています。

platform.manufacturer

製品の製造元の名前です。

例えば、"Apple"のようになっています。

platform.name

ブラウザ/環境の名前です。

例えば、"Safari"のようになっています。

platform.os

オペレーティングシステムの情報が含まれたオブジェクトです。Stringにパースするとオペレーティングシステムの名前が取得できます。

例えば、"OS X 10.12.3"のようになっています。

platform.os.architecture

OSが構築されているCPUアーキテクチャです。

例えば、32のようになっています。

platform.os.family

OSのファミリーです。

一般的な値は次のとおりです。

"Windows"、"Windows Server 2008 R2 / 7"、"Windows Server 2008 / Vista"、"Windows XP"、"OS X"、"Ubuntu"、"Debian"、"Fedora"、"Red Hat"、"SuSE"、"Android"、"iOS"、"Windows Phone"など。

platform.os.version

OSのバージョンです。

例えば、"10.12.3"のようになっています。

platform.parse([ua=navigator.userAgent])

引数に与えたユーザーエージェント文字列から、新しいplatformオブジェクトを作成します。

platform.prerelease

アルファ/ベータリリースインジケータです。

platform.product

ブラウザをホストしている製品の名前です。

platform.ua

platformオブジェクトのユーザーエージェント文字列です。

例えば、"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8"のようになっています。

platform.version

ブラウザ/環境のバージョンです。

例えば、"10.0.3"のようになっています。

公式のドキュメントはこちらから参照できます。

まとめ

ブラウザ判定の処理に代表されるような、環境ごとに様々な判定が必要でテストが大変なものは、やはりオープンソースのライブラリに任せてしまうのがラクです。

「Platform.js」でラクしてみてはいかがでしょうか。