【Vue.js】PCかモバイルかを判定する【isMobile.js】

f:id:duo-taro100:20160218004611p:plain

今回はアクセスしている端末がPCかタブレットか、モバイルかを判定する方法をご紹介します。
Vue.jsで使うことを想定して解説します。

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"></a>

これで導入完了です。

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

続いて、導入した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
     */
    isMobileAny: 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】PCかモバイルかを判定する【isMobile.js】