開発部だより 第186回
こんにちは、開発部のたっくんです。
今日は、今使用しているブラウザをプログラムから判断する方法をご紹介します。
ブラウザにより、表示するサイトの表示結果が異なる事がよくあります。
これは、ブラウザ毎に、HTMLやCSSの解釈の仕方が異なる為です。
HTMLやCSSの解釈をより正しく、標準仕様に沿った表示になるように、ブラウザは日々進化しています。(たまに独自仕様に走ったりしますが(笑))
そこで、作成したブログラムが意図した通りに表示されるように、ブラウザ毎やバージョン毎に設定方法を切り替える場合があります。
今回は、そうした切り替え方法の条件式(ColdFusionの場合、JavaScriptの場合)をご紹介します。
このサンプルでは、ユーザーエージェントを使って判断します。
詳しくは、ここを参照するといいですよ!
ちなみに、自分の環境で、ユーザーエージェントの中身を参照してみると次の用になりました。
(Windows 7 と XP)
ブラウザ | ユーザーエージェント文字列 |
---|---|
IE 9 | Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0) |
IE 8 | Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.4; .NET CLR 1.1.4322; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) |
IE 7 | Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1) |
Firefox 18 | Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/20100101 Firefox/18.0 |
Firefox/3.6.6 | Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 (.NET CLR 3.5.30729) |
Safari 5.1.7 | Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2 |
Safari 5.1.1 | Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.51.22 (KHTML, like Gecko) Version/5.1.1 Safari/534.51.22 |
Chrome/24 | Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17 |
ColdFusion で ブラウザを判別する。
ここでは、ColdFusion では、CGI 変数のユーザーエージェント(HTTP_USER_AGENT)を使用して、判別してみる。
cgi.HTTP_USER_AGENT
次のコードで確認してみると、ブラウザの情報を判別できます。
<cfif Find("MSIE 9",cgi.HTTP_USER_AGENT) gt 0>
<cfoutput>IE 9</cfoutput>
<cfelseif Find("MSIE 8",cgi.HTTP_USER_AGENT) gt 0>
<cfoutput>IE 8</cfoutput>
<cfelseif Find("MSIE 7",cgi.HTTP_USER_AGENT) gt 0>
<cfoutput>IE 7</cfoutput>
<cfelseif Find("MSIE 6",cgi.HTTP_USER_AGENT) gt 0>
<cfoutput>IE 6</cfoutput>
<cfelseif Find("Firefox",cgi.HTTP_USER_AGENT) gt 0>
<cfoutput>Firefox</cfoutput>
<cfelseif Find("chrome",cgi.HTTP_USER_AGENT) gt 0>
<cfoutput>chrome</cfoutput>
<cfelseif Find("Safari",cgi.HTTP_USER_AGENT) gt 0>
<cfoutput>Safari</cfoutput>
<cfelse>
<cfoutput>その他(#cgi.HTTP_USER_AGENT#)</cfoutput>
</cfif>
JavaScript で ブラウザを判別する。
ユーザーエージェントを取得して判断しています。
<SCRIPT type="text/javascript">
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
if (userAgent.indexOf("msie 9.0") > -1) {
alert("IE 9");
}
else if (userAgent.indexOf("msie 8.0") > -1) {
alert("IE 8");
}
else if (userAgent.indexOf("msie 7.0") > -1) {
alert("IE 7");
}
else if (userAgent.indexOf("msie 6.0") > -1) {
alert("IE 6");
}
else {
alert("不明");
}
}
else if (userAgent.indexOf("firefox") > -1) {
alert("Firefox");
}
else if (userAgent.indexOf("chrome") > -1) {
alert("Google Chrome");
}
else if (userAgent.indexOf("safari") > -1) {
alert("Safari");
}
else {
alert("その他のブラウザ");
}
</SCRIPT>
ではでは、ブラウザを判断する必要があったら、このサンプルも参考にしてみてください(笑)