JavaScript プログラミング講座

 

ナビゲーターについて

 


■ナビゲーターについて

 
ナビゲーターは、ブラウザに関する情報がまとまっています。
 
■ Navigator オブジェクトを取得する
 
Navigator オブジェクトを取得するには、window.navigator プロパティを使用します。
 
ナビゲーターオブジェクトを取得する

// ナビゲーターオブジェクトを取得する
var navigator_obj = window.navigator;

// 出力テスト
console.log(navigator_obj);
 


 

ナビゲーターのプロパティについて

 


■ナビゲーターのプロパティ一覧

 
Navigator オブジェクトの、読み取り専用のプロパティの一覧です。(一部抜粋)
 
■主要ブラウザで取得可能
 
プロパティ名説明
appCodeNameStringブラウザのコードネームを取得する(主要ブラウザで不正確)
appNameStringブラウザの名称を取得する(主要ブラウザで不正確)
appVersionStringブラウザのバージョン情報を取得する(主要ブラウザで不正確)
platformStringブラウザのプラットフォーム名を取得する
userAgentStringユーザーエージェント情報を取得する
languageStringブラウザの言語情報を取得する
 
プロパティ名説明
cookieEnabledBooleanCookie が利用可能か調べる
onLineBoolean環境がオンライン状態であるか調べる
 
■ HTML5 世代
 
プロパティ名説明
geolocationGeolocationGeolocation オブジェクトを取得する
 

■取得結果(for..in 文で取得)

 
 


 

ブラウザの種類を判別する

 
 
 


■「Internet Explorer」で動作しているか調べる(IEコンポーネントを含む)


ユーザーエージェントに、"Trident" という文字列が含まれるか調べます。
 
"Trident" は、Internet Explorer 7 以前には含まれません。
 
次に、"MSIE" という文字列が含まれるか調べます。
 
"MSIE" は、Internet Explorer 11 には含まれません。
 
これらの文字列は、IEコンポーネントブラウザにも含まれます。
 
Internet Explorer で動作しているか調べる

// ------------------------------------------------------------
// Internet Explorer で動作しているか調べる関数(IEコンポーネントを含む)
// ------------------------------------------------------------
function NavigatorGetExecutedInInternetExplorer(){
	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;

	// Sleipnir を除外したい場合
	//if(user_agent.indexOf("Sleipnir") != -1)	return false;
	// Lunascape を除外したい場合
	//if(user_agent.indexOf("Lunascape") != -1)	return false;

	// InternetExplorer で動作しているか
	if(user_agent.indexOf("Trident") != -1)	return true;
	return (user_agent.indexOf("MSIE") != -1);
}

// ------------------------------------------------------------
// 取得テスト
// ------------------------------------------------------------
console.log("InternetExplorer で動作しているか:" + NavigatorGetExecutedInInternetExplorer());
 

■「Mozilla Firefox」で動作しているか調べる(派生ブラウザを含む)

 
ユーザーエージェントに、"Firefox" という文字列が含まれるか調べます。
 
"Firefox" は、派生ブラウザにも含まれます。
 
Mozilla Firefox で動作しているか調べる

// ------------------------------------------------------------
// Mozilla Firefox で動作しているか調べる関数(派生ブラウザを含む)
// ------------------------------------------------------------
function NavigatorGetExecutedInFirefox(){
	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;

	// SeaMonkey を除外したい場合
	//if(user_agent.indexOf("SeaMonkey") != -1)	return false;
	// Lunascape を除外したい場合
	//if(user_agent.indexOf("Lunascape") != -1)	return false;

	// Firefox で動作しているか
	return (user_agent.indexOf("Firefox") != -1);
}

// ------------------------------------------------------------
// 取得テスト
// ------------------------------------------------------------
console.log("Firefox で動作しているか:" + NavigatorGetExecutedInFirefox());
 

■「Opera」で動作しているか調べる

 
ユーザーエージェントに、"OPR/" という文字列が含まれるか調べます。
 
"OPR/" は、Opera 12 以前には含まれません。
 
次に、"Opera" という文字列が含まれるか調べます。
 
"Opera" は、Opera 14 以降には含まれません。
 
"Opera" は、派生ブラウザにも含まれます。
 
Opera で動作しているか調べる

