Navigator

Navigator オブジェクトは、ブラウザ自身を指しています。
下層には、mimeTypes と plugins と言う2つのオブジェクトがありますが
それらはIEでは有効ではないので、使い道は限られます。
IEには userProfileと言うプロパティがあり、これは特殊なオブジェクトとして扱います。
IE専用の物に付いては別ページ(clientInformation)で簡単に解説します。

このページでは 主にブラウザを判別して処理に生かす方法を解説します。

重要な4つのプロパティ



ビジターのブラウザタイプを読み取るのが、navigatorオブジェクトでは
最も多く使われる利用方法だと思います。
次の4つは NN、IEに共通して読取りができるのでこれを使います。

navigator.userAgentコードネームとコードバージョンを返します
userAgentは 私が最も良く使うプロパティです。
Netscpae では Mozilla/4.5 [ja] (Win98; I)
IEでは Mozilla/4.0 (compatible; MSIE 4.01; Windows 98)
この様な値を返します。(ブラウザ・OSによって異なります)

最初の値Mozillaを確認する事で Mozilla(または互換)である事がわかります。
これで、Mozilla(互換) かそうでないかを分ける事が可能です。
次にバージョン /4.0を取り出す事で、ほぼJavaScript対応のレベルがわかります。
また、Netscapeについてはこのバージョンとアプリバージョンが同じです。
IEは compatible という文字とアプリの名前MSIE とバージョンを含みます。
また、OSの名前を Win98や Windows98 という文字で含んでいます。
Macでは Macintosh Mac_PowerPCという文字を含みますので
単純にはWinMacを言う文字で判別できます。

単純に文字列をあてにしすぎると、他のブラウザでその文字を含む場合に
勘違いを起こしますが、全てのブラウザAgent名のリストがあるわけでもなく
基本的にNNとIEを使う人がほとんどでしょうから、まあよしとします。

この様に userAgentは この後に説明する3つのプロパティの値を含んでいる
と言える状態ですので、これが最も利用価値が高いと言えます。
また、一般的なPerlのCGIでも userAgentを取り出す事ができ
CGIでもよく使われるブラウザ判別の基本的なデータとなっています。

navigator.appCodeNameコードネームのみを返します
NNもIEも Mozillaを返してきます。

userAgentの最初の7文字をチェックして Mozillaである事を確認する場合
Mozillaであるか、そうでないかを判断するだけになります。
判断のみ場合はそれでかまいませんが、Mozilla以外のブラウザを対象としたり
何文字になるかわからないコードネームを正確に取り出すには、これを使います。
また、Mozillaであるか無いかだけを判断するのであれば、
単純にこれをチェックするだけで済み、文字の切り取りをしないでも済みます。

navigator.appNameブラウザのアプリケーション名を返します
NNやFireFoxは Netscape
IEでは Microsoft Internet Explorer

userAgentでは IEはMSIEという文字を必ず含みます。
しかし MSIEを含んでいないのがNetscapeとは限りません。
単純にはその分け方でも構いませんが、正確にブラウザの名前を
取る必要がある時にこれを使います。

IEは長いので、最初の8文字を取るような式を書きます。
NNなら Netscape、IEなら Microsof (tは入らない) になります。

以前は、頭1文字で NかMかで判断したりしていましたが、
確実性の為、8文字までチェックした方が無難なようです。

navigator.appVersionコードバージョンを返します
NNでは 4.5 [ja] (Win98; I)
IEでは 4.0 (compatible; MSIE 4.01; Windows 98)
この様な値を返します。(ブラウザ・OSによって異なります)

よく見ると userAgentの値の Mozilla/番号 の後に続く値と同じですね?
アプリケーションのバージョンだと思っていたのですが、
コードのバージョンのようですね。
Netscapeではコードバージョンとアプリバージョンは同じですから
問題ありません。
IEではアプリバージョンを取出したい場合は、処理の必要があります。

userAgentから バージョン番号を取り出すには、頭からコード名を除いて
その次にあるバージョンを取り出すかたちになり、コード名が何文字か
わからないと、取り出せません。
ですからバージョンを取り出すのであればこれを使います。
バージョンによってJavaScriptのサポートレベルがほぼわかるので
これも便利なプロパティと言えます。

実践 : 取出し処理



では実際の取出し処理を書いて見ます。

