[訳註] Linkタイトルも一部和訳しましたが、実際のLink先に和訳があるとは限りません。和訳が用意されている場合でも、本文書での和訳と異なる題名となっていることがあります。

• Sniffer と Detection : 前者は"嗅ぎ分け"と直訳されることが多いですが、あまり好きな表現ではないので(^^; 前者を"判別"とし、後者は"判断"というように使い分けました。

以下、このような緑色の小さな文字(要CSS対応)となっている部分が訳註です。

ウェブページの作成にあたっては、閲覧者が多くのベンダーによる様々なバージョンのブラウザを使用している可能性を考慮に入れる必要があります。プラグインを必要とするような特定のページ要素が全てのオペレーティングシステムで利用可能ではないかも知れない可能性もまた、考慮に入れる必要があるかも知れません。

ここにあるサンプルコードによりブラウザのベンダ、バージョン番号、及びオペレーティングシステムを判断することが出来ます。このコードは次のブラウザでテストされています。Navigator 2, 3, 4、Netscape 6、Internet Explorer 3, 4, 5, 5.5, 6、Opera 3, 4, 5、HotJava 3.0 を Windows 98, Windows NT, Macintosh, RedHat Linux, SunOS5 上で。このコードはJavaScript互換ブラウザの全てのバージョン及びプラットフォームでの互換性があると考えられます。このコードはその名前が "is_" で始まる一連の変数群を生成します。これらの変数はブラウザのベンダ、バージョン番号、JavaScriptバージョン、オペレーティングシステムを示したものとなります。

ブラウザのベンダやバージョンを確認して、最適化したマークアップを動的に生成したり、動的生成ページ或いは使用されているブラウザやバージョン番号に合わせた JavaScript コードを実行する条件分岐をしたりすることが出来ます。

この手法は全てのブラウザでサポートされているわけではない機能を使用したページを作成する上で便利です。例えば、Navigator 4 を使用しているユーザは layer タグを含んだものを表示し、他のユーザは "非レイヤ" 版の同じものを表示することが出来ます。

別の例としては、Navigator 4 と Internet Explorer は同じ Dynamic HTML 機能を異なるオブジェクトやメソッドで実装していることが多くあります。ブラウザベンダを確認の後、使用されたブラウザに適した JavaScript コード分岐を行うことが出来ます。Netscape 6 の Gecko レイアウトエンジンの登場により、初めて W3C 標準の DOM Level1,2 を使用したコードを書けるようになりました。将来的には、全てのユーザエージェントが標準準拠となりブラウザやプラットフォームを確認する必要はなくなることでしょうが、Navigator 4 や IE5 がまだ広く使用されている現状では、スクリプトには常にコード分岐を含めるべきです。

ページを多くのブラウザに最適化する場合、ブラウザベンダ及び/或いはバージョンを確認した上で、使用されているブラウザに最適化したHTMLマークアップを動的生成するためにページの body 要素中の script 要素で document.write() 文を使用した方が簡単なことがあります。ベンダやバージョン別の HTML マークアップを動的生成するのに必要なコードの一例を用意しました。このコードは後述するブラウザベンダとバージョンを確認する為の JavaScript コードサンプルによって定義された "is_" 変数を使用します。

注 : Internet Explorer の将来のバージョンで私たちのコードが確実に正しく動作するようにするため、ここでは is_ie5 ではなく is_ie5up 変数を使用しています。しかし、Netscape 6 と Mozilla は Netscape 4 との互換性がないため、Navigator 4 を確認し、Netscape 6, Mozilla や他の Gecko レイアウトエンジンを搭載したユーザエージェントのために is_gecko を使用するべきです。条件分岐コードを書く場合にはいつも将来のブラウザへの前方互換に気を配るのを忘れないように!!

<SCRIPT>

<!--

  if (is_gecko) 

  {

   // Gecko レイアウトエンジン使用のユーザエージェント用マークアップを生成する document.write()


  }

  else if (is_nav4)

  {

   // Navigator 4用マークアップを生成する document.write()

  }

  else if (is_ie5up)

  {

   // IE4 以降用マークアップを生成する document.write()

  }

  else

  {

   // 初期のバージョン用の静的HTMLを生成する document.write()


  }

// -->

</SCRIPT>

これで、あなたのページのコア JavaScript 関数中の必要なところでベンダやバージョン別のコード分岐をすることが出来ます。以下のコード分岐は、特定のブラウザでのみ使用可能なオブジェクト、プロパティ、メソッド、関数を使用します。分岐したコードは、その HTML マークアップが特定のブラウザバージョンでのみ動的に生成される HTML ページ要素もまた使用することが出来ます。

この断片的コードは後述するブラウザベンダとバージョンを確認する為の JavaScript コードサンプルによって定義された "is_" 変数を使用し、条件的に別の分岐コードを評価します。

注 : Internet Explorer の将来のバージョンで私たちのコードが確実に正しく動作するようにするため、ここでは is_ie5 ではなく is_ie5up 変数を使用しています。しかし、Netscape 6 と Mozilla は Netscape 4 との互換性がないため、Navigator 4 を確認し、Netscape 6, Mozilla や他の Gecko レイアウトエンジンを搭載したユーザエージェントのために is_gecko を使用するべきです。条件分岐コードを書く場合にはいつも将来のブラウザへの前方互換に気を配るのを忘れないように!!
[訳註] 原文では ie4up instead of is_ie4 (is_ie4 ではなく is_ie4up) となっていましたが、明らかに間違いであるために訂正しました。

if (is_gecko)

{

   // Gecko レイアウトエンジン搭載のユーザエージェント用の JavaScript をここに

}

else if (is_nav4)

{

   // Navigator 4 用の JavaScript をここに

}

else if (is_ie5up)

{

   // IE4 以降用の JavaScript をここに

}

else if (is_nav3 || is_opera)

{

   // Nav3 と Opera 用の JavaScript をここに

}

else 

{

   // IE3 と Nav2 用の JavaScript をここに

}

Y2Kバグについて聞いたことがあるはずです。1999年以降の年を扱うように設計されていないコンピューターソフトウェアが2000年にエラーを起こしてしまうというあれです。では、V5.0 バグについて聞いたことはありますか？

V5.0 バグでは、バージョン 4.ｘ 以降のバージョンのブラウザに備えて設計されていない JavaScript コードがエラーを起こしてしまうのです。年が変わっても誤動作しないようにするために 2000 年までにソフトウェアを再確認するべきであるのと丁度同じように、新しいブラウザで誤動作をしないように Internet Explorer 5 や Netscape 6 を使用する前にソフトウェアを見直すべきです。

この V5.0 はごくありふれたミスによって引き起こされ得ます。これらの問題の犠牲になってしまわぬよう、今すぐコードを確認して下さい。・・・

１．コードがヴァージョンN以降のブラウザで動作するなら、== ではなく >= でブラウザバージョンチェックをしていることを確認して下さい。

例えば、Navigator 4 以降と Internet Explorer 4 以降で動作するコードがあるとしましょう。次の2つのクライアント判別の仕方を比較して下さい。・・・
 

後述のコードサンプルによる is_major 変数を使用した例も用意しました。

２．コードを新しいブラウザや W3C DOM に合わせて更新する必要があるのでしたら、今すぐサポートとバージョンチェックを組み込んで下さい。

Gecko レイアウトエンジンは Netscape 6 と Mozilla を W3Cドキュメントオブジェクトモデルレベル1 (DOM1) とレベル2 （DOM2) のような主な標準をサポートする初のブラウザとするでしょう。今に至るまで、先進の JavaScript アプリケーションや Dynamic HTML を書きたいと思うウェブ開発者は Navigator 4 DOM と Internet Explorer 4 DOM を使用するほかありませんでした。これらの DOM はいずれも独占的なものであり、W3C DOM 非準拠であり、相互互換性もありません。同じ機能を2つの異なった DOM で開発しデバッグすることの難しさ、苛立ち、手間から、ウェブ開発者達は全てのブラウザベンダが W3C DOM を完全にサポートし、一度書けばどこでも動くようにすることを求めました。

