目次へ戻ります
イヌでもわかるJavaScript講座


ブラウザバージョンの取得

ブラウザ名だけでなく、ブラウザのバージョンも取得して表示してみます。
難易度:★★☆☆☆☆☆☆☆☆
【実行例】


【リスト】
<script language="JavaScript"><!--
myBsr   = navigator.appName;                     // ブラウザ名取得
myAgent = navigator.userAgent;                   // エージェント取得
myTop = myAgent.indexOf("Opera",0);              // OP チェック
if (myTop == -1){                                // OPじゃない
   myTop = myAgent.indexOf("MSIE",0);               // IE チェック
   if (myTop == -1){                                // IEじゃない
      myTop = myAgent.indexOf("Mozilla/",0);        // NN チェック
      if (myTop == -1){                             // NNでもない
         myVersion = "";
      }else{                                        // NNだ!
         myLast = myAgent.indexOf(" ",myTop);
         myVer = myAgent.substring(myTop+8,myLast); // NNのバージョン切り取り
         myVersion = " Version " + myVer;
      }
   }else{                                           // IEだ!
      myLast = myAgent.indexOf(";",myTop);
      myVer = myAgent.substring(myTop+5,myLast);    // IEのバージョン切り取り
      myVersion = " Version " + myVer;
   }
}else{                                              // OPだ!
   myBsr = "Opera";
   myLast = myAgent.indexOf(" ",myTop+6);
   myVer = myAgent.substring(myTop+6,myLast);       // OPのバージョン切り取り
   myVersion = " Version " + myVer;
}
document.write("あなたのブラウザは、"+myBsr+myVersion+" です");
// --></script>

サンプルだけのHTMLは こちらへ
【説明】

サーフィンをしていると、「あなたのブラウザは、です」というメッセージをワンポイントに置いているホームページを、よく、見かけます。

