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);
```


## 通信状況

```: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>");
  };
  
}
```