ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」とは「Node.js」とは「Ajax」とは「chart.js」とは「Javascript」の使い方「Javascript」の「エラーチェック」をする方法「Javascript」の「変数」「Javascript」の「配列(Array)」「Javascript」の「DOM(Document Object Model)」の「使い方」「Javascript」の「関数 / Function」「Javascript」の「条件分岐・繰り返し」「Javascript」の「イベントハンドラー(Event Handler)」「Javascript」の「文字」を操作する方法「Javascript」の「文字」を検索する方法「Javascript」の「スコープ」「Javascript」の「ファイル操作方法」「Javascript」の「画像操作方法」「Javascript」の「情報」を出力・チェックする方法「Javascript」での「ヒアドキュメント」の使い方「Javascript」の「Built-in Object(ビルトインオブジェクト)」「Javascript」の「ライブラリー / Library」
Reference
数字
「Javascript」で「計算」に誤差が出る時の解決方法
ファイル読み込み
「XMLHttpRequest」オブジェクト - サーバーのファイルを読み込む方法
イベント
ページ読み込み時に「Javascript」を実行する方法画像読み込みが完了してから、次の処理を実行する方法「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
HTMLタグの「class」属性値を取得、変更する方法「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
Webページのタイトルを変更する方法「モニター」情報を取得する方法「ブラウザ」情報を取得する方法「ページ」情報を取得する方法「イベント」情報を取得する方法「マウス」情報を取得する方法
サイズ関連
要素の縦・横サイズを参照・変更する方法「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
スマートフォンからのアクセスを識別する方法
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法





【Javascript】「ブラウザ」情報を取得する方法

【Javascript】
「ブラウザ」情報を取得する方法










「navigator.userAgent」で、「OS」「ブラウザ」を識別する方法


JavaScriptの「navigator.userAgent」で取得した情報に、
アクセス端末情報が含まれています。
文字検索メソッドの「indexOf()」で、
・iPhone
・Android
・iPad
・Macintosh
・Windows
・Linux
などの端末文字を検索することで、
検索された場合は、端末を特定することができます。

端末を識別できたら、
「location.href」を利用して、
各端末用のWebページにリダイレクトさせることができます。



「navigator.userAgent」の書式


「navigator.userAgent」の書式

var 変数名 = window.navigator.userAgent;


情報をページに表示する書式

document.write(window.navigator.userAgent);


アラートに表示する書式

alert(window.navigator.userAgent);


端末情報(iPhone)を検索する書式

var 変数名 = navigator.userAgent.indexOf('iPhone');


端末によって振り分けるサンプルコード

<script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone')>0 || navigator.userAgent.indexOf('Android')>0) {
location.href = '/移動させたいディレクトリ名/';
}

if(navigator.userAgent.indexOf('iPhone')>0 || navigator.userAgent.indexOf('iPad')>0 || navigator.userAgent.indexOf('iPod')>0 || navigator.userAgent.indexOf('Android')>0){
location.href = '/移動させたいディレクトリ名/';
}

if(navigator.userAgent.indexOf('Macintosh')>0 || navigator.userAgent.indexOf('Windows')>0 || navigator.userAgent.indexOf('Linux')>0){
location.href = '/移動させたいディレクトリ名/';
}
</script>



Back



「ブラウザ」情報を取得する方法


「ブラウザ」情報を取得するのに使われるのは、
「ナビゲーター(Navigator)」オブジェクトで、
ブラウザの情報などを主に参照するメソッドをまとめたオブジェクトです。


良く使われるメソッド・プロパティは、
・window.navigator.userAgent
です。
「window.navigator.userAgent」は、
・OS
・ブラウザ
の種類が識別できるので、
・PC
・タブレット
・スマートフォン
などのアクセス端末の特定に使われます。



「ブラウザ」情報を取得する方法一覧

メソッド・プロパティ実行結果
ブラウザの情報
window.navigator

ブラウザ自身を表すオブジェクト。
window.navigator.appCodeName

ブラウザのコード名を表す文字列を返す。

window.navigator.appName

ブラウザの名前を表す文字列を返す。
window.navigator.appVersion

ブラウザのバージョンを表す文字列。
window.navigator.appMinorVersion

ブラウザのマイナーバージョンを表す文字列を返す。
window.navigator.userAgent

userAgent はブラウザの名前とバージョンを表す文字列を返す。
window.navigator.platform

ブラウザのプラットフォームを表す文字列
("Win32", "Win16", "WinCE", "Mac68k", "MacPPC", "HP-UX", "SunOS" など)を返す。
window.navigator.cpuClass

ブラウザが動作するマシンのCPU情報を表す文字列
("x86", "68K", "Alpha", "PPC" など)を返す。
window.navigator.language

language、browserLanguage はブラウザの言語を表す文字列を返す。
window.navigator.browserLanguage

language、browserLanguage はブラウザの言語を表す文字列を返す。
window.navigator.systemLanguage

systemLanguage はシステムの言語を表す文字列を返す。
window.navigator.userLanguage

userLanguage はユーザ環境の言語を表す文字列(日本語の場合は "ja")を返す。
ブラウザの状態
window.navigator.cookieEnabled

cookieが利用可能かどうかを示す真偽値を返す。
window.navigator.onLine

オンライン状態かどうかを示す真偽値。
window.navigator.javaEnabled()

Java が利用可能かどうかを示す真偽値を返す。
その他
window.navigator.userProfile

ユーザーのプロファイル情報を保持するオブジェクト。addReadRequest() doReadRequest() getAttribute() clearRequest() などのメソッドをもちます。
window.navigator.preference(name[, value])

ブラウザに関する色々な情報を参照・設定します。
window.navigator.taintEnabled()

データ暗号化が可能かどうかを表す真偽値。Netscape Communicator 4.0 では仕様から削除されました。
プラグインオブジェクト(Plugin)
window.navigator.plugins

plugins はこのブラウザがサポートするプラグインに関するプラグインオブジェクトの配列。
window.navigator.plugins.length

length はその個数。
window.navigator.plugins[n]

個々のオブジェクトは plugins[n] で参照。
window.navigator.plugin.name

name は名前。
window.navigator.plugin.description

description は説明。
window.navigator.plugin.filename

file はファイル名。
window.navigator.plugin.length

プラグインに関連する MIME タイプの個数。
window.document.plugin[n]

MIME タイプオブジェクト。
MIMEタイプオブジェクト(MimeType)
window.navigator.mimeTypes

mimeTypes はブラウザがサポートする MIME タイプの一覧。
window.navigator.mimeTypes.length

length はブラウザがサポートする MIME タイプの個数。
window.navigator.mimeTypes[n]

個々のオブジェクトは mimeTypes[n] で参照。
window.navigator.mimeType.type

type は "image/gif" などの MIMEタイプ名。
window.navigator.mimeType.description

description はMIMEタイプの説明を示す文字列。
window.navigator.mimeType.enabledPlugin

enabledPlugin はMIMEタイプに対応するプラグインを示すオブジェクト。
window.navigator.mimeType.suffixes

suffixes は "dir" や "dir, dxr, dcr" などのような、プラグインに割り付けられた拡張子を示す文字列。
window.navigator.cookieEnabled

cookieが利用可能かどうかを示す真偽値を返す。
window.navigator.onLine

オンライン状態かどうかを示す真偽値。
window.navigator.javaEnabled()

「Java」が利用可能かどうかを示す真偽値を返す


Back