モバイル端末を判別する軽量なjavascriptライブラリ「isMobile」の紹介です。

 Webサイトを スマホ等のモバイル端末からアクセスした時に最適化する
レスポンシブデザインは今や当たり前となりました。

 しかしながら、レイアウトは最適化されても
PC時,モバイル時に同じJavascriptの処理をさせたくない場合もあります。
( 例 : SVGアニメーションのレンダリングなどの重たい処理 )

そのような モバイルアクセス時にJS処理を切り替えたい時に便利なライブラリが「isMobile」です。
 

isMobileで出来ること

- javascript で モバイルからのアクセスか判別ができる
 

isMobileのインストール

isMobileはGitHubのレポジトリページからライブラリをダウンロードする他、
コマンドライン上からnpmなどのパッケージマネージャーを通して入手も可能です。

# npmでインストールする場合
npm install ismobilejs --save
# yarnを使う場合
yarn add ismobilejs
# bower
bower install isMobile
# ブラウザから直接CDNを通して読み込む場合
https://unpkg.com/ismobilejs/isMobile.min.js
// node.js上で使う場合
const isMobile = require('ismobilejs');
// ブラウザから読み込む場合
<script src="isMobile/isMobile.min.js"></script>


isMobileの使い方

isMobileの使い方は簡単で ライブラリを読み込み後、
'isMobile.判別したいオブジェクト名' を呼び出すとBoolean(真偽)で結果が返ってきます。

例えば サイトへのアクセスが スマホやタブレットからか判別する場合は以下のように。

// true 又は falseで結果が返ってきます
isMobile.phone // スマホからの判別
isMobile.tablet // タブレットからの判別
isMobile.any // スマホ、タブレットを含むモバイルからのアクセスの場合


その他にも各種モバイル用OSの判別をするメソッドも用意されています。

* アップル用

// iPhoneの判別
isMobile.apple.phone
// iPodの判別
isMobile.apple.ipod
// iPadの判別
isMobile.apple.tablet
// 全てのアップルデバイス
isMobile.apple.device


* アンドロイド用

// アンドロイド スマホ
isMobile.android.phone
// アンドロイド タブレット
isMobile.android.tablet
// 全てのアンドロイドOSのデバイス用
isMobile.android.device


* Windowsモバイル用

// windowsフォーン
isMobile.windows.phone
// windowsタブレット
isMobile.windows.tablet
// 全てのwindows mobileデバイス
isMobile.windows.device


  身近な具体例を挙げると、タッチ操作 ( 主にhover処理 )ではあまり活躍しない
" tooltip "も " モバイルからのアクセス時はOFF " なんてことも簡単にできます。

// bootstrapのtooltipの例
if( ! isMobile.any ) {
  // モバイル端末以外からのアクセス以外の時はtooltipを動作
  $('.tooltipClass').tooltip();
}


Summary

以上がisMobileの紹介でした。

 isMobileは処理を切り替えるより、
モバイル時に " 特定処理をさせたくない時 "に使うと便利な印象を受けました。

 isMobileでモバイル判別し、React.jsやVue.jsのComponent等で
モバイルからアクセス時にはバックグラウンド ビデオを画像に切り替えるなど、
色々な使い方ができそうですね!

GitHub : kaimallea/isMobile

 


Socialシェアボタン

スポンサーリンク