こんにちは。フロントエンドエンジニアのつっちーです。
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でバンドル
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、ブラウザエンジンも取得できるようです。これを使って、実装のたび判定方法をググる生活からおさらばしちゃいましょう！
ではまた。つっちーでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
