Javascriptでユーザーエージェント判定（多分IE11とかスマートフォン、タブレットにも対応）

IE11のユーザーエージェントについての記事「IE11 でユーザエージェント文字列から 「MSIE」 が消えた件 | WWW WATCH」を読んで、そういえばPHP（というかWordPress用？）ではユーザーエージェントの判定ロジックを書いたけどJavascriptでは書いてないな−、と思ったので書いてみました。

とある事情でベータ版なのですが、よろしければお使いあれ。

Javascriptのユーザーエージェント判定ファイルをダウンロード

デモ

何を判定するのか

これを使うと、ブラウザの判定ができます。

それと、

タブレットか、スマートフォンか、PCか

も判定できます。

あと、なんだったら

iPhone か iPod か iPad かの判定も出来ます

おまけとして、
IE と iOS の場合にのみですが、メジャーバージョン判定もできます。Androidのバージョンも必要ですかね？

使い方

まず、ダウンロードした judgeUA.js を読み込みます。

■html
<script src="./judgeUA.js"></script>

次に、各メソッドを呼び出します。

■Javascript
// デバイスの種類（タブレットとか）を取得
var type = judgeUA.deviceType();

// デバイスを取得（android とか iphone とか）
var device = judgeUA.device();

// ブラウザ名を取得
var browser = judgeUA.browser.name();

// ブラウザのバージョンを取得
var version = judgeUA.browser.version();

あとは、各々お好きな処理をしてくれれば良いよではあるんですが、一応参考までにこんな感じで使ってみてはどうでしょうサンプルを書いておきますね。お役に立てば幸い。

■Javascript
// スマートフォンの場合だけ非表示
if ( judgeUA.deviceType() === "smartphone" ) {
  $("element").hide();
}

// IEにだけクラス付与
if ( judgeUA.browser.name() === "ie" ) {
  $("element").addClass("ie");
}

なんかもうちょっと楽な方法ないかなぁと思うんですが、あとはメソッドをいっぱい作るくらいしか思い浮かばなくて、そこまで必要か？と思ったから一旦これで使ってみようと思います。

リファレンス的なの

各メソッドが返してくるのは文字列です。その返す文字列をあげておきますね。

注意点

多分ちゃんと動きます。

多分です。

なんせIEの11はダウンロードしてないというかどうすれば良いか分かんないし、僕は Windows Phone 持ってないんですよね。なんで、実は検証ちゃんとできてないｗ

もし使ってくれる方がいて、IE11 とか Windows Phone とかで確認しておかしかった場合はご連絡くれるとすごく嬉しいです。お願いします。

おわりに

こういうのを作るのは嫌いじゃないです、と言うか好きです。

そして、こういった自作のスクリプトを解説したいなぁと思う事もよくあるんですが、解説だとすげー長くなるなーとかどこからどこまで説明すんだろなーとか考えて大体作った物の配布程度になってしまうわけです。

Javascriptに関しては、ちょこっとだけ何か書けるようになってきたは良いものの全部独学だし、でもそれなりに理解している自負はあるしなので、そろそろJavascript関連のプロの方とお話しする機会がほしかったりJavascriptの扉をフロントエンドエンジニアが開ける手助けとかをしたいなぁとか考えるようになってきました。

というかね、現状のフロントエンドの人（マークアップをする人）はどの程度Javascriptを習得したいと思ってるんでしょうね。そこらへんの需要がイマイチよく分からん。というかマークアップとプログラムって基本全く別のジャンルだしね。