CATEGORY

【Vue3&TypeScript】ismobilejsでモバイルデバイス判定

Web開発において、モバイルデバイスやブラウザの種類に応じた挙動の制御は一般的な課題であり、端末の種類に基づいた特定の処理が必要な場合もある。特にiOSとAndroid端末での挙動の違いは顕著である。そこで、ismobilejsを使用して、モバイル端末の判定処理を実装することにした。

ismobilejsとは？

ismobilejsはシンプルなJavaScriptライブラリで、ブラウザとNodeJSの両方でモバイルデバイスを検出できる。このライブラリは、約1.3KB（minified）と非常に軽量。

主な特長

  • ページの初期ロード時に高速に実行される
  • Apple, Android, Amazon, Windowsなど、多くのデバイスを識別可能。

使用方法

※当記事は、Vue3 Composition API環境下での動作検証を行なっており、デバイス判定などの処理はComposition Functionに定義している。

インストール

npm install ismobilejs

TypeScriptの場合、@typesパッケージもインストールする

@types/ismobilejs --save

実装

以下の2つのファイルで実装を行う。

  • useDeviceInfo.ts: デバイス情報を取得するComposition Function
  • IsMobileJs.vue: コンポーネント

useDeviceInfo.ts

isMobileをインポートし、デバイス判定処理を記述する。

公式ドキュメントに記載のあったすべてのケースを網羅した。詳しくは以下を参照。

https://www.npmjs.com/package/ismobilejs#devices-detected-by-ismobile

import { reactive } from 'vue';
import isMobile from 'ismobilejs';

class UseDeviceInfo {
  deviceInfo = reactive({
    isApplePhone: isMobile(navigator.userAgent).apple.phone,
    isAppleiPod: isMobile(navigator.userAgent).apple.ipod,
    isAppleTablet: isMobile(navigator.userAgent).apple.tablet,
    isAppleUniversal: isMobile(navigator.userAgent).apple.universal,
    isAppleDevice: isMobile(navigator.userAgent).apple.device,
    isAndroidPhone: isMobile(navigator.userAgent).android.phone,
    isAndroidTablet: isMobile(navigator.userAgent).android.tablet,
    isAndroidDevice: isMobile(navigator.userAgent).android.device,
    isAmazonPhone: isMobile(navigator.userAgent).amazon.phone,
    isAmazonTablet: isMobile(navigator.userAgent).amazon.tablet,
    isAmazonDevice: isMobile(navigator.userAgent).amazon.device,
    isWindowsPhone: isMobile(navigator.userAgent).windows.phone,
    isWindowsTablet: isMobile(navigator.userAgent).windows.tablet,
    isWindowsDevice: isMobile(navigator.userAgent).windows.device,
    isOtherBlackberry10: isMobile(navigator.userAgent).other.blackberry10,
    isOtherBlackberry: isMobile(navigator.userAgent).other.blackberry,
    isOtherOpera: isMobile(navigator.userAgent).other.opera,
    isOtherFirefox: isMobile(navigator.userAgent).other.firefox,
    isOtherChrome: isMobile(navigator.userAgent).other.chrome,
    isOtherDevice: isMobile(navigator.userAgent).other.device,
    isAnyDevice: isMobile(navigator.userAgent).any,
    isPhone: isMobile(navigator.userAgent).phone,
    isTablet: isMobile(navigator.userAgent).tablet
  });

  isApplePhone(): boolean {
    return this.deviceInfo.isApplePhone;
  }

  isAppleiPod(): boolean {
    return this.deviceInfo.isAppleiPod;
  }

  isAppleTablet(): boolean {
    return this.deviceInfo.isAppleTablet;
  }

  isAppleUniversal(): boolean {
    return this.deviceInfo.isAppleUniversal;
  }

  isAppleDevice(): boolean {
    return this.deviceInfo.isAppleDevice;
  }

  isAndroidPhone(): boolean {
    return this.deviceInfo.isAndroidPhone;
  }

  isAndroidTablet(): boolean {
    return this.deviceInfo.isAndroidTablet;
  }

  isAndroidDevice(): boolean {
    return this.deviceInfo.isAndroidDevice;
  }

  isAmazonPhone(): boolean {
    return this.deviceInfo.isAmazonPhone;
  }

  isAmazonTablet(): boolean {
    return this.deviceInfo.isAmazonTablet;
  }

  isAmazonDevice(): boolean {
    return this.deviceInfo.isAmazonDevice;
  }

  isWindowsPhone(): boolean {
    return this.deviceInfo.isWindowsPhone;
  }

  isWindowsTablet(): boolean {
    return this.deviceInfo.isWindowsTablet;
  }

  isWindowsDevice(): boolean {
    return this.deviceInfo.isWindowsDevice;
  }

  isOtherBlackberry10(): boolean {
    return this.deviceInfo.isOtherBlackberry10;
  }

  isOtherBlackberry(): boolean {
    return this.deviceInfo.isOtherBlackberry;
  }

  isOtherOpera(): boolean {
    return this.deviceInfo.isOtherOpera;
  }

  isOtherFirefox(): boolean {
    return this.deviceInfo.isOtherFirefox;
  }

  isOtherChrome(): boolean {
    return this.deviceInfo.isOtherChrome;
  }

  isOtherDevice(): boolean {
    return this.deviceInfo.isOtherDevice;
  }

  isAnyDevice(): boolean {
    return this.deviceInfo.isAnyDevice;
  }

  isPhone(): boolean {
    return this.deviceInfo.isPhone;
  }

  isTablet(): boolean {
    return this.deviceInfo.isTablet;
  }
}

export const useDeviceInfo = new UseDeviceInfo();

IsMobileJs.vue

Composition Functionをインポートしてデバイス判定を行う。

<template>
  <v-container>
    IsMobileJsPane
  </v-container>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useDeviceInfo } from '@/components/test/ismobilejs/useDeviceInfo';

export default defineComponent({
  name: 'IsMobileJsPane',
  setup () {
    const deviceInfo = useDeviceInfo
    if (deviceInfo.isApplePhone()) {
      console.log('This is an Apple phone');
    } else if (deviceInfo.isAppleTablet()) {
      console.log('This is an Apple tablet');
    } else if (deviceInfo.isAndroidPhone()) {
      console.log('This is an android phone');
    } else if (deviceInfo.isAndroidTablet()) {
      console.log('This is an android tablet');
    } else if (deviceInfo.isWindowsPhone()) {
      console.log('This is an windows iphone tablet');
    } else if (deviceInfo.isWindowsTablet()) {
      console.log('This is an windows tablet');
    } else if (deviceInfo.isWindowsDevice()) {
      console.log('This is an windows device');
    } else {
      console.log('This is an any device');
    }
  }
})
</script>

注意点

ismobilejsは、PCの詳細情報を取得するメソッドが用意されていないためisMobile(navigator.userAgent).anyで判定するか、独自に処理を追加する必要がある。

この記事は役に立ちましたか？

もし参考になりましたら、下記のボタンで教えてください。

【Vue3】watchとwatchEffectの違いと使い方をサンプルコードで解説 前の記事 【日本語版】Airbnb JavaScript Style Guide 次の記事

関連記事

コメント

この記事へのトラックバックはありません。