JavaScript FAQ(22)——クライアント情報

19、クライアント情報
 
1、ブラウザ名(Browser Name)
Q:ブラウザの名前はどうやって検出しますか?
A:ユーザブラウザの実際の名前を取得するには、navigator.appNameとnavigator.userAgent属性を使うことができます.userAgent属性はappNameよりもっと信頼できます.例えば、FirefoxはNetscape Navigatorに対応していますので、navigator.appNameは「Netscape」に戻ります.
以下のコード例は、navigator.userAgentを使用してブラウザの検出を行う.また、navigator.appnameとnavigator.appVersionも使用しており、userAgentが望まれない形に戻るときのみ参考にしています.以下はあなたのブラウザから出力します.
 例でブラウザの検出を行うソースコードは、

var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var fullVersion  = ''+parseFloat(navigator.appVersion); 
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;

// In MSIE, the true version is after "MSIE" in userAgent
if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
 fullVersion = nAgt.substring(verOffset+5);
}
// In Opera, the true version is after "Opera" 
else if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+6);
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
 fullVersion = nAgt.substring(verOffset+7);
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
 fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1) fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1) fullVersion=fullVersion.substring(0,ix);

majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
 fullVersion  = ''+parseFloat(navigator.appVersion); 
 majorVersion = parseInt(navigator.appVersion,10);
}

document.write('Browser name  = '+browserName+'<br>');
document.write('Full version  = '+fullVersion+'<br>');
document.write('Major version = '+majorVersion+'<br>');
document.write('navigator.appName = '+navigator.appName+'<br>');
document.write('navigator.userAgent = '+navigator.userAgent+'<br>');

 
2、ブラウザバージョン(Browser Version)
Q:ブラウザバージョンはどうやって検出しますか?
A:残念なことに、navigator.appVersionは検査上ブラウザのバージョンがあまり良くないです.例えば、多くのJavaScriptをサポートするブラウザでは、navigator.appVersionの値は、ユーザーブラウザの実際バージョンではなく、Netscape Navigatorのバージョンに対応しています.(さらに、JavaScriptアプリケーションの初期段階では、Microsoft Internet Explorer 3のnavigator.appVersionの戻り値は2であり、Netscape Navigator 2に対応することを意味する.)
したがって、上記のブラウザの完全なバージョン数を得るには、ブラウザ名の例のように、navigator.userAgentの戻り値に依存する必要があります.以下はあなたのブラウザの名前とバージョンです.
 (ソースコードは記事ブラウザ名を参照)
 
3、オペレーティングシステム(Operating System)
Q:クライアントのオペレーティングシステムはどうやって検出しますか?
A:クライアント上のオペレーティングシステムを検出するには、スクリプトはナビゲート.appVersionの値を分析する必要があります.以下は簡単な例です.OS Name変数にオペレーティングシステムの名前を付与します.

// This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

document.write('Your OS: '+OSName);

あなたのオペレーティングシステムでは、このシナリオの結果は以下の通りです.
 (より詳細なオペレーティングシステム情報を得るためには、スクリプトはナビゲート.appVersionをより複雑に分析することができますが、原理は同じです.)
 
4、スクリーンサイズ(Screen Size)
Q:クライアントの画面サイズはどうやって取得しますか?
A:クライアントの画面サイズを検出するには、プロパティscreen.widthとscreen.heightを使用することができます.この2つの属性は主要ブラウザの4つのバージョンでサポートされています.ユーザーがNetscape Navigator 3を使ってJavaを有効にすると、スクリーンの幅と高さをJavaで調整できます.
下のコードは画面の実際の幅と高さをそれぞれ変数screenWとscreenHに割り当てて、それらの値を出力します.ユーザが古いバージョンのブラウザを使用すると、screenWとsreenHはそれぞれ640と480に割り当てられます.

var screenW = 640, screenH = 480;
if (parseInt(navigator.appVersion)>3) {
 screenW = screen.width;
 screenH = screen.height;
}
else if (navigator.appName == "Netscape" 
    && parseInt(navigator.appVersion)==3
    && navigator.javaEnabled()
   ) 
{
 var jToolkit = java.awt.Toolkit.getDefaultToolkit();
 var jScreenSize = jToolkit.getScreenSize();
 screenW = jScreenSize.width;
 screenH = jScreenSize.height;
}

document.write(
 "Screen width = "+screenW+"<br>"
+"Screen height = "+screenH
)

あなたのブラウザでコード出力は以下の通りです.
 
5、ブラウザのウィンドウサイズ(Browser Window Size)
Q:ブラウザウィンドウのサイズはどうやって取得しますか?
A:ブラウザウィンドウの実際のサイズを決定するには、次の属性が使えます.

はNetscape Navigator 4にあります.window.inner Width、window.inner Height

Microsoft Internet Explorerで:document.body.offset Width、document.body.offset Height

なお、Dcument.body.offset WidhtとDcument.body.offset Heightは、ブラウザで＜BODY＞タグをロードした後に実行しなければならない.
下のコードでは、windWとwindHはそれぞれ実際のブラウザウィンドウの幅と高さに割り当てられ、出力される.古いバージョンのブラウザがユーザによって使用される場合、windWおよびwindHはそれぞれ630および460に設定される.

var winW = 630, winH = 460;

if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth;
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}

document.write(
 "Window width = "+winW+"<br>"
+"Window height = "+winH
)

あなたのブラウザでコードの実行結果は以下の通りです.