2010.08.04下記に記載の内容は情報が古くなったために正しく動作しなくなりました。JSでのUA条件分岐便利スニペットとして、代替案を提示しています。jQueryでブラウザを判別するjQuery.browserのAPIは1.3より非推奨のため、代わりにブラウザがサポートする機能を判別するAPIであるjQuery.supportで代表的なブラウザの判別方法をまとめてみました。Agentが偽装されても大丈夫、UA情報には依存しないサポートしている機能だけでのブラウザ判別を行う試みです。if(jQuery.browser.opera){alert('あなたがお使いのブラウザはoperaです');}jQuery.browserを使えば、上記の簡単なコードだけでブラウザを判別した条件分岐が行えます。加えてバージョンの判別もjQuery.browser.versionを使ってできます。6){alert('あなたがお使いのブラウザはIE6です');}jQuery.browserとjQuery.browser.versionはすごく便利ですが、jQuery1.3からはどちらも非推奨となっています。1.3以降のバージョンでは後方互換とプラグイン利用のためにまだ含まれていますが、今後のjQueryのバージョンアップに伴い、この機能は廃止される見通しです。これらはnavigator.userAgentの値をもとにしており、UA情報は簡単に偽装することもできます。そこで、代わりにブラウザがサポートする機能に基づいて判別を行うjQuery.supportを使うことが推奨されています。falseの値で返すAPIです。各機能にあたるプロパティには次のようなものがあります。leadingWhitespaceinnerHTMLで、先頭に空白があった場合にそれを残して返すブラウザであればtrueです。tbodytable要素内に、tbody要素が無い状態を許可する(省略時に自動的に付加しない)ブラウザであればtrueです。htmlSerializeinnerHTMLを用いた際に、シリアライズされた値を返すブラウザであればtrueです。stylegetAttribute("style")で要素に記述されたstyle属性値を取得できるブラウザであればtrueです。hrefNormalizedhref属性の値を取得する際に、属性値をそのまま返す(勝手に補完しない)ブラウザであればtrueです。opacityopacityによる透明度を指定する機能を実装しているブラウザであればtrueです。cssFloatfloatの値を取得する場合にstyle.cssFloatで取得できるブラウザであればtrueです。checkOnチェックボックスの値が指定されていない場合のデフォルト値が"on"であるブラウザであればtrueです(webkitはデフォルト値が""の空なので、falseです)。deleteExpando拡張した要素の属性を、delete演算子で削除できるブラウザであればtrueです。checkClonecloneNode()を使用して要素を複製する場合に要素のチェック状態も含めコピーできるブラウザでればtrueです。scriptEvalappendChild()やcreateTextNode()で要素を追加した際、そこにスクリプトが含まれていると、それを自動的に実行できるブラウザであればtrueです。noCloneEvent要素がコピーされる場合に、元の要素がもっていたイベントハンドラをコピーしないブラウザであればtrueです。基づいてページをレンダリングしているブラウザであればtrueです。これらのプロパティのブラウザ毎の値を一覧表にまとめると、次の通りです。truechromeとsafariを対象とする場合if(!jQuery.support.checkOn){alert('あなたがお使いのブラウザはChromeもしくはSafariっぽいです');}if文の条件式の中で!をつけたので、checkOnがfalseであればこの条件文に該当します。該当するのはwebkitだけなので、これでchormeとsafariのみに振り分けたコードを記述できます。iPad標準ブラウザといったスマートフォンも同じChromeとSafariなので、この条件に合致します。jQuery.support.noCloneEvent){alert('あなたがお使いのブラウザはFirefoxもしくはOperaっぽいです');}まず、checkOnがtrue条件なので、chromeとsafariがこれにはじかれ、IEの全バージョンでfalseが返るnoCloneEventをand条件に加えることで、FirefoxかOperaのみに振り分けたコードを記述できます。ここから、FirefoxかOperaかを判別するには、jQueryではなく、window.globalStorageを使います。globalStorageを使うのはFirefoxのみです。Storageの仕様自体から削除されたため、今後FirefoxのアップデートによってglobalStorage自体が削除されると、以下のOperaとFirefoxの判別は今後通用しなくなるかもしれませんということで注意してください。betaではglobalStorage自体は残されていたので問題なく動作確認できています。!window.globalStorage){alert('あなたがお使いのブラウザはOperaっぽいです');}IEのみを対象として各バージョンでの振り分けもできるようにしたい場合ブラウザ判別でのコード分岐は特にIEにおいて活躍することが多いので、いろいろなアプローチを取り上げてみます。IE9を除く、IE6,7,8を対象にしたい場合if(!jQuery.support.opacity){alert('あなたがお使いのブラウザはIE6,7,8っぽいのいずれかです');}IE9からはopacityをサポートしているので、これをサポートしていない(falseが返る)のはIE6,7,8だけです。IE6,7,8に対してのみまとめて書きたい場合に使えます。IE9は他のモダンブラウザと並ぶくらいサポートが良化してきているので、IE9を除くIE6,7,8にだけという場面は今後も頻発するかと思います。}}styleはIE8からサポートしているのでIE6,7とIE8を切り分けることができます。IE6とIE7の切り分けがまだできていません。"undefined"を利用します。これはmaxHeightプロパティをサポートしているかどうかで判別します。IE8の互換表示モード時はIE7の部分が通ります。jQuery.support.opacity){alert('あなたがお使いのブラウザはIE9っぽいです');}noCloneEventがfalseなのはIEだけなので、まずIEのみに対象を絞り込むことができ、IE6,7,8,9の中でopacityがtrueなのはIE9だけなので、IE6,7,8を除いたIE9のみの条件分岐が可能です。}}else{document.write('ごめんなさい、あなたのブラウザを特定できませんでした');}以上、jQuery.supportに加えて、機能をサポートしているかどうかの条件文にのみこだわったブラウザの判別でした。IEの判別はまあまあ使えるでしょうか。それ以外のブラウザはサポートしている機能が同じなので、条件分岐させる必要もないことでしょう。続HTML5についてのおさらいIE用HTML5新要素のMinify生成ContactWeb制作に関するご相談、お気軽にお問い合わせください。StandardsAppendixBlogWorksAboutコンセプト会社概要デザイナー募集ContactSubscribeTwitterFacebookGoogle+。