技術と雑記ブログ

【UAParser.js】ユーザーエージェントを取得してbodyに情報をclassとして付与する方法

画面の幅以外でPCなのかスマホなのかを判定したい場合があるかと思います。 そんな時に有効なのがユーザーエージェントです。

この記事では僕が使用しているユーザーエージェントを取得してbodyにua-spやua-pcなど情報をclassとして付与する方法をご紹介します。

目次

今回紹介するJavaScriptでbodyに付与される情報（class）

以下は全てua-を接頭辞とします。

  • ブラウザ名
  • デバイス名（PC、スマホ、タブレットの3種類）
  • モデル名（iPhoneやiPadなど）
  • OS名

例：iPhoneのSafariの場合

<body class="ua-mobilesafari ua-sp ua-iphone ua-ios">

例：MacのChromeの場合

<body class="ua-chrome ua-pc ua-macos">

ユーザーエージェントを取得してbodyに情報をclassとして付与する方法

まずはUAParser.jsをインストール

この記事ではwindow.navigator.userAgentを使用して自力では書きません。
UAParser.jsというユーザーエージェントを楽に扱えるライブラリを使用します。

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

NPMでインストール

以下のコマンドでインストール

npm install ua-parser-js

JavaScriptの紹介

モジュール

ここではuserAgent.jsというファイルを作成しその中に記述します。
以下のJavaScriptはモジュール化していますので別ファイルで読み込んで使用します。

const UAParser = require('ua-parser-js');

const ua = (() => {

  class UA {
    constructor() {
      this.uaParser = UAParser();
      this.body = document.querySelector('body');
    }

    init() {
      this.setUA();
    }

    getBrowser() {
      return this.uaParser.browser.name.replace(/\s+/g, "").toLowerCase();
    }

    getDevice() {
      const type = this.uaParser.device.type;
      let type_result = "";
      if (type == 'mobile') {
        type_result = 'sp';
      } else if (type == 'tablet') {
        type_result = 'tb';
      } else {
        type_result = 'pc';
      }
      return type_result;
    }

    getModel() {
      return this.uaParser.device.model ? this.uaParser.device.model.replace(/\s+/g, "").toLowerCase() : "";
    }

    getOS() {
      return this.uaParser.os.name.replace(/\s+/g, "").toLowerCase();
    }

    setUA() {
      this.body.classList.add(`ua-${this.getBrowser()}`);
      this.body.classList.add(`ua-${this.getDevice()}`);
      if (this.getModel()) {
        this.body.classList.add(`ua-${this.getModel()}`);
      }
      this.body.classList.add(`ua-${this.getOS()}`);
    }

  }
  return new UA();

})();

export default ua;

使い方

以下のように先程作成したモジュールを読み込みます。
※読み込みのパスは各自合わせてください。

その後、ua.init();とすれば実行されます。

import ua from 'path/to/plugins/userAgent.js';
ua.init();

これで自動でbodyにユーザーエージェントを元に情報をclassとして付与されます。

付与されるclassはUAParser.jsで取得されるものを小文字にしてスペースを削除したものです
https://github.com/faisalman/ua-parser-js#methods

個別に情報を取得して使う方法

このJavaScriptには以下の個別に情報を取得できるメソッドを用意しています。

getBrowser()
ブラウザ名を取得
返り値：chromeなど

getDevice()
デバイス名を取得
返り値：pc, tb, spのいずれか

getModel()
モデル名を取得
返り値：iphoneやipadなど

getOS()
OS名を取得
返り値：macosやios、androidなど

使用例：スマホのみ電話を発信する

以下の例はgetDevice()を使用してPCの場合は電話発信するtel:を無効にする例です。

import ua from 'path/to/plugins/userAgent.js';

const targets = document.querySelectorAll("a[href*='tel:']");

for(let target of targets) {
  target.addEventListener("click", (e) => {
    if(ua.getDevice() == 'pc'){
      e.preventDefault();
    }
  });
}

最後に

ユーザーエージェントで様々な判定をするのに非常に便利ですが、GoogleはChromeでユーザーエージェント文字列を段階的に廃止する方針のようですので今後注意していきたいですね。