Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What is going on with this article?
@takeshisakuma

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

More than 1 year has passed since last update.

ブラウザ、スクリーン、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>");
  };

}
20
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
takeshisakuma
就業先絶賛募集中

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
20
Help us understand the problem. What is going on with this article?