Twihelpme

JavaScript：#thqRdUu

新規投稿

返信数:0件(解決済み - Twihelpmeにて返信を締め切りました)6090 view

w3gjp
w3gjp
ユーザエージェント条件分岐(頻度が多いIEとかスマートフォン対応用)の便利スニペット

JavaScriptでの開発は、IEとか、IEとか、IEとかで何世代にも渡っていろいろな差異を生じさせてくれて、泣く泣くIE専用のコードを書くことも少なくありませんよね。

そして、そのときは何のために書いたコードなのかをわかっているのですが、たとえばコメントを書き忘れた状態で間が空いての修正になったり、それこそしばらくJavaScript書いてなかったりして、久々に見たら、なんで別のコードを書いているのかわからなくなることがあります(そもそもコメント書き忘れるのが悪いんですが)。

ひどいときなんて、「なんやコレ、こんな無駄なコードいらんやん！」とちゃちゃっと消してしまって、あとあとIEで確認したら上手く動いていなかったなんてことを経験したのは1度や2度じゃありません…。

そんなときにいつも思うのが条件分岐のコード自体で、何のために条件分岐しているのかが一目瞭然になってると便利だと思うんですね。だって、いちいちコメントとか書くの面倒じゃないですか。コメント書き忘れちゃうやつもいますし…。

そこで、面倒くさがりで忘れっぽい自分のためにユーザエージェント条件分岐のスニペットを作っていたので、公開してみます。もう、コレでコメントいらずに！
var _ua = (function(){
 return {
  ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
  ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
  ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
  mobile:/android|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())
 }
})();
  • ltIE6は、addEventListenerに対応しておらず、且つmaxHeightに対応していないという条件でIE6以下を導き出しています。
  • ltIE7は、addEventListenerに対応しておらず、且つIE8から対応のquerySelectorAllに対応していないという条件でIE7以下を導き出しています。
  • ltIE8は、addEventListenerに対応しておらず、且つIE9から対応のgetElementsByClassNameに対応していないという条件でIE8以下を導き出しています。
  • mobileのところはもろにユーザエージェント情報依存です。
そして、これをどんな風にして使うのかですが、
たとえば、IE9とかFirefoxとかChromeとかOperaとかSafariとかのモダンブラウザのみに適用するコードであれば
if(!_ua.ltIE8){
 //この中のコードはモダンブラウザ用
}
IE8以下のみに適用するコードであれば、
if(_ua.ltIE8){
 //この中のコードはIE8以下用
}
IE7以下のみに適用するコードであれば、
if(_ua.ltIE7){
 //この中のコードはIE7以下用
}
IE6以下のみに適用するコードであれば、
if(_ua.ltIE6){
 //この中のコードはIE6以下用
}
スマートフォンとかタブレット端末のみに適用するコードであれば、
if(_ua.mobile){
 //この中のコードはスマートフォンとかタブレット端末用
}
スマートフォンとかタブレット端末以外に適用するコードであれば、
if(!_ua.mobile){
 //この中のコードはスマートフォンとかタブレット端末以外用
}
という感じで使います。上で紹介しているスニペットはIE6/7/8以下の分岐とスマートフォン・タブレット端末用の分岐だけですが、用途にあわせて増やしてもらうと、さらに便利になるんじゃないでしょうか。とくに複数人での開発とかには。

w3gjpさんの投稿に1人が「いいね！」と言っています。