ブラウザ、スクリーン、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);
通信状況
html
<div id="information"></div>
JavaScript
const information = document.getElementById("information");
const getNetworkCondition = () => {
information.innerHTML = navigator.onLine;
window.requestAnimationFrame(getNetworkCondition);
}
getNetworkCondition();
加速度
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>");
};
}