2013年02月12日

ColdFusion や JavaScript で今使っているブラウザを判断する方法

開発部だより 第186回


こんにちは、開発部のたっくんです。

今日は、今使用しているブラウザをプログラムから判断する方法をご紹介します。
ブラウザにより、表示するサイトの表示結果が異なる事がよくあります。
これは、ブラウザ毎に、HTMLやCSSの解釈の仕方が異なる為です。

HTMLやCSSの解釈をより正しく、標準仕様に沿った表示になるように、ブラウザは日々進化しています。(たまに独自仕様に走ったりしますが(笑))

そこで、作成したブログラムが意図した通りに表示されるように、ブラウザ毎やバージョン毎に設定方法を切り替える場合があります。

今回は、そうした切り替え方法の条件式(ColdFusionの場合、JavaScriptの場合)をご紹介します。
このサンプルでは、ユーザーエージェントを使って判断します。
詳しくは、ここを参照するといいですよ!
ちなみに、自分の環境で、ユーザーエージェントの中身を参照してみると次の用になりました。
(Windows 7 と XP)
ユーザーエージェント
ブラウザユーザーエージェント文字列
IE 9Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
IE 8Mozilla/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 7Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)
Firefox 18Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/20100101 Firefox/18.0
Firefox/3.6.6Mozilla/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.7Mozilla/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.1Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.51.22 (KHTML, like Gecko) Version/5.1.1 Safari/534.51.22
Chrome/24Mozilla/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>


ではでは、ブラウザを判断する必要があったら、このサンプルも参考にしてみてください(笑)
posted by たっくん at 18:24
開発部だより | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は90日以上新しい記事の投稿がないブログに表示されております。