navigator.userAgentコード名・バージョン・OS名等
Windows版(私のブラウザの場合)では、次のようになります。
Netscpae Mozilla/4.5 [ja] (Win98; I)
IE Mozilla/4.0 (compatible; MSIE 4.01; Windows NT)
IE Mozilla/4.0 (compatible; MSIE 5.0; Windows 98)
特定の個人に迷惑がかからないと思うので過去にSSI集計した中から
一部の例としてここにサンプル表示します。
ドリームキャストMozilla/3.0 (DreamPassport/1.01)
WebTVMozilla/3.0 WebTV/1.2 (compatible; MSIE 2.0)
MAC系 NetscapeMozilla/4.06 [ja] (Macintosh; I; PPC)
Mozilla/3.01 [ja]-C-MACOS8J (Macintosh; I; PPC)
Mozilla/4.5 (Macintosh; I; PPC)
MAC系 IEMozilla/4.0 (compatible; MSIE 4.01; Mac_PowerPC)
その他 Mozilla/3.0 (compatible; PerMan Surfer 3.0; Win95)
Mozilla/3.01 (compatible;)
Mozilla/4.08 [Vine-ja] (X11; I; Linux 2.0.36 i586)
Mozilla/4.04 [en] (X11; I; SunOS 5.6 sun4u)
うちではMozilla以外は0.1%にも満たないようです。
このサンプル等から判断してチェックすべき文字列がわかりますね。

まず最初にプロパティを変数に入れてしまいます。
var UA = navigator.userAgent; // 値を変数にします。

■ Mozillaである事をチェックする。
userAgentの値だけで全て済ませてしまう場合等に使います。
【 Mozillaが含まれていれば・・・】
if(UA.indexOf('Mozilla') >= 0){ 処理; }
【 Mozillaで始まっていれば・・・】
if(UA.indexOf('Mozilla') == 0){ 処理; }
【 Mozilla以外なら・・・】
if(UA.indexOf('Mozilla') == -1){ 処理; }

■ Mozillaである事とバージョンをチェック。
userAgentの値だけで全て済ませてしまう場合等に使います。
【 Mozilla/4が含まれていれば・・・】
if(UA.indexOf('Mozilla/4') >= 0){ Mozilla/4用処理; }
if(UA.indexOf('Mozilla/2') >= 0){ Mozilla/2用処理; }
【 Mozillaのバージョンのみチェック 】
if(UA.indexOf('Mozilla') >=0 ){
if(UA.charAt(8) >= 4){ Mozilla/4用処理; }
}
charAt(8)は Mozillaでないと意味がありませんし、
同じ7文字のコード名の場合も考えて必ず
Mozilla であり、なお且つ charAt(8)が・・・・ という風に使います。
バージョンだけを数字として取出すのは、appVersionを使う方が
無駄な状況処理をせずに処理も早く確実に取出せます。

■ MSIE である事をチェックする
【 MSIE が含まれていれば・・・】
if(UA.indexOf('MSIE ') >= 0){ 処理; }
■ MSIEである事・バージョンをチェックする。
これは Microsoftのリファレンスにあった物ですので問題なく使えるのでしょう。
var ie = UA.indexOf( "MSIE " );
if ( ie > 0 ){
msieversion = parseInt( UA.substring(ie+5, UA.indexOf( ".", ie )));
}else{ msieversion = 0; }
これで msieversion と言う変数に IEの場合はバージョン番号が入ります。
IE以外では 0 が入ります。
MSIEは 'MSIE ' の様に半角スペースが必ず付く大文字なので
MSIEの文字列を含むものと誤認識が起こりにくくなります。

■ WebTV用に振り分ける
【 WebTV が含まれていれば・・・】
if(UA.indexOf('WebTV') >= 0){ 処理; }

■ OSをチェックする
【 Win・MAC とそれ以外に分ける・・・】
if(UA.indexOf('Win') >= 0){ Windows用処理; }else{
if(UA.indexOf('Mac') >= 0){ MAC用処理; }
else{ Win/Macを含まないブラウザ向け処理;}
}
Win・Mac は 頭のみ大文字のこのとおりにしてください。
indexOf()は大文字小文字を区別します。
正規表現の場合は Mozilla/4レベル以上でないと使えませんので
ブラウザ振分けに使う事自体が無意味です。

userAgentだけでかなりの振分けが可能である事がわかりますね?
Mozillaである・ない
Win、Mac、その他
Mozillaのバージョン
MSIE を含む含まない
これだけ分ける事ができれば、用は足せてしまうと思いますが・・・。
確実性となると、また話は変ってきます。
navigator.appCodeNameコードネームのみを返します
NNもIEも Mozillaを返してきます。
この2つのブラウザ以外持っていないので後は知りません。
これは利用方法と言っても、きりだしなど必要ないので
if(navigator.appCodeName == 'Mozilla'){ Mozilla用処理; }
else{ Mozilla以外; }

