Edited at

JavaScriptによるユーザー情報の取得


ブラウザ、スクリーン、URLなど

JavaScriptではユーザーのIPアドレスを取得することができません。

必要な場合は、PHPなどJavaScript以外の方法でIPアドレスを取得する必要があります。

取得できる情報
属性

ホスト情報
location.host

ホスト名
location.hostname

ポート番号
location.port

URL(フル)
location.href

プロトコル
location.protocol

サーチ情報(?以降)
location.search

ハッシュ(#以降)
location.hash

ページURLのパス部分
location.pathname

ブラウザのコード名
navigator.appCodeName

ブラウザ名
navigator.appName

ブラウザバージョン
navigator.appVersion

ブラウザの使用言語
navigator.language

ブラウザのプラットフォーム
navigator.platform

ブラウザのユーザーエージェント
navigator.userAgent

リファラー
document.referrer

ドメイン名
document.domain

スクリーンの幅
screen.width

スクリーンの高さ
screen.height

スクリーンの色深度(bit)
screen.colorDepth

ブラウザのビューポートの幅
window.innerWidth

ブラウザのビューポートの高さ
window.innerHeight

デバイスピクセル比
window.devicePixelRatio

タッチ操作可能
navigator.pointerEnabled

最大同時タッチ数
navigator.maxTouchPoints


html

<div id="information"></div>



JavaScript

const information=document.getElementById("information");

const infoArray=[];

infoArray.ホスト=location.host;
infoArray.ホスト名=location.hostname;
infoArray.ポート番号=location.port;
infoArray.URL=location.href;
infoArray.プロトコル情報=location.protocol;
infoArray.サーチ情報=location.search;
infoArray.ハッシュ=location.hash;
infoArray.ページURLのパス=location.pathname;
infoArray.ブラウザのコードネーム=location.appCodeName;
infoArray.ブラウザ名=navigator.appName;
infoArray.ブラウザのバージョン=navigator.appVersion;
infoArray.ブラウザの使用言語=navigator.language;
infoArray.ブラウザのプラットフォーム=navigator.platform;
infoArray.ブラウザのユーザーエージェント=navigator.userAgent;
infoArray.リファラー=document.referrer;
infoArray.ドメイン=document.domain;
infoArray.スクリーンの幅=screen.width;
infoArray.スクリーンの高さ=screen.height;
infoArray.スクリーンの色深度=screen.colorDepth+"bit";
infoArray.ブラウザのビューポートの幅 = window.innerWidth;
infoArray.ブラウザのビューポートの高さ = window.innerHeight;
infoArray.デバイスピクセル比 = window.devicePixelRatio;
infoArray.タッチ操作可能 = navigator.pointerEnabled;
infoArray.最大同時タッチ数 = navigator.maxTouchPoints;

for(key in infoArray){
information.innerHTML+=(key+":"+infoArray[key]+"<br>");
}



位置情報

Geolocation APIを使用します。

※プライバシー保護のため、ユーザーは位置情報送信時に確認を求められます。

メソッド
内容

getCurrentPosition()
現在地を取得するために使う

watchPosition()
デバイスの位置が変化するたびに位置情報を更新するために使う

clearWatch()
位置情報を継続して監視することを解除するために使う

情報
属性

緯度
position.coords.latitude

経度
position.coords.longitude

高度
position.coords.altitude

緯度・経度の誤差
position.coords.accuracy

高度の誤差
position.coords.altitudeAccuracy

方角
position.coords.heading

速度
position.coords.speed

エラーコード
内容

1
ユーザーが位置情報の利用を拒否したときなど

2
デバイスの位置が判定できないときなど

3
タイムアウトしたとき

エラーコードはcode属性で取得できます。


html

<div id="information"></div>



JavaScript

const information=document.getElementById("information");

const infoArray=[];

// 位置情報取得成功時の処理
let successCallback=(position)=>{
information.innerHTML="";

infoArray.緯度=position.coords.latitude;
infoArray.経度=position.coords.longitude;
infoArray.高度=position.coords.altitude;
infoArray.緯度と経度の誤差=position.coords.accuracy;
infoArray.高度の誤差=position.coords.altitudeAccuracy;
infoArray.方角=position.coords.heading;
infoArray.速度=position.coords.speed;

for(key in infoArray){
information.innerHTML+=(key+":"+infoArray[key]+"<br>");
}

}

// 位置情報取得失敗時の処理
const failureCallback=(error)=>{
let errorMessage = "";
switch(error.code){
case 1:
errorMessage = "位置情報の取得がユーザーに拒否されました";
break;
case 2:
errorMessage = "位置情報が判定できません";
break;
case 3:
errorMessage = "位置情報の取得処理がタイムアウトしました";
break;
}
information.innerHTML=errorMessage;
}

//ユーザーの現在の位置情報を取得を実行
navigator.geolocation.watchPosition(successCallback, failureCallback);



加速度

DeviceOrientation Eventを使用します。

計測には専用のセンサーが必要なので、センサーが搭載されていないPCなどでは計測できません。

※iOSのsafariは「モーションと画面の向きのアクセス」がデフォルトでOFFになっているので、ONにしないと取得することができません。

情報
属性

加速度(X軸)
acceleration.x

加速度(Y軸)
acceleration.y

加速度(Z軸)
acceleration.z

加速度+重力加速度(X軸)
accelerationIncludingGravity.x

加速度+重力加速度(Y軸)
accelerationIncludingGravity.y

加速度+重力加速度(Z軸)
accelerationIncludingGravity.z

回転加速度(Z軸)
rotationRate.alpha

回転加速度(X軸)
rotationRate.beta

回転加速度(Y軸)
rotationRate.gamma


html

<div id="information"></div>



JavaScript

const information=document.getElementById("information");

const infoArray=[];

//センサーから加速度を取得して書き出す処理
const deviceOrientationTest=()=>{window.addEventListener("devicemotion", (event)=> {
information.innerHTML="";

infoArray.加速度X軸=parseFloat(event.acceleration.x);
infoArray.加速度Y軸=parseFloat(event.acceleration.y);
infoArray.加速度Z軸=parseFloat(event.acceleration.z);

infoArray.加速度重力加速度X軸=parseFloat(event.accelerationIncludingGravity.x);
infoArray.加速度重力加速度Y軸=parseFloat(event.accelerationIncludingGravity.y);
infoArray.加速度重力加速度Z軸=parseFloat(event.accelerationIncludingGravity.z);

infoArray.回転加速度X軸=parseFloat(event.rotationRate.beta);
infoArray.回転加速度Y軸=parseFloat(event.rotationRate.gamma);
infoArray.回転加速度Z軸=parseFloat(event.rotationRate.alpha);

for(key in infoArray){
information.innerHTML+=(key+":"+infoArray[key]+"<br>");
};

});

};

//センサーから加速度を取得して書き出す処理をループ実行
(deviceOrientationLoop=()=>{
deviceOrientationTest();
window.requestAnimationFrame(deviceOrientationLoop);
})();



OS別対応

AndroidとiOSは加速度が逆なので補正する必要があります。


iOSを補正する

Android(X:右、Y:上、Z:手前)を正にする場合はiOSを補正します。


JavaScript

if (navigator.userAgent.indexOf("iPhone") > 0 || navigator.userAgent.indexOf("iPad") > 0 ||navigator.userAgent.indexOf("iPod") > 0) {

for(key in infoArray){
information.innerHTML+=(key+":"+infoArray[key]*-1+"<br>");
};

}



Androidを補正する

iOS(X:左、Y:下、Z:奥)を正にする場合はAndroidを補正します。


JavaScript

if ( navigator.userAgent.indexOf('Android') > 0 ) {

for(key in infoArray){
information.innerHTML+=(key+":"+infoArray[key]*-1+"<br>");
};

}