Netscape 6 と Mozilla は少なくともウェブ開発者達の要求する W3C 標準を提供します。W3C DOM の能力とクスプラットフォーム互換性の利点を全て享受するには、アプリケーションがそれをサポートするように改良する必要があります。W3C DOM を学ぶのには少々時間がかかるが、少なくともベンダー非依存、プラットフォーム非依存、アプリケーション非依存のドキュメントオブジェクトモデルについて学んでいるんだということを忘れないように。W3C DOM は21世紀の DOM なのだから。使い方を学ぶことであなたは、以降の生涯ずっと使用できる、現代のウェブサイトデザインと開発技術の最先端に位置することができるでしょう。

あるユーザエージェントが Gecko レイアウトエンジンを搭載しているか判断するためには、ユーザエージェント文字列が "Gecko" を含んでいるか確認すべきです。現在の Mozilla のユーザエージェント文字列規則についてはこのテクニカルノートをご覧下さい。

クライアント判断の有名な方法の一つにオブジェクト判断があります。オブジェクト判断の支持者は、新しいクライアントは絶えず出てくるのだから、クライアントを明確に判断してクライアント専用のオブジェクトとメソッドを使用するよりも、単に必要なオブジェクトが存在するか確認し、存在すれば使えばいいのだと主張します。

