Web事業部実績紹介
Web事業部実績紹介
2018.10.16

ブラウザからデバイスに、OSまで!UA判定に便利なライブラリ「UAParser.js」

つっちー

こんにちは。フロントエンドエンジニアのつっちーです。

UA判定処理って、自分で書くのは面倒ですよね。条件をそのたび調べたり、微妙に書き間違えて正しく動作しなかったり……。

今回は、そんなUA判定に便利なライブラリ、UAParser.jsについて取り上げたいと思います。
 

UAParser.jsの特徴

UAParser.jsは、下記のような特徴をそなえたjavascriptライブラリです。

  • 導入方法が豊富
  • 判定可能な要素が多い
  • 簡単に使える

まず、導入方法としてはCDNから取得、Node.jsでバンドルなど、さまざまな選択肢があります(今回の記事では一般的な2つの導入方法をご紹介していきます)。

そしてこのUAParser.jsは、ブラウザだけでなく、デバイス情報、OSまで、多くの要素を判定可能です。そう聞くとなんだか処理が面倒くさそう、と思ってしまいますが、使い方はとても簡単です。

参考URL:https://github.com/faisalman/ua-parser-js

導入方法

この記事では、CDNから取得する方法と、Node.jsから扱う方法の2例を掲載します。

CDNから取得する

<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
console.log(UAParser)

CDNから取得する場合は、HTMLにscriptタグを記述するだけです。

Node.jsでバンドル

$ npm i ua-parser-js
const UAParser = require('ua-parser-js')
console.log(UAParser)

Node.jsから扱う場合は、WebpackやBrowserifyなどのモジュールバンドラーを併用します。

判定方法

続いて判定方法です。上記で取得したUAParserを関数として実行するだけで、返り値のオブジェクトに必要な情報が全て入ってきます。

判定結果として利用される文字列はこちらの一覧で確認できます。

ブラウザを判定

See the Pen ua-parser-js-browser by ligdsktschy (@lig-dsktschy) on CodePen.

IEから閲覧されている場合のみ、非対応メッセージが表示される実装です。

デバイスを判定

See the Pen ua-parser-js-device by ligdsktschy (@lig-dsktschy) on CodePen.

こちらはモバイルでない端末(PCなど)から閲覧されている場合のみ、非対応メッセージが表示される実装です。

OSを判定

See the Pen ua-parser-js-os by ligdsktschy (@lig-dsktschy) on CodePen.

OSに応じたダウンロードボタンを表示する実装です。

まとめ

ほかにもCPU、ブラウザエンジンも取得できるようです。これを使って、実装のたび判定方法をググる生活からおさらばしちゃいましょう!

ではまた。つっちーでした。