【2016年版】ライブラリを活用したjavascriptでのユーザエージェント判定

1 【2016年版】ライブラリを活用したjavascriptでのユーザエージェント判定

【2016年版】ライブラリを活用したjavascriptでのユーザエージェント判定

javascriptを書いていると、
・Chromeでは動かすけど、IEでは対応してないから動かさない
・あるバージョン以下だと無効にしたい

そんなことってあると思います。

となると、
javascriptでユーザエージェントを判定して、
動作の切り替えを行うことになると思うのですが、

window.navigator.userAgent

で、

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36

こんなの取得できても・・・・
そうじゃないんだよ！！

ということで、javascriptで簡単にユーザエージェントが判定できる
ライブラリがあるので、ご紹介します！

ライブラリのインストール

今回使うライブラリは、UserAgent.jsです。

以下のURLから

https://github.com/uupaa/UserAgent.js/tree/master/lib

WebModule.js、UserAgent.jsをそれぞれダウンロードしてください。

使用したいページで読み込めばすぐに使えます。

UserAgent.jsの使い方

/*
ライブラリの読み込み
*/
<script src="<module-dir>/lib/WebModule.js"></script>
<script src="<module-dir>/lib/UserAgent.js"></script>

/*
使い方
*/
<script>

var ua = new UserAgent();

ua.OS               // -> "iOS"
ua.OS_VERSION       // -> "8.1.0"
ua.PC               // -> false
ua.MOBILE           // -> true
ua.BROWSER          // -> "Safari"
ua.BROWSER_ENGINE   // -> "WebKit"
ua.BROWSER_VERSION  // -> "8.0.0"
ua.USER_AGENT       // -> "Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4"
ua.LANGUAGE         // -> "ja"
ua.WEB_VIEW         // -> false
ua.DEVICE           // -> "iPhone 5"
ua.TOUCH_3D         // -> false
ua.AOSP             // -> false
ua.CARRIER          // -> ""
ua.FEATURE_PHONE    // -> false
ua.ES5              // -> true
ua.ES6              // -> false
ua.ES2015           // -> false
// --- OS の 判定 ---
ua.iOS              // -> true
ua.Mac              // -> false
ua.Android          // -> false
ua.Windows          // -> false
// --- ブラウザ の 判定 ---
ua.IE               // -> false
ua.Edge             // -> false
ua.WebKit           // -> true
ua.Firefox          // -> false
ua.Chromium         // -> false
// --- iOS デバイス の 判定 ---
ua.iPod             // -> false
ua.iPad             // -> false
ua.iPhone           // -> true

</script>

ライブラリの読み込み

使い方

var ua = new UserAgent();

ua.OS // -> "iOS"

ua.OS_VERSION // -> "8.1.0"

ua.PC // -> false

ua.MOBILE // -> true

ua.BROWSER // -> "Safari"

ua.BROWSER_ENGINE // -> "WebKit"

ua.BROWSER_VERSION // -> "8.0.0"

ua.USER_AGENT // -> "Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4"

ua.LANGUAGE // -> "ja"

ua.WEB_VIEW // -> false

ua.DEVICE // -> "iPhone 5"

ua.TOUCH_3D // -> false

ua.AOSP // -> false

ua.CARRIER // -> ""

ua.FEATURE_PHONE // -> false

ua.ES5 // -> true

ua.ES6 // -> false

ua.ES2015 // -> false

// --- OS の判定 ---

ua.iOS // -> true

ua.Mac // -> false

ua.Android // -> false

ua.Windows // -> false

// --- ブラウザの判定 ---

ua.IE // -> false

ua.Edge // -> false

ua.WebKit // -> true

ua.Firefox // -> false

ua.Chromium // -> false

// --- iOS デバイスの判定 ---

ua.iPod // -> false

ua.iPad // -> false

ua.iPhone // -> true

</script>

すごく簡単に使えることがわかると思います。

しかも、このライブラリを使えば、

ua.DEVICE // -> "iPhone 5"

1	ua.DEVICE // -> "iPhone 5"

で iOS デバイスの特定もできますし、

ua.WEB_VIEW // -> false

1	ua.WEB_VIEW // -> false

で、WebViewも判別できます。

これは、ほんとに便利！！

まとめ

・UserAgent.jsを使えばjavascriptでのユーザエージェントが簡単に行えます
・UserAgent.jsでは、iOS デバイスの特定、WebViewも判別できます

以上です。

この記事を書いた人
最新の記事

デミ

Z or R Twice で検索すると…

【2016年版】ライブラリを活用したjavascriptでのユーザエージェント判定

【2016年版】ライブラリを活用したjavascriptでのユーザエージェント判定

ライブラリのインストール

UserAgent.jsの使い方

まとめ

デミ

最新記事 by デミ (全て見る)

関連記事

お名前.comのドメイン×他レンタルサーバでメールの送受信をちゃ…

【20分で完了】MacにDocker for Macのインスト…

Python3.5+Selenium+PhantomJSでサーバ…

【ゼロから始めるScala】Scala × PlayFramew…

もうMySQLのインストール方法なんて調べるな！

ピックアップ記事

ピックアップ記事

【医療全身脱毛】悲鳴があがるほど痛い箇所ランキング3選

ピックアップ記事

へっぽこデザイン備忘録　〜簡単にWordPressのサムネイルサイズを増やす方法！〜

ピックアップ記事

自分が思いついたサービスは他の誰かも考えている

【2016年版】ライブラリを活用したjavascriptでのユーザエージェント判定

【2016年版】ライブラリを活用したjavascriptでのユーザエージェント判定

ライブラリのインストール

UserAgent.jsの使い方

まとめ

デミ

最新記事 by デミ (全て見る)

関連記事

人気記事ランキング

ピックアップ記事

ピックアップ記事

ピックアップ記事

ピックアップ記事