この手法は、その論理の極限までつきつめて、全ての個々のオブジェクトとメソッドを使用前に確実にテストする場合に限って上手くいきます。

この手法の問題は、多くの人が次のようなことをしてしまうことです…

• document.all の存在を確認し、存在すれば、IE4 が使用されており document.all それ自体のみならず Internet Explorer の DOM 全てが使用可能だと決めつける。
• document.layers の存在を確認し、存在すれば、Nav4 が使用されており document.layers それ自体のみならず Navigator 4 の DOM 全てが使用可能だと決めつける。

左列のコードが問題であるのは、document.all が定義されていても Internet Explorer 4 であるという保証はどこにもなく、document.layers が定義されていても Netscape Navigator 4 であるという保証はどこにもなく、document.getElementById が定義されていても Netscape 6, Mozilla や他の DOM1 準拠ブラウザであるという保証はどこにもないということです。

新しいブラウザは (Opera や iCAT のように) 絶えず出てくるのです。Netscape や Microsoft のブラウザ以外が Navigator と Internet Explorer の2つの DOM を混合した機能を持つかも知れません。例えば、非Netscape 非Microsoft ブラウザ DOM が document.layers と document.all の両方をサポートし、しかしながらどちらの機能も完全にはサポートしないかも知れません。もし document.all の存在を確認し、そして (document.all が定義されていたら) document.all の他の多くの IE の機能を使用したコードを書けば、そのコードは document.all をサポートするが他の IE の機能をサポートしないブラウザ全てでエラーを起こしてしまうことでしょう。同様に、document.layers の存在を確認し、そして (document.layers が定義されていたら) document.layers の他多くの Navigator 4 の機能を使用したコードを書けば、そのコードは document.layers をサポートするが他の Navigator 4 の機能をサポートしないブラウザ全てでエラーを起こしてしまうことでしょう。

既存のブラウザの新しいバージョンも絶えず出てきます。Netscape 6 や Mozilla は document.getElementById のような DOM1 の機能を完全にサポートしていますが、この機能をサポートする唯一のブラウザではありません。IE5 もまた document.getElementById を実装していますが、他の多くの W3C DOM 機能のサポートが欠けています。この特定のメソッドを判断することで、ブラウザがドキュメントオブジェクトの getElementById をサポートしていることは分かりますが、Netscape 6, Mozilla や IE5 であるかは分からないわけです。

以上による教訓 : 特定のオブジェクトを判断しても、その特定のオブジェクトを判断したに過ぎない。いずれのブラウザであるかは確実には分からない。特定のオブジェクトを判断したことで分かるのは現在のクライアントでその特定のオブジェクトが存在するということに過ぎない。

Internet Explorer には navigator.appVersion プロパティについて注意すべきおかしなことが2つあります。・・・

• navigator.appVersion プロパティを Internet Explorer 3.0 で調べると、Windowsに於いては Internet Explorer 3.0 は自身が Navigator 2.0 だとして navigator.appVersion プロパティが 2 を返すことが分かります。Macintosh に於いては Internet Explorer 3.0 は自身が Navigator 3.0 だとして navigator.appVersion は 3 を返しますが。
• Internet Explorer 5.0 で navigator.appVersion プロパティ を調べれば、4 を返します。

AOL のユーザエージェント文字列は必ず "AOL #.#" という文字列を含んでいます。シャープ記号が 3.0 や 4.0 といったバージョンを表します。これは実際ＨＴＴＰヘッダで報告されるユーザエージェント文字列に関しては常に成り立ちます。常に "AOL #.#" が含まれるのです。

しかしながら、JavaScript で報告される navigator.userAgent 文字列については、次のような場合 "AOL #.#" がユーザエージェント文字列に含まれないというバグが AOL 4.0 にあります。

