ブラウザの識別

　ブラウザのアプリケーションの情報は、navigatorオブジェクトと以下の各プロパティを使って取得できます。navigatorオブジェクトは、Webブラウザの情報を扱うオブジェクトです。これには、以下のようなプロパティがあります。

navigator object
プロパティ	platform	プラットフォーム名の取得
	appName	ブラウザ名の取得
	appVersion	バージョン名の取得
	userAgent	ブラウザ固有の情報の取得

// ソースコード 
document.write("・platform : ",   navigator.platform, "<br>");
document.write("・appName : ",  navigator.appName, "<br>");
document.write("・appVersion : ", navigator.appVersion);

[ 出力例 ]
・platform : Win32
・appName : Microsoft Internet Explorer
・appVersion : 4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR ... (省略)

　"platform"は、Windowsなら、"Win32","WinCE"のように"Win"を含んだ文字列を、Macなら、 "Mac68K","MacPPC"などの"Mac"を含んだ文字列、また、UNIXなら、"HP-UX HP"といった値を返します。"appName"は、IEなら"Internet Explorer"、NNなら、"Netscape"を含んだ文字列を返してきます。 　ただし、これらの値はまれに正確でないことがあるようです。
　正確な値が必要な時は、userAgentプロパティを使った方が安全です。これはブラウザ固有の情報を記した文字列で、種類やバージョン、OSごとに異なります。しかし、この設定を偽装できるブラウザもありますので、結局、完全に正確な情報を得ることは難しいようです。

* userAgentの例

・Windows & IE 4.0 : "Mozilla/4.0 (compatible; MSIE 4.01; Windows 98)"
・Windows & IE 5.0 : "Mozilla/4.0 (compatible; MSIE 5.00; Windows 98)"
・Windows & IE 5.5 : "Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)"
・Windows & IE 6.0 : "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)"
・Macintosh & IE 4.x : "Mozilla/4.0 (compatible; MSIE 4.01; Mac_PowerPC)"
・Macintosh & IE 5.x : "Mozilla/4.0 (compatible; MSIE 5.23; Mac_PowerPC)"
・Safari : "Mozilla/5.0 (Macintosh; U; PPC Mac OS X; ja-jp) AppleWebKit/124 (KHTML, like Gecko) Safari/125.1"
・NN 4.x : "Mozilla/4.7 [ja] (WinNT; U)"
・NN 6.x : "Mozilla/5.0 (Macintosh; U; PPC; ja-JP; rv:0.9.2) Gecko/20010726 Netscape6/6.1"
・NN 7.x : "Mozilla/5.0 (Windows; U; Windows NT 5.1; ja-JP; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)"
・Mozilla : "Mozilla/5.0 (X11; U; Linux i686; ja-JP; rv:1.4.1) Gecko/20031030"
・Firefox : "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0"
・Opera 6.x : "Mozilla/4.0 (compatible; MSIE 5.0; Windows XP) Opera 6.06 [ja]"
・Opera 7.x : "Mozilla/4.0 (compatible; MSIE 6.0; X11; Linux i686) Opera 7.23 [ja]"

　OSの種類をuserAgent文字列を使って取得する例です。

// ソースコード 
var ua = navigator.userAgent;
var strOS;

if 　　  (ua.indexOf("Win") >= 0)    strOS = "Win";
else if (ua.indexOf("Mac") >= 0)   strOS = "Mac";
else if (ua.indexOf("Linux") >= 0) strOS = "Linux";
else    strOS = "";

indexOf method ( String object )
・書式	str.indexOf(pattern)
・引数等	str : Stringオブジェクト / pattern : 検索文字列（検索条件）
・機能	文字列(str)の値を指定した条件(pattern)で後方検索
・戻り値	見つかった時...先頭位置の添え字 / 見つからない時...-1
・備考	文字列の添え字は0から始まる

　上記の例では、"Win", "Mac", "Linux"といったキーワードを変数strOSに代入して、それぞれ、Windows, Macintosh, Linuxの三つのOSを判別しています。これ以外のOSは、空の文字列 "" を代入します。 　

　ブラウザの種類をuserAgent文字列を使って取得する例です。

// ソースコード 
var ua = navigator.userAgent;
var strBrowser;

