JavaScript

JavaScript - jQueryでユーザエージェントUserAgentを取得し判別する方法まとめ

ユーザエージェントを使うことで、ブラウザやOSの情報を取得できます。ユーザエージェントの情報を使うことで、OSやブラウザによってJavaScriptの処理を変えるにはどうするのがよいかまとめてみました！

JavaScriptやjQueryでユーザエージェントUserAgentを取得し判別する方法まとめ

JavaScriptでユーザエージェント UserAgentを取得するには？

windowに格納されているnavigatorオブジェクトからUserAgentにアクセスできる

window.navigator.userAgent

取得したユーザエージェントからブラウザは判別するには、例えば、以下のように書く

var ua = window.navigator.userAgent.toLowerCase();
// Google Chrome
var isChrome = (ua.indexOf('chrome') > -1) && (ua.indexOf('edge') == -1);

上記コードはGoogle Chromeを判定している。

このようなコードを自分で書いていってもいいのだが、
デバイスなどは日々どんどん増えるので変わったときに変更が大変になってしまう。

したがって、
uupaa/UserAgent.js: Detect the OS, Browser and WebView from UserAgent String.
を使うのが良さそう。

UserAgent.jsの使い方

本家サイトのREADME.mdのように書くだけでは動かなかった。
以下のようなエラーがでてしまった。

Uncaught ReferenceError: UserAgent is not defined

以下のように、

var ua = new UserAgent();

を

var ua = new WebModule.UserAgent();

に変更したらちゃんと動きました。

さいごに

本記事では、ユーザエージェントの情報を使うことで、OSやブラウザによってJavaScriptの処理を変えるおすすめ方法をご紹介しました！
UserAgentは簡単に偽装できるので厳密な意味での情報取得にはならないことに注意してください。

-JavaScript