• AOL のセッションで最初に開かれたブラウザウィンドウである場合。
• 組み込みブラウザが MSIE 3.x である場合。

Netscape 6 は 6 と呼ばれていますが、ユーザエージェント文字列の含むバージョン番号は 5 であることに注意しなければなりません。そして、このブラウザを判断する場合には is_major == 6 ではなく is_major == 5 として確認しなければなりません。

ブラウザベンダ、バージョン番号、オペレーティングシステムを判断するのに必要な JavaScript コードを用意しました。このコードはブラウザベンダ、バージョン番号、JavaScript バージョン、オペレーティングシステムを示す一連の変数群を生成します。

このコードはJavaScript互換ブラウザの全てのバージョン及びプラットフォームでの互換性があると考えられます。このコードは次のオペレーティングシステムとブラウザでテストされています。・・・

• Windows NT:  Navigator 4, Navigator 3, and Navigator 2; Internet Explorer 5; Internet Explorer 3; Opera 3
• Windows 98: Netscape 6;Navigator 4.76; Internet Explorer 4; Internet Explorer 5; Internet Explorer 5.5; Opera 5; HotJava 3
• Macintosh: Navigator 4, Internet Explorer 3.01, Internet Explorer 4.02
• RedHat Linux 6.2: Navigator 4.6; Netscape 6
• SunOS5: Navigator 3

//<!--

// 究極の JavaScript クライアント判別 バージョン 3.03

// (C) Netscape Communications 1999-2001.  再利用と変更を認めます。

// 修正 17 May 99 :  is_nav5up と is_ie5up を追加(後述).

// 修正 20 Dec 00 :  is_gecko を追加、 is_nav5up を is_nav6up に変更

//                   IE5.5 Opera4&5 HotJava3 AOLTV のサポートも追加

// 修正 22 Feb 01 :  IE 5.x, Opera 4, の JavaScript 判断を修正

//                   Opera 5 の判断を修正

//                   winME と win2k のサポートを追加

//                   browser-type-oo.js と同期

//           [訳註]  非オブジェクト指向バージョンを修正していったあと最後にオブジェクト指向バージョン

//                   にも変更点を纏めて一気に反映させた、ということではないかと予想します。(^^;

// 修正 26 Mar 01 :  Opera の判断を修正

// 修正 02 Oct 01 :  IE6 の判断を追加


// JavaScript クライアントについて知りたいがなかなか聞けないもの全て。

// 生成する "is_" 変数が示すのは以下の通り:

// (1) ブラウザベンダ:

//     is_nav, is_ie, is_opera, is_hotjava, is_webtv, is_TVNavigator, is_AOLTV

// (2) ブラウザージョン番号:

//     is_major (integer indicating major version number: 2, 3, 4 ...)

//     is_minor (float   indicating full  version number: 2.02, 3.01, 4.04 ...)

// (3) ブラウザベンダとメジャーバージョン

//     is_nav2, is_nav3, is_nav4, is_nav4up, is_nav6, is_nav6up, is_gecko, is_ie3,

//     is_ie4, is_ie4up, is_ie5, is_ie5up, is_ie5_5, is_ie5_5up, is_ie6, is_ie6up, is_hotjava3, is_hotjava3up,

//     is_opera2, is_opera3, is_opera4, is_opera5, is_opera5up

// (4) JavaScript バージョン番号:

//     is_js (float indicating full JavaScript version number: 1, 1.1, 1.2 ...)

// (5) OS プラットフォームとバージョン:

//     is_win, is_win16, is_win32, is_win31, is_win95, is_winnt, is_win98, is_winme, is_win2k

//     is_os2

//     is_mac, is_mac68k, is_macppc

//     is_unix

//     is_sun, is_sun4, is_sun5, is_suni86

//     is_irix, is_irix5, is_irix6

//     is_hpux, is_hpux9, is_hpux10

//     is_aix, is_aix1, is_aix2, is_aix3, is_aix4

//     is_linux, is_sco, is_unixware, is_mpras, is_reliant

//     is_dec, is_sinix, is_freebsd, is_bsd

//     is_vms

//

// ユーザエージェント文字列の詳細については次を参照してください。

// http://www.it97.de/JavaScript/JS_tutorial/bstat/navobj.html

// http://www.it97.de/JavaScript/JS_tutorial/bstat/Browseraol.html