// ------------------------------------------------------------
// Opera で動作しているか調べる関数(派生ブラウザを含む)
// ------------------------------------------------------------
function NavigatorGetExecutedInOpera(){
	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;

	// Nintendo DS を除外したい場合
	//if(user_agent.indexOf("Nitro") != -1)	return false;
	// Nintendo Wii を除外したい場合
	//if(user_agent.indexOf("Wii") != -1)	return false;

	// Opera で動作しているか
	if(user_agent.indexOf("OPR/") != -1)	return true;
	return (user_agent.indexOf("Opera") != -1);
}

// ------------------------------------------------------------
// 取得テスト
// ------------------------------------------------------------
console.log("Opera で動作しているか:" + NavigatorGetExecutedInOpera());
 

■「Google Chrome」で動作しているか調べる(Chromium 派生ブラウザを含む)

 
ユーザーエージェントに、"Chrome" という文字列が含まれるか調べます。
 
"Chrome" は、Chromium 派生ブラウザにも含まれます。
 
Google Chrome で動作しているか調べる

// ------------------------------------------------------------
// Google Chrome で動作しているか調べる関数(Chromium 派生ブラウザを含む)
// ------------------------------------------------------------
function NavigatorGetExecutedInGoogleChrome(){
	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;

	// Opera を除外したい場合
	//if(user_agent.indexOf("OPR/") != -1)	return false;
	// Sleipnir を除外したい場合
	//if(user_agent.indexOf("Sleipnir") != -1)	return false;
	// SRWare Iron を除外したい場合
	//if(user_agent.indexOf("Iron") != -1)	return false;
	// Comodo Dragon を除外したい場合
	//if(user_agent.indexOf("Comodo_Dragon") != -1)	return false;

	// Chromium で動作しているか
	return (user_agent.indexOf("Chrome") != -1);
}

// ------------------------------------------------------------
// 取得テスト
// ------------------------------------------------------------
console.log("Google Chrome で動作しているか:" + NavigatorGetExecutedInGoogleChrome());
 

■「Safari」で動作しているか調べる

 
ユーザーエージェントに、"Safari" という文字列が含まれるか調べます。
 
"Safari" は、Chromium を含む他のブラウザにも含まれます。
 
Safari で動作しているか調べる

// ------------------------------------------------------------
// Safari で動作しているか調べる関数
// ------------------------------------------------------------
function NavigatorGetExecutedInSafari(){
	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;

	// Lunascape を除外したい場合
	//if(user_agent.indexOf("Lunascape") != -1)	return false;

	// Chromium 派生ブラウザを除外する
	if(user_agent.indexOf("Chrome") != -1)	return false;
	// Android 標準ブラウザを除外する
	if(user_agent.indexOf("Android") != -1)	return false;

	// Safari で動作しているか
	return (user_agent.indexOf("Safari") != -1);
}

// ------------------------------------------------------------
// 取得テスト
// ------------------------------------------------------------
console.log("Safari で動作しているか:" + NavigatorGetExecutedInSafari());
 

■「Sleipnir」で動作しているか調べる

 
ユーザーエージェントに、"Sleipnir" という文字列が含まれるか調べます。
 
Sleipnir で動作しているか調べる

// ------------------------------------------------------------
// Sleipnir で動作しているか調べる関数
// ------------------------------------------------------------
function NavigatorGetExecutedInSleipnir(){
	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;

	// Sleipnir で動作しているか
	return (user_agent.indexOf("Sleipnir") != -1);
}

// ------------------------------------------------------------
// 取得テスト
// ------------------------------------------------------------
console.log("Sleipnir で動作しているか:" + NavigatorGetExecutedInSleipnir());
 

■「Lunascape」で動作しているか調べる

 
ユーザーエージェントに、"Lunascape" という文字列が含まれるか調べます。
 
Lunascape で動作しているか調べる

// ------------------------------------------------------------
// Lunascape で動作しているか調べる関数
// ------------------------------------------------------------
function NavigatorGetExecutedInLunascape(){
	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;

	// Lunascape で動作しているか
	return (user_agent.indexOf("Lunascape") != -1);
}

// ------------------------------------------------------------
// 取得テスト
// ------------------------------------------------------------
console.log("Lunascape で動作しているか:" + NavigatorGetExecutedInLunascape());
 


 

ブラウザのバージョンを取得する

 
 