これは、わが、イヌでもわかるJavaScript講座ではStep.1でサンプルになっているほどの単純なスクリプトです。最初は、navigator.appName という長い英語でいきなり、つまづいた方が多いでしょう。すみません。(^^;

このメッセージが、ありきたりになってしまったからには、自分のホームページは、バージョンも表示して、もう一歩リードしてみましょう。

ブラウザ名は、今まで通り、navigator.appName で取得します。
バージョンの取得は、navigator.userAgent か、navigator.appVersion で取得します。(Step.29参照)

Win98 の IE の Ver4.01 でしたら、
navigator.userAgent = Mozilla/4.0 (compatible; MSIE 4.01; Windows 98)
navigator.appVersion = 4.0 (compatible; MSIE 4.01; Windows 98)

Win98 の NN の Ver4.04 でしたら、
navigator.userAgent = Mozilla/4.04 [ja] (Win95; I)
navigator.appVersion = 4.04 [ja] (Win95; I)

という文字列が取得できます。この中にバージョンが入っているので、切り抜いて使います。

今回は、navigator.userAgent から、切り抜きます。

文字列の切り取りは substring() です。覚えているでしょうか? フォームを使ったメッセージ処理のステップで頻繁に使ったやつです。(Step.9参照)

これと、indexOf() を組み合わせて、バージョンの部分を取り出します。
indexOf() は、パラメータで指定した文字を検索します。
myAgent = navigator.userAgent ;
myTop = myAgent.indexOf ( "MSIE" , 0 ) ;
この場合、myAgent"MSIE" という文字があるか、調べます。indexOf() の第2パラメータは検索開始位置です。左端から、0から数えていきます。つまり、0は、最初からということです。

"MSIE"という文字が含まれていたら、"M"の文字位置を myTop に戻します。含まれていなければ、-1 を戻します(-1がセットされます)。
ここで、-1以外の数値(つまり、"M"の文字位置)が入っていたら、このブラウザはIEであるということです。
取り出したいのは、"MSIE"のとなりにある "4.01" ですから、切り取る開始位置は、myTop + 5 番目となります。

切り取る最終位置は、バージョンの後ろについているセミコロン( ; )までとして、
myLast = myAgent.indexOf ( ";" , myTop+5 );
となります。(myTop+5 でも myTop でも OK) 要するに、第2パラメータの検索開始位置を0にしてしまうと、"4.01;"より前の、"compatible;"のセミコロンの位置を取得してしまいます。要するに最初に検索したキーの位置を返してきます。
myTop = myAgent.indexOf ( "MSIE" , 0 );
myLast = myAgent.indexOf ( ";" , myTop );
myVer = myAgent.substring ( myTop+5 , myLast ) ;
よって、IEのバージョン (例:"4.01") を取り出しました。

同じような感じで、NNのバージョン (例:"4.04") も取り出します。
myTop = myAgent.indexOf ( "Mozilla/" , 0 );
myLast = myAgent.indexOf ( " " , myTop );
myVer = myAgent.substring ( myTop+8 , myLast );


さて、OP ですが、このブラウザは、環境設定で、IE や NS に認識させることができます。つまり、navigator.appName を使ってブラウザ名を見ても、IE にも NS にも化けることができます。

しかし、navigator.userAgent を覗いてみれば、
Opera/6.03 (Windows ME; U) [ja]
Mozilla/4.0 (compatible; MSIE 5.0; Windows ME)
Opera 6.03 [ja]
Mozilla/5.0 (Windows ME; U)
Opera 6.03 [ja]
このように、情報が入っています。この『Opera』が入っていたらブラウザは『Opera』だと判断することにします。
myBsr = "Opera";
myTop = myAgent.indexOf ( "Opera" , 0 );
myLast = myAgent.indexOf ( " " , myTop+6 );
myVer = myAgent.substring ( myTop+6 , myLast );


さすがに、それ以外のブラウザのバージョンは、どこからどこまでを切り抜くか分からないので、myVersion = ""; としてバージョン表示はあきらめます。(^^;

【ご注意】スクリプトや文章中に『NN』、『NS』と表記がありますが、『Netscape』 のことです。他のステップに 『NC』 と書いてあっても 『Netscape』 です。気にしないでね。^o^;

参考ステップ
Step.9 左から1文字ずつメッセージを表示してみましょう
Step.29 ブラウザ情報を取得してみましょう
【投稿サンプル -Browser Check-】

Step.1,29,38を参考にブラウザ名とOSを取得するスクリプトを作ってみました。
元あったものよりは判別精度を上げたつもりなんだけど、どうなんだろう? 投稿者:Iさん (2006/12/26)


【実行結果】




【リスト】
<script langage="javascript"><!--
if(navigator.userAgent.indexOf("MSIE 7.0") > -1){ // UA に [MSIE 7.0] が含まれている場合
document.write('Windows Internet Explorer (Windows)');
}
else if(navigator.userAgent.indexOf("MS") > -1){ // UA に [MS] が含まれている場合
document.write('Microsoft Internet Explorer'); Ocheck()
}
else if(navigator.userAgent.indexOf("Netscape/8") > -1){ // UA に [Netscape/8] が含まれている場合
document.write('Netscape Browser (Windows)');
}
else if(navigator.userAgent.indexOf("Firefox") > -1){ // UA に [Firefox] が含まれている場合
document.write('Mozilla Firefox'); Ocheck()
}
else if(navigator.userAgent.indexOf("Mozilla") > -1){ // UA に Mozilla が含まれている場合

  if(navigator.userAgent.indexOf("AppleWebKit/") > -1) { // UA に [AppleWebKit/] が含まれている場合

    if(navigator.vendor == "Apple Computer, Inc.") { // vendor に Apple の情報が含まれている場合

      if(navigator.userAgent.indexOf("Gecko, Safari") > -1 ) { // UA に [Gecko, Safari] が含まれている場合
      myUA = navigator.userAgent;
      myTp = myUA.indexOf("Gecko, Safari",0);
      myFn = myUA.indexOf("/",myTp+15);
      myBr = myUA.substring(myTp+15,myFn);
      document.write(myBr); Ocheck()
      }
      else { // UA に [Gecko, Safari] が含まれていない
      myUA = navigator.userAgent;
      myTp = myUA.indexOf("Gecko)",0);
      myFn = myUA.indexOf("/",myTp+7);
      myBr = myUA.substring(myTp+7,myFn);
      document.write(myBr); Ocheck()
      }
    }

    else { // vendor に [Apple Computer, Inc.] が含まれていない場合
      if(navigator.userAgent.indexOf("Gecko, Safari") > -1 ) { // UA に [Gecko, Safari] が含まれている場合
      myUA = navigator.userAgent;
      myTp = myUA.indexOf("Gecko, Safari",0);
      myFn = myUA.indexOf("/",myTp+15);
      myBr = myUA.substring(myTp+15,myFn);
      document.write(myBr, ' に偽装された何か'); Ocheck()
      }
      else { // UA に [Gecko, Safari] が含まれていない
      myUA = navigator.userAgent;
      myTp = myUA.indexOf("Gecko)",0);
      myFn = myUA.indexOf("/",myTp+7);
      myBr = myUA.substring(myTp+7,myFn);
      document.write(myBr,' に偽装された何か'); Ocheck()
      }
    }
  }

  if(navigator.product == "Gecko") { // ブラウザシステムが Gecko かどうか判別

    if(navigator.vendor == "") { // vendor の値に何も指定されていないか
    myUA = navigator.userAgent;
    myTp = myUA.indexOf("Gecko/",0);
    myFn = myUA.indexOf("/",myTp+15);
    myBr = myUA.substring(myTp+15,myFn);
      if(navigator.userAgent.indexOf("AppleWebKit/") > -1) { // 誤判定防止
      void(0);
      }
      else if(myBr.indexOf("Gecko") > -1){ // 該当するものは固有のブラウザ情報を持たない
      document.write('Mozilla かその他の Gecko ブラウザ'); Ocheck()
      }
      else { // 固有のブラウザ情報を持つ
      document.write(myBr); Ocheck()
      }
    }

    else { // vendor の値に文字列が指定されている場合それを表示
    document.write(navigator.vendor); Ocheck()
    }
  }

  else if(navigator.userAgent.indexOf("Gecko") > -1){ // 非 Gecko が [Gecko] を名乗っている場合
  document.write('Gecko ブラウザに偽装された何か'); Ocheck()
  }
  else { // 上記に該当しない場合 Netscape 3-4 の可能性
  document.write('Netscape Navigator か Netscape Communicator'); Ocheck()
  }
}

else if(navigator.userAgent.indexOf("Opera") > -1){ // UA に [Opera] が含まれている場合
  if (window.opera) {
  document.write('Opera'); Ocheck()
  }
  else { // Opera ではない場合偽装の可能性
  document.write('Opera に偽装された何か'); Ocheck()
  }
}
else{ // 上記いずれにも該当しない場合
document.write('情報を判別できませんでした'); Ocheck()
}

function Ocheck() { // Ocheck() が呼び出されたら OS 判定を行う。
if(navigator.userAgent.indexOf("Windows") > -1){ // UA に [Windows] が含まれている場合
document.write(' (Windows)')
}
else if(navigator.userAgent.indexOf("Mac OS X") > -1){ // UA に [Mac OS X] が含まれている場合
  if(navigator.platform == "MacPPC") { // OS が Mac Power PC の場合
  document.write(' (Mac OS X / Power PC)')
  }
  else if(navigator.platform == "MacIntel") { // OS が Intel Mac の場合
  document.write(' (Mac OS X / Intel Mac)')
  }
  else { // PPC か Intel Mac か判別できなかった場合
  document.write(' (Mac OS X)')
  }
}
else if(navigator.userAgent.indexOf("Mac_PowerPC") > -1){ // UA に [Mac_PowerPC] が含まれている場合
document.write(' (Macintosh)')
}
else if(navigator.userAgent.indexOf("Linux") > -1){ // UA に [Linux] が含まれている場合
document.write(' (Linux)')
}
else { // いずれにも該当しない場合
document.write(' (OS 不明)')
}

}
// --></script>

目次へ戻ります