//

// 注: 新しいブラウザがリリースされてもNav4 や IE4 のコードを"首"に

// したりはしたくないでしょうから、条件分岐する際、将来のバージョン

// でも動作して欲しいコードでは、is_ie5 や is_opera5 ではなく

// is_ie5up (IE5以降)や is_opera5up (Opera5.0 以降) を使用してください。


    // テストを簡単にするために全文字列を小文字に変換

    var agt=navigator.userAgent.toLowerCase();


    // *** ブラウザージョン ***

    // 注: IE5 ではこの値で 4 が返されるので IE5 の判断には is_ie5up を使用する。

    var is_major = parseInt(navigator.appVersion);

    var is_minor = parseFloat(navigator.appVersion);


    // 注: Opera と WebTV は Navigator のマネをしますが、厳密に判断します。

    // マネをするのを認めるなら、opera と webtv のコードを除外してください。

    var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)

                && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)

                && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));

    var is_nav2 = (is_nav && (is_major == 2));

    var is_nav3 = (is_nav && (is_major == 3));

    var is_nav4 = (is_nav && (is_major == 4));

    var is_nav4up = (is_nav && (is_major >= 4));

    var is_navonly      = (is_nav && ((agt.indexOf(";nav") != -1) ||

                          (agt.indexOf("; nav") != -1)) );

    var is_nav6 = (is_nav && (is_major == 5));

    var is_nav6up = (is_nav && (is_major >= 5));

    var is_gecko = (agt.indexOf('gecko') != -1);



    var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

    var is_ie3    = (is_ie && (is_major < 4));

    var is_ie4    = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );

    var is_ie4up  = (is_ie && (is_major >= 4));

    var is_ie5    = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );

    var is_ie5_5  = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));

    var is_ie5up  = (is_ie && !is_ie3 && !is_ie4);

    var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);

    var is_ie6    = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );

    var is_ie6up  = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);


    // 既知のバグ: AOL4 では IE3 が組み込まれている場合や最初に開かれたブラウザ

    // ウィンドウである場合には false を返します。であるから、is_aol, is_aol3,

    // is_aol4 は 100% 信頼できるものではありません。

    var is_aol   = (agt.indexOf("aol") != -1);

    var is_aol3  = (is_aol && is_ie3);

    var is_aol4  = (is_aol && is_ie4);

    var is_aol5  = (agt.indexOf("aol 5") != -1);

    var is_aol6  = (agt.indexOf("aol 6") != -1);


    var is_opera = (agt.indexOf("opera") != -1);

    var is_opera2 = (agt.indexOf("opera 2") != -1 || agt.indexOf("opera/2") != -1);

    var is_opera3 = (agt.indexOf("opera 3") != -1 || agt.indexOf("opera/3") != -1);

    var is_opera4 = (agt.indexOf("opera 4") != -1 || agt.indexOf("opera/4") != -1);

    var is_opera5 = (agt.indexOf("opera 5") != -1 || agt.indexOf("opera/5") != -1);

    var is_opera5up = (is_opera && !is_opera2 && !is_opera3 && !is_opera4);


    var is_webtv = (agt.indexOf("webtv") != -1); 


    var is_TVNavigator = ((agt.indexOf("navio") != -1) || (agt.indexOf("navio_aoltv") != -1)); 

    var is_AOLTV = is_TVNavigator;


    var is_hotjava = (agt.indexOf("hotjava") != -1);

    var is_hotjava3 = (is_hotjava && (is_major == 3));

    var is_hotjava3up = (is_hotjava && (is_major >= 3));


    // *** JAVASCRIPT バージョン ***

    var is_js;

    if (is_nav2 || is_ie3) is_js = 1.0;

    else if (is_nav3) is_js = 1.1;

    else if (is_opera5up) is_js = 1.3;

    else if (is_opera) is_js = 1.1;

    else if ((is_nav4 && (is_minor <= 4.05)) || is_ie4) is_js = 1.2;

    else if ((is_nav4 && (is_minor > 4.05)) || is_ie5) is_js = 1.3;

    else if (is_hotjava3up) is_js = 1.4;

    else if (is_nav6 || is_gecko) is_js = 1.5;

    // 注: 将来的には、新しいバージョンのJSが出たらこのコードを更新します。

    // 今のところ、将来のバージョンの Nav や IE が"少なくとも" JS 1.x 互換

    // であることを示します。JS バージョン互換のチェックには常に > や >=

    // を使用するようにしてください。

    else if (is_nav6up) is_js = 1.5;

    // 注: マックでの ie5up は 1.4

    else if (is_ie5up) is_js = 1.3


    // HACK: 他のブラウザは分かりません。JS バージョンチェックは > や>= で。

    else is_js = 0.0;


    // *** プラットフォーム ***

    var is_win   = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );

    // 注: Opera 3.0 では Win32 環境全てでユーザエージェント文字列に "Windows 95/NT4"

    // が含まれており、Win95 と WinNT の区別が出来ません。

    var is_win95 = ((agt.indexOf("win95")!=-1) || (agt.indexOf("windows 95")!=-1));


    // 16 bit バージョンと思われる。

    var is_win16 = ((agt.indexOf("win16")!=-1) || 

               (agt.indexOf("16bit")!=-1) || (agt.indexOf("windows 3.1")!=-1) || 

               (agt.indexOf("windows 16-bit")!=-1) );  


    var is_win31 = ((agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("win16")!=-1) ||

                    (agt.indexOf("windows 16-bit")!=-1));


    var is_winme = ((agt.indexOf("win 9x 4.90")!=-1));

    var is_win2k = ((agt.indexOf("windows nt 5.0")!=-1));


    // 注: Win98 の信頼できる判断法は存在しないようです。次のようだから:

    //      - Nav4.x 以前ではユーザエージェントで "Windows" だけしか得られない。

    //      - Win98 上の Mercury では 32 bit バージョンは "Win98" を返すが、

    //        16 bit バージョンは "Win95" を返す。

    var is_win98 = ((agt.indexOf("win98")!=-1) || (agt.indexOf("windows 98")!=-1));

    var is_winnt = ((agt.indexOf("winnt")!=-1) || (agt.indexOf("windows nt")!=-1));

    var is_win32 = (is_win95 || is_winnt || is_win98 || 

                    ((is_major >= 4) && (navigator.platform == "Win32")) ||

                    (agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1));


    var is_os2   = ((agt.indexOf("os/2")!=-1) || 

                    (navigator.appVersion.indexOf("OS/2")!=-1) ||   

                    (agt.indexOf("ibm-webexplorer")!=-1));


    var is_mac    = (agt.indexOf("mac")!=-1);

    // hack: マックでの ie5 の JavaScript バージョン

    if (is_mac && is_ie5up) is_js = 1.4;

    var is_mac68k = (is_mac && ((agt.indexOf("68k")!=-1) || 

                               (agt.indexOf("68000")!=-1)));

    var is_macppc = (is_mac && ((agt.indexOf("ppc")!=-1) || 

                                (agt.indexOf("powerpc")!=-1)));


    var is_sun   = (agt.indexOf("sunos")!=-1);

    var is_sun4  = (agt.indexOf("sunos 4")!=-1);

    var is_sun5  = (agt.indexOf("sunos 5")!=-1);

    var is_suni86= (is_sun && (agt.indexOf("i86")!=-1));

    var is_irix  = (agt.indexOf("irix") !=-1);    // SGI

    var is_irix5 = (agt.indexOf("irix 5") !=-1);

    var is_irix6 = ((agt.indexOf("irix 6") !=-1) || (agt.indexOf("irix6") !=-1));

    var is_hpux  = (agt.indexOf("hp-ux")!=-1);

    var is_hpux9 = (is_hpux && (agt.indexOf("09.")!=-1));

    var is_hpux10= (is_hpux && (agt.indexOf("10.")!=-1));

    var is_aix   = (agt.indexOf("aix") !=-1);      // IBM

    var is_aix1  = (agt.indexOf("aix 1") !=-1);    

    var is_aix2  = (agt.indexOf("aix 2") !=-1);    

    var is_aix3  = (agt.indexOf("aix 3") !=-1);    

    var is_aix4  = (agt.indexOf("aix 4") !=-1);    

    var is_linux = (agt.indexOf("inux")!=-1);

    var is_sco   = (agt.indexOf("sco")!=-1) || (agt.indexOf("unix_sv")!=-1);

    var is_unixware = (agt.indexOf("unix_system_v")!=-1); 

    var is_mpras    = (agt.indexOf("ncr")!=-1); 

    var is_reliant  = (agt.indexOf("reliantunix")!=-1);

    var is_dec   = ((agt.indexOf("dec")!=-1) || (agt.indexOf("osf1")!=-1) || 

           (agt.indexOf("dec_alpha")!=-1) || (agt.indexOf("alphaserver")!=-1) || 

           (agt.indexOf("ultrix")!=-1) || (agt.indexOf("alphastation")!=-1)); 

    var is_sinix = (agt.indexOf("sinix")!=-1);

    var is_freebsd = (agt.indexOf("freebsd")!=-1);

    var is_bsd = (agt.indexOf("bsd")!=-1);

    var is_unix  = ((agt.indexOf("x11")!=-1) || is_sun || is_irix || is_hpux || 

                 is_sco ||is_unixware || is_mpras || is_reliant || 

                 is_dec || is_sinix || is_aix || is_linux || is_bsd || is_freebsd);


    var is_vms   = ((agt.indexOf("vax")!=-1) || (agt.indexOf("openvms")!=-1));