■ブラウザのバージョンを取得する

 
userAgentappVersion プロパティに含まれる、バージョン情報を抽出します。
 
■主要ブラウザのバージョンを取得する関数
 
主要ブラウザのバージョンを取得する関数

// ------------------------------------------------------------
// 主要ブラウザのバージョンを取得する関数
// ------------------------------------------------------------
function NavigatorGetBrowserVersion(){
	var i;
	var num;

	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;
	if(user_agent){
		var user_agent_param = [
			"Sleipnir",
			"Lunascape",
			"SeaMonkey",
			"NetFront",
			"Comodo_Dragon",
			"Firefox",
			"Version"
		];
		num = user_agent_param.length;
		for(i=0;i < num;i++){
			if(user_agent.match(new RegExp(user_agent_param[i] + "[ /]([0-9.]+)","i"))){
				return RegExp.$1;
			}
		}
	}

	// バージョン情報を取得
	var app_version = navigator.appVersion;
	if(app_version){
		var app_version_param = [
			"OPR",
			"Version",
			"rv",
			"Chrome",
			"MSIE"
		];
		num = app_version_param.length;
		for(i=0;i < num;i++){
			if(app_version.match(new RegExp(app_version_param[i] + "[ :/]([0-9.]+)","i"))){
				return RegExp.$1;
			}
		}
	}

	return "";
}
 
■取得例
 
ブラウザのバージョンを取得する

// ------------------------------------------------------------
// 主要ブラウザのバージョンを取得する関数
// ------------------------------------------------------------
function NavigatorGetBrowserVersion(){
	var i;
	var num;

	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;
	if(user_agent){
		var user_agent_param = [
			"Sleipnir",
			"Lunascape",
			"SeaMonkey",
			"NetFront",
			"Comodo_Dragon",
			"Firefox",
			"Version"
		];
		num = user_agent_param.length;
		for(i=0;i < num;i++){
			if(user_agent.match(new RegExp(user_agent_param[i] + "[ /]([0-9.]+)","i"))){
				return RegExp.$1;
			}
		}
	}

	// バージョン情報を取得
	var app_version = navigator.appVersion;
	if(app_version){
		var app_version_param = [
			"OPR",
			"Version",
			"rv",
			"Chrome",
			"MSIE"
		];
		num = app_version_param.length;
		for(i=0;i < num;i++){
			if(app_version.match(new RegExp(app_version_param[i] + "[ :/]([0-9.]+)","i"))){
				return RegExp.$1;
			}
		}
	}

	return "";
}


// ------------------------------------------------------------
// ブラウザのバージョンを取得
// ------------------------------------------------------------
var version = NavigatorGetBrowserVersion();

// 出力テスト
console.log(version);
 


 

ブラウザのプラットフォーム情報を取得する

 
 


■ブラウザのプラットフォーム情報を取得する

 
ブラウザのプラットフォーム情報を取得するには、platform プロパティを使用します。
 
■取得例
 
ブラウザのプラットフォーム情報を取得する

// Navigator オブジェクトを取得する
var navigator_obj = window.navigator;

// ユーザーエージェント情報を取得する
var platform = navigator_obj.platform;

// 出力テスト
console.log(platform);
 


 

ブラウザの言語情報を取得する

 
 


■ブラウザの言語情報を取得する

 
ブラウザの言語情報を取得するには、language プロパティを使用します。
 
InternetExplorer では、browserLanguageuserLanguage プロパティを使用します。
 
■ブラウザの言語情報を取得する関数
 
ブラウザの言語情報を取得する関数

// ------------------------------------------------------------
// ブラウザの言語情報を取得する関数
// ------------------------------------------------------------
function NavigatorGetLanguage(){
	var navigator_obj = window.navigator;
	if(navigator_obj.language !== undefined)	return navigator_obj.language;
	if(navigator_obj.browserLanguage !== undefined)	return navigator_obj.browserLanguage;
	if(navigator_obj.userLanguage !== undefined)	return navigator_obj.userLanguage;
	return "";
}
 
■取得例
 
ブラウザの言語情報を取得する

