モバイル端末を判別する軽量なjavascriptライブラリ「isMobile」の紹介です。
Webサイトを スマホ等のモバイル端末からアクセスした時に最適化する
レスポンシブデザインは今や当たり前となりました。
しかしながら、レイアウトは最適化されても
PC時,モバイル時に同じJavascriptの処理をさせたくない場合もあります。
( 例 : SVGアニメーションのレンダリングなどの重たい処理 )
そのような モバイルアクセス時にJS処理を切り替えたい時に便利なライブラリが「isMobile」です。
- javascript で モバイルからのアクセスか判別ができる
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.判別したいオブジェクト名' を呼び出すと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();
}
以上がisMobileの紹介でした。
isMobileは処理を切り替えるより、
モバイル時に " 特定処理をさせたくない時 "に使うと便利な印象を受けました。
isMobileでモバイル判別し、React.jsやVue.jsのComponent等で
モバイルからアクセス時にはバックグラウンド ビデオを画像に切り替えるなど、
色々な使い方ができそうですね！
GitHub : kaimallea/isMobile
