【Vue.js】Vue.jsでモバイル/タブレットであるかを判定する【isMobile.js】

Vue.jsに限らず、javascriptの実装をPCかモバイルやタブレットで分けたいということがあるかと思います。
そのためのライブラリとして「isMobile.js」というものがありますが、これをVue.jsに組み込む方法を解説します。

以下が今回使用するisMobile.jsです。

github.com

isMobile.jsの導入

まずは、「isMobile.js」を導入します。
導入方法はいくつかありますが、ここではnpmを使った方法と、CDNを利用する方法を解説します。

npmを使って導入する

まずは以下のコマンドを実行します。

$ npm install ismobilejs --save

これで導入完了です。簡単ですね。
続いて、CDNを使った方法です。

CDNを使って導入する

まずは以下の1文をindex.htmlなどで読み込みます。

<script src="https://unpkg.com/ismobilejs/isMobile.min.js"></script>

これで導入完了です。
以下の実装は、npmで導入した場合を想定して記述します
(違いはimportくらいだと思いますが)

モバイル・タブレット判定方法

続いて、導入したisMobile.jsの使い方をご紹介します。

isMobile.jsをimport

// isMobile.jsを「isMobile」としてimportする
import isMobile from 'ismobilejs'

スマホかどうかを判定する

スマホかどうか判定するためには、「isMobile.phone」を使います。

// スマホならtrue,それ以外ならfalse
var isSmartPhone = isMobile.phone;
if(isSmartPhone) {
    // スマホの処理
} else {
    // スマホ以外の処理
}

タブレットかどうかを判定する

タブレットかどうか判定するためには、「isMobile.tablet」を使います。

// タブレットならtrue,それ以外ならfalse
var isTablet = isMobile.tablet;
if(isTablet) {
    // タブレットの処理
} else {
    // タブレット以外の処理
}

スマホ or タブレットかどうかを判定する

スマホ or タブレットかどうか判定するためには、「isMobile.any」を使います。
「isMobile.any」はスマホ、タブレットを含むモバイルからのアクセスの場合にtrueを返します。
PCからのアクセスはfalseになります。

// タブレットならtrue,それ以外ならfalse
var isAny = isMobile.any;
if(isAny) {
    // スマホ or タブレットの処理
} else {
    // スマホ、タブレット以外の処理
}

【番外編】上記の実装をutil化する

各コンポーネントで、上記の実装を記述する方法でも問題はないかと思いますが、私はutil化したいと思ったのでしました。

以下のようにutilを作成
■utils/DeviceUtility.js

// インポート
import isMobile from 'ismobilejs'

export default {
    /**
     * スマホ もしくは タブレットかどうかを判定する
     * スマホ もしくは タブレットだったらtrue、それ以外はfalse
     */
    isAny: function() {
        if (isMobile.any) {
            return true;
        }
        return false;
    },
    /**
     * スマホかどうかを判定する
     * スマホだったらtrue、それ以外はfalse
     */
    isMobile: function() {
        if (isMobile.phone) {
            return true;
        }
        return false;
    },
    /**
     * タブレットかどうかを判定する
     * タブレットだったらtrue、それ以外はfalse
     */
    isTablet: function() {
        if (isMobile.tablet) {
            return true;
        }
        return false;
    }
}


■作成したutilをとあるコンポーネントから使う
isMobile.jsを使ってdeveceに文字列を設定しています。
|javascript|<
import isMobile from '@/utils/DeviceUtility.js'

this.device = '';
// デバイス判断
if(isMobile.isMobile()){
    // スマホの場合
    this.device = 'smartPhone';
} else if(isMobile.isTablet()) {
    // タブレットの場合
    this.device = 'tablet';
} else {
    // 上記以外
    this.device = 'PC';
}

以上です。
スマホとPCサイトで処理を変えたいときなどにお使い下さい。

Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

【Vue.js】Vue.jsでモバイル/タブレットであるかを判定する【isMobile.js】