// ------------------------------------------------------------
// ブラウザの言語情報を取得する関数
// ------------------------------------------------------------
function NavigatorGetLanguage(){
	var navigator_obj = window.navigator;
	if(navigator_obj.language !== undefined)	return navigator_obj.language;
	if(navigator_obj.browserLanguage !== undefined)	return navigator_obj.browserLanguage;
	if(navigator_obj.userLanguage !== undefined)	return navigator_obj.userLanguage;
	return "";
}


// ------------------------------------------------------------
// ブラウザの言語情報を取得
// ------------------------------------------------------------
var language = NavigatorGetLanguage();

// 出力テスト
console.log(language);
 


 

ユーザーエージェント情報を取得する

 
 


■ユーザーエージェント情報を取得する

 
ユーザーエージェント情報を取得するには、userAgent プロパティを使用します。
 
■取得例
 
ユーザーエージェント情報を取得する

// Navigator オブジェクトを取得する
var navigator_obj = window.navigator;

// ユーザーエージェント情報を取得する
var user_agent = navigator_obj.userAgent;

// 出力テスト
console.log(user_agent);
 


 

Cookie が利用可能か調べる

 
 


■Cookie が利用可能か調べる

 
Cookie が利用可能か調べるには、cookieEnabled プロパティを使用します。
 
可能であれば true が得られます。
 
■取得例
 
Cookie が利用可能か調べる

// Navigator オブジェクトを取得する
var navigator_obj = window.navigator;

// Cookie が利用可能か調べる
var enable = navigator_obj.cookieEnabled;

// 出力テスト
console.log(enable);
 


 

Java が利用可能か調べる

 
 


■Java が利用可能か調べる

 
Java が利用可能か調べるには、javaEnabled() メソッドを使用します。
 
可能であれば true が得られます。
 
■取得例
 
Java が利用可能か調べる

// Navigator オブジェクトを取得する
var navigator_obj = window.navigator;

// Java が利用可能か調べる
var enable = navigator_obj.javaEnabled();

// 出力テスト
console.log(enable);
 


 

環境がオンライン状態であるか調べる

 
 


■環境がオンライン状態であるか調べる

 
環境がオンライン状態であるか調べるには、onLine プロパティを使用します。
 
true が得られる場合、オンライン状態です。
 
false が得られる場合、オフライン状態です。
 
オンライン状態だったとしても、必ずしもインターネットにアクセスできるとは限りません。
 
ローカル LAN に接続しているだけても、オンライン扱いとなる事があります。
 
■取得例
 
環境がオンライン状態であるか調べる

// Navigator オブジェクトを取得する
var navigator_obj = window.navigator;

// 環境がオンライン状態であるか調べる
var online = navigator_obj.onLine;

// 出力テスト
console.log(online);
 

■オンライン状態の変化を監視する(HTML5 世代)

 
オンライン状態の変化を監視するには、以下のイベントを使用します。
 
Internet Explorer 7 以前では、利用できません。
 
イベント名 解説
ononline Event オフラインからオンラインに切り替わる瞬間に実行されるイベント
onoffline Event オンラインからオフラインに切り替わる瞬間に実行されるイベント
 
環境がオンライン状態であるか調べる

// ------------------------------------------------------------
// オンラインに切り替わる瞬間に実行される関数
// ------------------------------------------------------------
function OnLineFunc(e){
	if(!e) e = window.event; // レガシー

	console.log("オンラインに切り替わった");
}

// ------------------------------------------------------------
// オフラインに切り替わる瞬間に実行される関数
// ------------------------------------------------------------
function OffLineFunc(e){
	if(!e) e = window.event; // レガシー

	console.log("オフラインに切り替わった");
}


// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(window.addEventListener){

	// オンラインに切り替わる瞬間に実行されるイベント
	window.addEventListener("online",OnLineFunc);
	// オフラインに切り替わる瞬間に実行されるイベント
	window.addEventListener("offline",OffLineFunc);

// アタッチイベントに対応している
}else if(window.attachEvent){

	// オンラインに切り替わる瞬間に実行されるイベント
	window.attachEvent("ononline",OnLineFunc);
	// オフラインに切り替わる瞬間に実行されるイベント
	window.attachEvent("onoffline",OffLineFunc);

// イベントハンドラを使用する
}else{

	// オンラインに切り替わる瞬間に実行されるイベント
	window.ononline = OnLineFunc;
	// オフラインに切り替わる瞬間に実行されるイベント
	window.onoffline = OffLineFunc;

}