// JavaScript隠蔽終了 -->

これはあなたがお使いのブラウザでこのコードを使用した結果です。以下のテキストはご利用のブラウザベンダ、バージョン、オペレーティングシステムを JavaScript で判別して動的生成したものです。

元となるデータ

バージョン番号

ブラウザバージョン

JavaScript バージョン

OS

で、何故オブジェクト指向にしないのかって？

以下のようにもう少し美しい手法ではなく、どうして似たような名前の変数群を生成するのか疑問なのでしょう。・・・

function Is ()

{   var agt=navigator.userAgent.toLowerCase();


    this.major = parseInt(navigator.appVersion);


    this.minor = parseFloat(navigator.appVersion);


    this.nav  = ((agt.indexOf('mozilla')!=-1) && ((agt.indexOf('spoofer')==-1)

                && (agt.indexOf('compatible') == -1)));

    this.nav2 = (this.nav && (this.major == 2));

    this.nav3 = (this.nav && (this.major == 3));



    ・・・ 中略 ・・・

    this.vms   = (agt.indexOf("vax")!=-1) || (agt.indexOf("openvms")!=-1);

}


var is = new Is(); 


if (is.nav) {  ・・・ navigator 用コードをここに ・・・ }

else if (is.ie) {  ・・・ explorer 用コードをここに ・・・ }

