【Nuxt】ua-parser-jsでユーザーエージェントを判別する方法

Nuxt

Nuxtでユーザーエージェントやデバイスを判別したい

NuxtでユーザーエージェントデバイスOSなどを判別したい時がありました!

User-Agentのリクエストヘッダーを自分でパースしてやっても良いとは思いますが、今回はua-parser-jsを使用して簡単に判別した時の方法を備忘録として残しておきたいと思います!

UAParser.jsの公式サイト

また別の方法として、nuxt-device-detectを使用した方法も記事にしていますので、こちらも参考にしてください。

インストール

まずは、ua-parser-jsをインストールします!

以下のコマンドを打ってインストールをしてください!

$ yarn add ua-parser-js

$ yarn add --dev @types/ua-parser-js

使い方

次は実際に、ua-parser-jsの使い方を確認していきましょう!

インポートする

まずは、UAParserをインポートしてください!

import { UAParser } from 'ua-parser-js';

インスタンス化する

こんな感じでインスタンス化をします。

const uaParser = new UAParser(req.headers['user-agent']);

デバイス判定をする

とりあえず、今回はPCかそうでないか判別できれば良かったので、こんな感じで判定しておきました。

※これだとタブレットは判別できないので注意。

const isSp = uaParser.getDevice().type !== undefined;

もう少し詳しく判定したい場合は、以下の公式サイトのREADMEにgetDevice()について記載があったので、参考にしてください。

getDevice()returns { model: '', type: '', vendor: '' }


# Possible ‘device.type’: console, mobile, tablet, smarttv, wearable, embedded # Possible ‘device.vendor’: Acer, Alcatel, Amazon, Apple, Archos, Asus, BenQ, BlackBerry, Dell, Essential, GeeksPhone, Google, HP, HTC, Huawei, Jolla, Lenovo, LG, Meizu, Microsoft, Motorola, Nexian, Nintendo, Nokia, Nvidia, OnePlus, Ouya, Palm, Panasonic, Pebble, Polytron, RIM, Samsung, Sharp, Siemens, Sony[Ericsson], Sprint, Xbox, Xiaomi, ZTE, … # ‘device.model’ determined dynamically

https://github.com/faisalman/ua-parser-js

OSを取得する

OSは以下で取得できました!

const os = uaParser.getOS().name;

こちらも公式サイトのREADMEに詳しく記載があったので、見てみてください。

getOS()returns { name: '', version: '' }


# Possible ‘os.name’ AIX, Amiga OS, Android, Arch, Bada, BeOS, BlackBerry, CentOS, Chromium OS, Contiki, Fedora, Firefox OS, FreeBSD, Debian, DragonFly, Fuchsia, Gentoo, GNU, Haiku, Hurd, iOS, Joli, KaiOS, Linpus, Linux, Mac OS, Mageia, Mandriva, MeeGo, Minix, Mint, Morph OS, NetBSD, Nintendo, OpenBSD, OpenVMS, OS/2, Palm, PC-BSD, PCLinuxOS, Plan9, Playstation, QNX, RedHat, RIM Tablet OS, RISC OS, Sailfish, Series40, Slackware, Solaris, SUSE, Symbian, Tizen, Ubuntu, Unix, VectorLinux, WebOS, Windows [Phone/Mobile], Zenwalk, … # ‘os.version’ determined dynamically

https://github.com/faisalman/ua-parser-js

サンプルコード

今回はざっくりこんな感じにしました!(結構微妙な感じになってしまいましたが、、、)

import { UAParser } from 'ua-parser-js';

.
.

export const actions: Actions<State, RootState> = {
  nuxtServerInit: async ({ commit, state }, { req }) => {
    const uaParser = new UAParser(req.headers['user-agent']);

    const isSp = uaParser.getDevice().type !== undefined;
    const os = uaParser.getOS().name?.toLowerCase() || '';
    .
    .
  }
};

参考サイト

その他にも詳しいことは、公式サイトのREADMEを見るのが良さそうです。

まとめ

今回は、Nuxtでua-parser-jsを使用してユーザーエージェントを判別する方法について書きました!

使ってみた感じは、nuxt-device-detectの方が使いやすい感じはありましたが、ua-parser-jsの方が細かいことは色々できそうなので、試してみて良かったかな?と言う感じでした!

ua-parser-jsでうまく行かなかった場合などは、nuxt-device-detectの方も是非試してみてください。

オススメの関連商品

Note一覧

コメント