navigator.appNameブラウザのアプリケーション名を返します
NNでは Netscape
IEでは Microsoft Internet Explorer
これも他のブラウザを知りませんので
var UaName = navigator.appName.substring(0,8);
if(UaName == 'Netscape'){ Netscape用処理; }else{
if(UaName == 'Microsof'){ MSIE用処理; }
else{ どちらでもないブラウザ用; }
}
Microsoftが Microsoft Internet Explorer以外にブラウザを出し
Microsoft ○○○○○ と言う名前の場合はこの省略は使えません。
きちんとフルネームが合致するように書き換えてください。

navigator.appVersionコードバージョンを返します
NNでは 4.5 [ja] (Win98; I)
IEでは 4.0 (compatible; MSIE 4.01; Windows 98)
【 コードバージョンを頭1文字の整数値のみ取出す場合 】
var version = parseInt(navigator.appVersion);
これで 変数versionは 数値型の変数で、バージョン番号を値に持ちます。
【 コードバージョンを小数点以下まで取出す場合 】
var version = parseFloat(navigator.appVersion);
これで 変数versionは 数値型の変数で、バージョン番号を値に持ちます
parseFloatは小数点以下まで取出しますが 4.0 の様な場合には 4となります。
4.01の様な場合は そのままです。
parseInt()でも parseFloat()でも取出した値は数値型です。
バージョン番号を数値として値が以上・以下などで判断させます。

MSIEでアプリケーションとしてのバージョン番号を取出すのであれば
userAgentで説明してあるMSIEのバージョン取出しで行ってください。
appVersionは userAgentの後半の部分と同じですから
取出す対象を userAgentにしても、appVersionにしても同じです。
IE5では次のような appVersionを返します。
4.0 (compatible; MSIE 5.0; Windows 98)

実践 : 振分け処理



割愛します。
ブラウザの種類、バージョン等ネットを利用可能な環境が多岐にわたる為
全ての情報を知らないと振り分けがあまり有効ではないと思います。

その他



NN3まではこの程度ですが、NN4やIE4などではその他のプロパティがあります。
メソッドもいくつかありますが、その中で1つ役に立つものとして
navigator.javaEnabled( )があります。
これは、このブラウザでJavaが有効かどうかを調べます。
true(有効)かfalse(無効)を返しますので、trueなら・・・・と言う様に使います。
Javaアプレットなどを使う場合、有効ならアプレットを、無効であれば
代替画像を表示させるなどと言うように使う事が可能になります。

自分でチェック



ここに 現在閲覧しているブラウザのプロパティとその値を表示しておきます。

【 共通 】
mimeTypes、plugins、下層オブジェクトです。
NNではオブジェクトとしてそれぞれにプロパティがあります。
【 IE 】
userProfile、opsProfileは特殊なプロパティです。
onLineは実際にオンラインではなくブラウザのモードです。




案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 200円/月
( お試し7日間 )

CORE SERVER 416円/月
( お試し15日間 )

ロリポップ 263円/月
( お試し期間10日間 )

チカッパ 500円/月
( お試し期間15日間 )

ヘテムル 1500円/月
( お試し期間15日間 )

さくら 125円/月
( お試し期間2週間 )

無駄な高額ドメイン管理料金払ってませんか?

バリュードメイン
ムームードメイン

膨大な数の命令をサンプルとあわせて解説。機能別にすぐ引けます!Web2.0を支えるJavaScriptを詳細解説。AjaxやDOM Scriptingで必要となる、DOM/XML/通信の解説を大幅強化。Internet Explorer、Firefox、Safariなど、最新ブラウザに対応。サンプルスクリプトがダウンロードできます。
命令/関数/オブジェクト/真偽/計算/演算・変換/数値/配列/文字列/正規表現〔ほか〕 JavaScript
ポケット
リファレンス
改訂第4版
JavaScriptの文法からAmazon Webサービス・Googleマップまでこの1冊だけでキホンから実践まで、Ajaxのすべてがやさしく学べます。
1 JavaScriptの基本(イントロダクション/変数と計算/条件分岐、繰り返し、関数/オブジェクト)/2 ブラウザーとHTMLの操作(ブラウザーの操作/DOM)/3 JavaScriptによるAjaxの実践(Ajax)/付録 基礎Ajax