if       (ua.indexOf("MSIE") >= 0)         strBrowser = "IE";
else if (ua.indexOf("Netscape") >= 0) strBrowser = "NN";
else if (ua.indexOf("Safari") >= 0)      strBrowser = "Safari";
else if (ua.indexOf("Opera") >= 0)      strBrowser = "Opera";
else if (ua.indexOf("Firefox") >= 0)    strBrowser = "Firefox";
else if (ua.indexOf("Gecko") >= 0)      strBrowser = "Mozilla";
else if (ua.indexOf("Mozilla/4") >= 0)   strBrowser = "NN";
else    strBrowser = "";	

　userAgentに含まれるキーワードによって各ブラウザを識別して、変数 srBrowser に代入しています。

1. "MSIE" : Internet Explorer だけに含まれる
2. "Netscape" : Netscape Navigator 6 または 7 だけに含まれる
3. "Safari" : Safari だけに含まれる
4. "Opera" : Opera だけに含まれる
5. "Firefox" : Firefox だけに含まれる
6. "Gecko" : Gecko エンジンを持つものに含まれる（この時点では Mozilla のみ）
7. "Mozilla/4" : Mozilla/4 エンジンを持つものに含まれる（この時点では NN4 のみ）
8. 上記のいずれにも該当しない時は、空の文字列 ""

　6.の Geckoエンジンは、NN や Firefox などでも採用されていますが、if 文で順番通りに処理すれば、Mozilla だけが残っているはずです。同じように、7.の Mozilla/4 も他の種類のブラウザで使われていますが、この時点では NN4 のみが対象となっているはずです。

// ソースコード 
var ua = navigator.userAgent;
var strBrowser;
var nVersion;
var nHit;    // 合致した部分の先頭の文字の添え字

if ((nHit = ua.indexOf("MSIE")) >= 0) {
      strBrowser = "IE";
      nVersion = ua.substr(nHit+5, 3);
} else if ((nHit = ua.indexOf("Netscape")) >= 0) {
      strBrowser = "NN";
      if (ua.charAt(nHit+8) == "6" ) nVersion = ua.substr(nHit+10, 3);
      else                                    nVersion = ua.substr(nHit+ 9,  3);
} else if ((nHit = ua.indexOf("Safari")) >= 0) {
      strBrowser = "Safari";
      nVersion = ua.substr(nHit+7);
} else if ((nHit = ua.indexOf("Opera")) >= 0) {
      strBrowser = "Opera";
      nVersion = ua.substr(nHit+6, 3);
} else if ((nHit = ua.indexOf("Firefox")) >= 0) {
      strBrowser = "Firefox";
      nVersion = ua.substr(nHit+8, 3);
} else if (ua.indexOf("Gecko") >= 0) {
      nHit = ua.indexOf("rv:");
      strBrowser = "Mozilla";
      nVersion = ua.substr(nHit+3, 3);
} else if (ua.indexOf("Mozilla/4") >= 0) {
      strBrowser = "NN";
      nVersion = 4;
} else {
      strBrowser = "";
      nVersion = 0;
}

substr method ( String object )
・書式	str.substr(start [, len])
・引数等	str : Stringオブジェクト / start : 文字列の添え字 / len : 文字数
・機能	指定区間(startから文字数len）の文字列を取得
・戻り値	切り出した文字列
・備考	len省略時は文字列の最後まで

　userAgentに含まれるキーワードによって各ブラウザを識別して、変数 srBrowser に代入しています。同時に、変数 nVersion にバージョン番号を示す部分を取り出して代入しています。これには、substr メソッドや slice メソッドなどが利用できます。

　便利なことに、オブジェクトのメンバを使って対応するブラウザのバージョンを特定することができます。これは、条件文に書式を入れると、真偽値 (true | false) を返すためです。実際には、定義が存在すれば、まず、その内容を示す文字列に変換され、なければ undefined （未定義を表す値）に変換されます。条件文の文字列は、文字数が 0 以上なら true を返し、また、undefined は 常に false を返しますので、結局、真偽値のいずれかを取得できることになるわけです。 　

◆var s = document.getElementById;
　　　　・・・　IE6 の場合 // s = "function getElementById() { [native code] }"
◆var s = document.layers;
　　　　・・・　IE6 の場合 // s = undefined

　以下は、バージョンチェックに使われる代表的なメソッドを活用する例です。

●if (document.getElementById) ...
　　　　・・・　DOMが使用できるもの（IE5以上 / NN6以上 / Safari / Firefox など)

●if (document.all) ...
　　　　・・・　IE4 以上（document.all は IE 独自の仕様）

●if (document.layers) ...
　　　　・・・　NN4 のみ（document.layers は NN4 独自の仕様）

●if (window.opera) ...
　　　　・・・　Opera6 以上（window.opera は Opera 独自の仕様）