JavaScript入門 - 情報の取得/ブラウザ振分け - サンプル - ブラウザ
ブラウザ情報を取得 ::
ブラウザの情報を取得する場合に使用します。
サンプル：
コードネーム: Mozilla
ブラウザの名称: Netscape
バージョン情報: 5.0 (Windows; ja-JP)
ユーザーエージェント: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja-JP; rv:1.7.10) Gecko/20050717 Firefox/1.0.6
OS判別とブラウザ判別 ::
05xx.sub.jp/javascript/sample/sample09.html
0Sの版別とブラウザの判別をする場合に使用します。
機種別に外部JavaScriptファイルや外部CSSファイルの読み込みが必要な場合に使用します。
hotwired.goo.ne.jp/webmonkey/98/38/index2a_page7.html
ブラウザ判別
今まで僕がカバーしてきたほとんど全部は、JavaScriptの使用できる全てのブラウザで動く。だけど、ある種のブラウザでは使えないのもいくつかある。MSIE 3.0がそうで、イメージスワッピングをサポートしていない。だから、正確に動作をイメージスワッピングに依存しているページがあるなら、全てのイメージスワッピングを拒絶するか、MSIE 3.0ユーザーのためにしつらえた情報をMSIE 3.0に提供するかだ。
違った機能のブラウザを扱うのに、いくつかのアプローチがある。一番直接的な方法はだれがどのブラウザを使っているのかを確かめて、それに適した情報をサービスする方法だ。
これを行なうにあたっていくつかの方法がある。いくつかのサイトでは、一番始めに、君が使っているブラウザを選択するように言ってくるね。例：「もし、ネットスケープを使用しているならここをクリックしてください」でも、これは、いくつかの理由で理想的な解決方法ではない。ひとつは、ユーザーを混乱させる（そして短気なユーザーにとっては、そんな余分なクリックは、そこに留まるか、手を引くかという違いを意味するかもしれない）。それはまた、君が同じページについて2つの（もしくはもっとたくさんの）バージョンを維持しなければならないということを意味する。
代用案としては、だれがどのブラウザを使っているのかをJavaScriptを使用して確かめ、自動的にビジターを使用中のブラウザで動くページに案内する方法がある。残念なことに、これはまだ、君に2つかそれ以上のバージョンを維持することを強要する。本当に面倒だけれど。
もっと良い解決方法は、自分のページをどれかのブラウザに最適化し、他のブラウザには回避方法を提供することだ（今日の残りのレッスンではそこに集中するよ）。
例えば、僕らはいくつかのブラウザはイメージスワップを出来るけれど、出来ないブラウザもあることを知っているね。この機能を調べるのはとても簡単でよかった。ただ、そのブラウザがdocument.imagesオブジェクトを持っていることを確認するだけだ。
if (document.images)
{
イメージスワップのコードをここに入れる
}
君のイメージスワップコードがイメージスワップをサポートしているブラウザによってのみ動くことが確認されたね。もし、document.imagesオブジェクトが存在しないのなら、テストは失敗して、コードは実行されない。
こういうトリックはメソッドと関数にも有効だ。全てのブラウザが全部のメソッドを持っているわけじゃない。例えば、ネットスケープ4では、window.moveTo()メソッドを使って、実際にウィンドゥを画面の中で動かせるだろう。もしそのメソッドが、それを呼出す前に存在しているのかどうか確かめたかったら、これをやってごらん。
if (window.moveTo)
{
make that window fly
}
ブラウザが、メソッドを呼出す前に使いたい特徴をサポートしているのを確かめることで、君のスクリプトが不愉快なスクリプトエラーなしで動くことを確認できる。ブラウザやバージョンのチェックよりも、その機能が使えるかどうかをチェックすることによって、色々なプラットホーム、バージョン、ブラウザの機能を追いかける必要がなくなる。
さあ、これがブラウザ探知についての全てだ。でも、ブラウザについてのトピックにいる間にヒストリーオブジェクトを見てみよう。
Geckoブラウザの出力するユーザーエージェント名
次の例にあるようにGeckoブラウザはユーザーエージェント名にGeckoという名前を刻んでいます。 つまりGeckoという文字列が含まれるか否かによってGeckoエンジンを使用したGeckoブラウザかどうかを判定できます。
Mozilla Nightly Build(2002年12月22日)
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.3b) Gecko/20021222
Phoenix 0.5(現Mozilla Firebird)
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.3a) Gecko/20021207 Phoenix/0.5
Chimera(現Camino)
Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.0.1) Gecko/20021220 Chimera/0.6+
Mozilla 1.0
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.0.0) Gecko/20020530
Netscape7.01
Mozilla/5.0 (Windows; U; Windows NT 5.1; ja-JP; rv:1.0.2) Gecko/20021120 Netscape/7.01
Netscape6.2.2
Mozilla/5.0 (Windows; U; Windows NT 5.0; ja-JP; rv:0.9.4.1) Gecko/20020314 Netscape6/6.2.2
Geckoブラウザの判定関数
Geckoブラウザか否かを判定するJavascript関数とそのサンプルです。 IsGecko関数はユーザーエージェント名にGeckoが含まれていればtrueを返します。 なお、これらのコードは自由に使用・改変・再配布していただいてかまいません。
Mac用のブラウザである"safari"(Konqueror)がGeckoブラウザと誤認されるように偽装していることが、 先日公開されたベータ版から判明しました。
対応策として調べる文字列を"Gecko"から"Gecko/"に変更しています。 詳細は次のバグをご覧ください。 [Bug 2917]
function IsGecko(){
if(navigator){
if(navigator.userAgent){
if(navigator.userAgent.indexOf("Gecko/") != -1){
return true;
}
}
}
return false;
}
Geckoブラウザかどうかを判定し、あなたのブラウザのユーザーエージェント名を表示します
次のサンプルは1.0より古い開発中のGeckoブラウザか、1.0以降のGeckoブラウザかの判定は次の関数を使えば判定できます。
function IsGeckoOne(){
if(IsGecko()){
if(navigator.userAgent.indexOf("rv:1.") != -1){
return true;
}
}
return false;
}
Geckoブラウザかどうかを判定し、Geckoブラウザだった場合は1.0以降のものか判定します
次のサンプルは1.0branchビルドかtrunkビルドかを見分けるものです。 Mozilla1.0以降は開発版の1.xと、安定版の1.0.xとに分かれます。 Netscapeは後者、Mozilla Firebirdは前者、一般的にMozillaそのものを使っている人も前者のようです。
function IsGeckoTrunk(){
if(IsGecko()){
if(navigator.userAgent.indexOf("rv:1.") != -1
&& navigator.userAgent.indexOf("rv:1.0") == -1){
return true;
}
}
return false;
}
Geckoブラウザかどうかを判定し、Geckoブラウザだった場合はtrunkか1.0branchかも判定します
使い方
これら3つの関数は次のように使えば良いでしょう。
if(IsGecko()){
//Geckoブラウザ
if(IsGeckoOne()){
//Mozilla1.0.0rc1以降のGeckoブラウザ
if(IsGeckoTrunk()){
//Mozilla1.x
}else{
//Mozilla1.0.x
}
}else{
//M16以降、Mozilla0.9.9までのGeckoブラウザ
}
}else{
//Gecko以外のブラウザ(M15以前のGeckoブラウザ含む)
}
IsGeckoOne関数とIsGeckoTrunk関数の使う順番に注意してください。
これらのロジックはCGI等にも応用できます
いろいろ調べたのですが、どうもうまいソースが
見つからないので、相談させてください。ほぼ初心者です・・
index.htmlにアクセスした時に、IEと、NN4.x、N6.Xで開く
ファイルを分けたいのですが、どうもうまくいきません。
下のソースをベースにやっているのですが、
どう変えたら3つ（4つか）に分けることができるでしょうか。
・以下index.htmlのbody部分
上記を、ネスケ4以降と、6以降に分けるものにしたいのですが・・・
IEは一つでいいのですが。
このソース自体がとんちんかんなのかもしれませんが、
IEとNN4.XとN6とその他ブラウザに分ける方法を
教えてください。
■ ブラウザ判別して強制排除（IE・トップ用）
アクセスしてきた人のブラウザを判断し、許可したブラウザ以外は強制的に排除するスクリプトです。
IEでアクセスするとJavaScriptのトップに飛びます。 IE以外のブラウザが入った場合は警告を出します。
サンプル
[ ソース ]
・
・
・
ソースをダウンロードする
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
クロスブラウザのために
ブラウザの判別の種類は大きく JavaScript の言語仕様のレベルと DOM の種類・サポートレベルを知ることの２つの目的があるといいましたが、 クロスブラウザのページを作成するためには、両者の組合せを考慮するのは至難の業と 言わざるを得ません。
特に、クロスバージョンを目的とする場合には、 なるべく低いバージョンでも解釈できる文法に則って記述する必要があります。
例えば、 switch文 や prototype プロパティは NN3(IE4) からのサポートなので NN2(IE3) でも動作できるようにするには if 〜 else を使用したり、 prototype によりメソッドなどを定義しない などの注意が必要です。
#> IEのサポートレベルについては JScriptランゲージリファレンスを、 NN のサポートレベルについては JavaScriptリファレンスの statement, Core を 参照して下さい。
また、 DOM に関しては現在既に複数の DOM があり、 しかも「バージョン」の概念もなく存在していますので、 JavaScript のバージョンに 関連して切り分けるのではなく、必要なオブジェクトやプロパティがあるかないかで、 判断する必要がありそうです。
例えば、 Mozilla もサポートする DHTML を作成するには以下のような判定をして 違いを吸収します。
// _dom : Mozilla = 1, NN4 = 2, IE4/5 = 3, その他 = 0
_dom=(document.all? // IE4,5 ?
3:(document.getElementById? // Mozilla ?
1:(document.layers? // NN4 ?
2:0
)
)
);
ここで注意しなければならないのは、 判定要素として document.all, document.getElementById, document.layers を使用していますが、 getElementById は IE5 にも実装されていますし、 document.layers は Mozilla にも null オブジェクトとして痕跡が残っています ( NN6 でも痕跡が残るかは不明 )。
IE5 の getElementById は W3C DOM の実装の一環として実装されていると思いますが、 現実的には W3C DOM の一部の機能( 別名 MS にとって都合の良い機能 )のみの実装なので、 W3C DOM として判定すると問題があります。ですから、判定の順番は重要です。
ブラウザの識別
判別方法の種類
ブラウザが IE4/5,NN4,Mozilla のいずれであるかを判別する方法は いろいろと考えられます。
現在比較的一般的である手法を整理してみると以下のようになるでしょうか。
ブラウザ判別手法 No. 手法 簡単な解説
1 appVersion navigator.appVersion プロパティからバージョン番号を取り出し判別する
2 SCRIPTタグ の language属性 JavaScript のバージョンを指定する
3 all,layers document.all/layers プロパティから判断する
ブラウザ振分け（オブジェクトの有無） - IENN
● 意識調査：スタイルシートの導入について
サイト内検索 Google
オブジェクトの有無を調べて、ブラウザの種類とバージョンを判別するスクリプトです。
【ブラウザの判別】
あなたのブラウザはNetscapeですね？
ソース
解説
特定のオブジェクトに対応しているかどうかを確認して、ブラウザの種類とバージョンを判別する方法です。
上記の例は、document.all が使える場合はIE、それ以外で document.layers または document.getElementById が使える場合はNN、という感じで、IEとNNを判別しています。
青い文字の部分は、必要に応じて書き換えてください。
【対応状況】
document.all … IE4 〜
document.getElementById … IE5 〜、NN6 〜
document.layers … NN4
document.images … IE4 〜、NN3 〜
上記の対応状況を使って、次の例のように細かく振分けることもできます。
■IEのみ
if(document.all){
// IEのみの処理
}
■IE4のみ
if(document.all && !document.getElementById){
// IE4のみの処理
}
■IE5以上のみ
if(document.all && document.getElementById){
// IE5以上のみの処理
}
■NN4のみ
if(document.layers){
// NN4のみの処理
}
■NN6以上のみ
if(!document.all && document.getElementById){
// NN6以上のみの処理
}
■IE4以上とNN6以上のみ
if(document.all || document.getElementById){
// IE5以上とNN6以上のみの処理
}
■IE5以上とNN6以上のみ
if(document.getElementById){
// IE5以上とNN6以上のみの処理
}
■IE4以上とNN3以上のみ
if(document.images){
// IE4以上とNN3以上のみの処理
}
www.tagindex.com/javascript/user/dist1.html