JavaScript
言語解説部分とリファレンス部分に分け、その言語解説部分をまとめたもの。第5版では、全章の内容を更新し、XMLHTTPRequestオブジェクトでスクリプトからHTTPリクエストに送信する方法、JavaScriptを使ってXMLデータの制御、またJavaScriptによるグラフィックの制御機能についてなど、新しい話題を追加した。
JavaScriptの概要/第1部 コアJavaScript(字句構造/データ型と値/変数/式と演算子 ほか)/第2部 クライアントサイドJavaScript(Webブラウザに組み込まれたJavaScript/ブラウザウィンドウの制御/ドキュメントの制御/CSSとダイナミックHTML ほか) JavaScript第5版
JavaScriptを、基礎から学習できます。プログラミングの初歩から、オブジェクトやイベントまで、わかりやすく系統的に解説したプログラミングの入門書です。学習項目ごとに、例題や練習問題が用意されているので、習得のチェックをすることができます。この1冊で「基本言語仕様」「オブジェクト」「DOM」「イベント処理」など、JavaScriptの基本がしっかり身につきます。
JavaScriptの概要/JavaScriptの基本言語仕様/オブジェクト/DOM(Document Object Model)/イベント処理/各種処理/JavaScriptの今後/練習問題、章末問題の解答 基礎から学べるJavaScript標準コースウェア
本書は、JavaScriptのリファレンスについて、コアJavaScriptとクライアントサイドJavaScriptに分けて解説しています。コアJavaScriptリファレンスでは、JavaScript1.5とECMAScriptバージョン3によって定義されたすべてのクラス、オブジェクト、コンストラクタ、メソッド、関数、プロパティ、定数について解説します。クライアントサイドJavaScriptのリファレンスでは、レガシーなブラウザ対応のAPI、DOMレベル2の標準的なAPIを扱うほか、XMLHTTPRequestオブジェクトやcanvasタグのような新しい情報もカバーします。
1章 コアJavaScriptリファレンス(Arguments/Array/Boolean/Dateほか)/2章 クライアントサイドJavaScriptリファレンス(Anchor/Applet/Attr/Canvas ほか) JavaScriptクイックリファレンス
136本定番サンプルを掲載。ナビゲーション画面から手軽に動作確認。すぐに引ける便利なプロパティ・メソッドのリファレンス。74項目も併せて掲載。Webコンテンツ制作者、必携。
第1章 DOMの概要/第2章 HTML文書の内容を操ろう/第3章 イベント/第4章 フォーム/第5章 スタイルシート/第6章 Ajax+DOM/第7章 オブジェクト指向でいこう/付録 JavaScript,Ajax,DOMによるWebアプリケーションスーパーサンプル
いまや星の数ほどあるWebページ。そのなかであなたのWebサイトがひときわ注目を集めるためには、ユーザーをうならせるテクニック、あっと驚かせるワザが必要です。本書では、意外と気づ付かないHTMLのTipsから、CSS(スタイルシート)を使った効果的なデザインの方法など、あなたの思い通りにWebサイトをグレードアップする裏技を、すぐに使えるサンプルソース付きで豊富な解説。さらに、JavaScriptを活用したインタラクティブなページの作り方や、CGIで各種情報を取得する便利なテクニックなども多数紹介しています。 図解
誰にも教えたくないWeb制作秘密のテクニック200
本書は、ホームページを一味違ったものにするために欠かせない裏ワザ(TIPS&TRICKS)を集大成したものである。
HTML&CSS編(色と装飾/画像/フィルター/マウスオーバー ほか)/JavaScript/ダイナミックHTML編(スクリプト/DOMとダイナミックHTML/IE最新ワザ/XML) HTML/JavaScript/CSSホームページ裏ワザ大辞典
スーパーカリスマアフィリエイター伊藤哲哉氏とSEOの達人鈴木将司氏が贈るアフィリエイトの秘伝書がここに極まる!著者や監修者が長年蓄積した、確実に稼げるアフィリエイターになるためのステップを一からみっちり解説。また、本当に稼げるテーマを選ぶコツやノウハウも満載。
アフィリエイトの基本/CTPMの法則:アフィリエイトの大原則/アフィリエイターで失敗する人、成功する人/アフィリエイトで稼ぐための4つのポイント/アフィリエイターを取り巻く環境の変化/アフィリエイトで稼げる分野を見極める/アフィリエイトで成功するキーワード選定方法/魅力あるコンテンツ作り/SEO対策とアクセスアップ/データ分析を極める(アクセス解析&ASPデータ解析)/収益をあげる細かいスパイス/アフィリエイト実践編
アフィリエイトの達人養成講座
カスケードスタイルシートとダイナミックHTMLは、より軽く、より刺激的なサイトを構築するための機能を満載しています。本書は、WEBコンテンツ作成のプロフェッショナルのために、CSSとDHTMLについて、実践的な架空サイトの構築例を使って詳細に解説します。 WebプロフェッショナルのためのCSSとDHTML

2010年で第二世代携帯がサービス終了。ソフトバンクに乗り換えて安くなった人が7割以上います!