| ブラウザ名だけでなく、ブラウザのバージョンも取得して表示してみます。 |
| 難易度:★★☆☆☆☆☆☆☆☆ |
| 【実行例】 |
【リスト】
<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>
|
| 【説明】 サーフィンをしていると、「あなたのブラウザは、です」というメッセージをワンポイントに置いているホームページを、よく、見かけます。 これは、わが、イヌでもわかる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>
|