Javascriptでユーザーエージェント判定(多分IE11とかスマートフォン、タブレットにも対応)
2013年07月05日

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"); }
なんかもうちょっと楽な方法ないかなぁと思うんですが、あとはメソッドをいっぱい作るくらいしか思い浮かばなくて、そこまで必要か?と思ったから一旦これで使ってみようと思います。
リファレンス的なの
各メソッドが返してくるのは文字列です。その返す文字列をあげておきますね。
deviceType() | pc, tablet, smartphone |
---|---|
device() | ipad, iphone, ipod, android tablet, android, windows phone, pc |
browser.name() | ie, firefox, chrome, safari, opera, android browser |
browser.version() | 6とか11とか iOSの場合はOSバージョン IEの場合はブラウザバージョン |
注意点
多分ちゃんと動きます。
多分です。
なんせIEの11はダウンロードしてないというかどうすれば良いか分かんないし、僕は Windows Phone 持ってないんですよね。なんで、実は検証ちゃんとできてないw
もし使ってくれる方がいて、IE11 とか Windows Phone とかで確認しておかしかった場合はご連絡くれるとすごく嬉しいです。お願いします。
おわりに
こういうのを作るのは嫌いじゃないです、と言うか好きです。
そして、こういった自作のスクリプトを解説したいなぁと思う事もよくあるんですが、解説だとすげー長くなるなーとかどこからどこまで説明すんだろなーとか考えて大体作った物の配布程度になってしまうわけです。
Javascriptに関しては、ちょこっとだけ何か書けるようになってきたは良いものの全部独学だし、でもそれなりに理解している自負はあるしなので、そろそろJavascript関連のプロの方とお話しする機会がほしかったりJavascriptの扉をフロントエンドエンジニアが開ける手助けとかをしたいなぁとか考えるようになってきました。
というかね、現状のフロントエンドの人(マークアップをする人)はどの程度Javascriptを習得したいと思ってるんでしょうね。そこらへんの需要がイマイチよく分からん。というかマークアップとプログラムって基本全く別のジャンルだしね。
他にこんな事も書いてます
- JavaScript祭スピンオフ! フロントエンド祭り in Co-Edo でオブジェクトベースのJSについて話してきた
- 第5回 HTML5minutes! で話してきた
- 秋のJavaScript祭りで話をしてきた
- Mac OS X zsh で cd したら同時に ls -GAF するエイリアスコマンド
- 春のJavaScript祭りでAngularJSについてお話ししてきました
- Dashすげー便利
- jQueryのwidth,height系メソッドの違いについて
- Grunt+ST2な人がプロジェクトをチャチャっと開始する方法
- ローカルマシンにNode.jsをインストール
- jQueryでChromeの場合$(function(){]); が画像読み込み前に実行される場合の対応
この記事の分類
種類: Web制作
ジャンル: javascript TIPS web制作 作った
FBでコメント