ブラウザの種類をフォームに書き出す
ウェブサイト上でフォームを使ってアンケートを取るとき、その中にユーザーが利用しているブラウザの種類を確認する質問を入れることがあります。このような場合、プルダウンメニューなどを使って、ユーザーにブラウザの種類を選択してもらう、というのが一般的によく見受けられる方法です。
しかし、今回解説していく、ブラウザの種類やバージョンを判断するスクリプトを利用すれば、自動的にユーザーが使用しているブラウザを判断し、そのブラウザに合わせた値をフォーム内に設定できます。これにより、多少なりともユーザーの手間を軽減させることができます。
それでは、ブラウザの種類を判断しブラウザ名をフォームに書き出すスクリプトを見ていきましょう（Sample_1.html）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Sample_1</title> <style type="text/css"> <!--
body { background-color: #ffffff; }
--> </style> </head> <body> *ブラウザの種類をフォームに書き出す <p> <form name="Browser"> ブラウザ： <input type="text" name="namae" SIZE=30> </form> </p> <script type="text/javascript"> <!--
var B_Name=document.Browser.namae;
var UA=navigator.userAgent;
if(UA.indexOf("MSIE") == -1){
if(UA.indexOf("Mozilla/2") != -1){B_Name.value="Netscape Navigator2.X"} if(UA.indexOf("Mozilla/3") != -1)
{B_Name.value="Netscape Navigator2.X"} if(UA.indexOf("Mozilla/3") != -1) サンプルでは、21行目～64行目の<script type="text/javascript">～</script>の中にスクリプトを設定しています。このようなスクリプトの場合、本来ならonLoadなどのイベントハンドラを使用して、関数を読み出すようにしたいところです。しかし、Macintosh版のInternet Explorer 3など、一部の古いブラウザでスクリプトが動かない場合があるため、今回は関数を使わず、body要素の一番最後にスクリプトを設定するようにしています。それでは、ブラウザを判断する処理を見ていきましょう。
スクリプトの処理では、if文を使ってユーザエージェント内の情報を調べることによって、ブラウザを判断しています。そしてブラウザを判断した後、if文の処理で、各のブラウザに合わせた値を、18行目「<input type="text" name="namae" SIZE=30>」に設定したフォームへ書き出しています。また、サンプルでは、24行目「var UA=navigator.userAgent;」でユーザエージェントの値を変数UAに代入し、以降は、変数UAからブラウザを表す文字列を検索しています。
ブラウザの判断では、ユーザエージェントの値に「Mozilla/2」「Mozilla/3」「Mozilla/4」を持つブラウザにうち、Netscape Navigator系のブラウザかInternet Explorer系のブラウザであるを、25行目「if(UA.indexOf("MSIE") == -1){」と46行目「if(UA.indexOf("MSIE") != -1){」で判断しています。
そして、Netscape Navigator系ブラウザのさらに詳細な判断は25行目～29行目、Internet Explorer系のブラウザは46行目～62行目で行っています。
if(UA.indexOf("MSIE") == -1){ if(UA.indexOf("Mozilla/2") != -1)
if(UA.indexOf("MSIE") != -1){ if(UA.indexOf("Mozilla/2") != -1)
26行目～28行目のNetscape Navigator系のブラウザの処理では、ユーザエージェントの中に「Mozilla/2」という文字列があればNetscape Navigator 2.X（26行目）、ユーザエージェントの中に「Mozilla/3」という文字列があればNetscape Navigator 3.X（27行目）、ユーザエージェントの中に「Mozilla/4」という文字列があればNetscape Navigator 4.X（28行目）であると判断しています。
47行目～61行目のInternet Explorerの詳細な判断処理では、まず47行目で、ユーザエージェントのバージョンを表す値として「Mozilla/2」を返すInternet Explorerを、バージョン3として取り扱う処理を設定しています。次の48行目が、通常のInternet Explorer 3.Xのための処理となります。
さらに、Internet Explorer系のブラウザの中で、ユーザエージェントに「Mozilla/4」の値を持つバージョン4以降のInternet Explorerや、Operaであるかの判断は、49行目～61行目で処理しています。
ユーザエージェントの中に「Opera」という文字列があればOpera（50行目）、それ以外で「MSIE 6」という文字列があればInternet Explorer 6.X（52行目～55行目）、さらにそれ以外で「MSIE 5」という文字列があればInternet Explorer 5.X（57行目）、以上のどれにも当てはまらない場合は、Internet Explorer 4.Xと判断するようにしています（58行目）。また、Internet Explorer 6.XのSP2版であるかどうかは、52行目～55行目の処理内で、ユーザエージェント内に文字列「SV1」が含まれているかどうかで判断しています。
以上が、ユーザエージェントの値に「Mozilla/2」「Mozilla/3」「Mozilla/4」を持つブラウザに関する処理です。
そしてこれ以外のブラウザで、ユーザエージェントに「Mozilla/5」の値を持つ、バージョン6以降のNetscape Navigator、Mozilla、Firefox、Safariの判断は30行目～45行目で処理しています。
if(UA.indexOf("Mozilla/5") != -1){ if(UA.indexOf("Safari") != -1){B_Name.value="Safari"} else{ if(UA.indexOf("Netscape6/") != -1)
ここでは、ユーザエージェントの中に「Safari」という文字列があればSafari（31行目）、それ以外で「Netscape6/」という文字列があればNetscape Navigator 6.X（33行目）、さらにそれ以外で「Netscape7/」という文字列があればNetscape Navigator 7.X（35行目）であると順番に判断していき、最後にどれにも当てはまらなかった場合は、Mozillaであると判断するようにしています（40行目）。
さて、このサンプルは、あくまでもブラウザを判断するスクリプトの基本形です。実際には、ここまで細かくブラウザの種類やバージョンを判断する必要はあまりありません。多くの場合、このスクリプトを応用して、状況に合わせていらない部分を省いたり、例えばOSの種類も判断に入れるなどして、必要な部分を付け足していくことになります。
それでは、次にこのスクリプトを応用したサンプルを見ていきましょう。