簡単なことです。"is" オブジェクトに纏めることでカプセル化した変数を提供するこのコードの方が遙かに美しいですが、Macintosh の Internet Explorer 3 では破綻します。Mac の IE3 で "is" オブジェクトを生成する場合、最初の読み込み時は上手くコードが動作しますが、ページをリロードすればブラウザがクラッシュします。Mac の IE3 でのこの問題を回避するため、"is" オブジェクトは生成しないのです。その代わり、同じような名前の真偽値変数群を生成します。これは汚いですが、Macintosh IE3 での JScript のこのバグに対応させる代償なのです。

もう一つ考えられる対策は全てのブラウザでオブジェクト指向のコードを使用するが、Mac の IE3 ではオブジェクト指向コードの実装を避けるようにするチェックで囲うことです。これによりオブジェクト指向の設計を保ちますが、is オブジェクトを参照する度に if (!isIE3Mac && is_nav4up) といった追加の真偽判断が必要となります。こういった追加の真偽判断は面倒なので、諦めて上のような単純な非オブジェクト指向としたのです。しかしながら、オブジェクト指向の手法が好きでしたら、Macでの安全確認付オブジェクト指向クライアント判別を用意していますのでご利用下さい。最後に、Mac の IE3 をサポートする必要がないのでしたら、オブジェクト指向コードを用いつつ、Macでの安全確認を省くことも出来ます。
 

他のブラウザ判別に関する情報源

 BrowserSpy

 userAgent Strings on Browsers Based on Mozilla and Applications That Embed Gecko Layout Engine

更に詳しく

JavaScript Known Bug List
Sample Code Area
Articles
JavaScript Course
Other JavaScript Resources
JavaScript Documentation
What's New in JavaScript for Navigator 4.0
JavaScript Scripting Tools

VIEW SOURCE の記事

Beyond Data Basics: Writing JavaScript Database Applications, Part 1
Beyond Data Basics: Writing JavaScript Database Applications, Part 2
JavaScript Date Object Techniques
Scripting Layer Effects and Transitions
Detecting a JavaScript Client
Bringing Images to Life with JavaScript

会員情報源

JavaScript Newsgroups
JavaScript FAQ