Open6

【ときメーター】GPS座標を取得する

りゆりゆ

よっしゃ！いよいよだぞ！はじまるぞ！

イメージ図

参考記事

https://qiita.com/soichirowada/items/2311fd97bbf5841ccaf5

内容理解

・ブラウザ（Chrome）からシステム側のGPS情報を取得して、表示する
・連続的に位置情報を取得したい場合は"Geolocation.watchPosition()"を使う

watchPosition　に切り替える（宿題）

参考記事

https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition

・ネトリファでWEBサイトメンターさんと一緒に作成。
　HTTPSを環境を用意しないとこのコードが動かない可能性がある。
　https://tranquil-gnome-28c134.netlify.app/
→ユーザーの現在地のGPS座標を取得するシンプルなアプリ。
「Get Location」というボタンをクリックすると、ブラウザの位置情報APIを利用して、緯度と経度が表示されます。

・未知数過ぎたため、一旦NoteBookLMに聞く。
https://notebooklm.google.com/notebook/9bf0119a-f443-45ac-bca1-d18a9775bd47

りゆりゆ

メンターさんがヒントくれた。泣いちゃう。嬉しい。感謝。
頑張りたい！！

GPSのwatchPosition
→ブログで鎌倉駅までの直線距離を表示するサイトの作り方をまとめたていただいた。
　座標を書き換えるだけで、作れるよって、うぅ、がんばるぞ！

https://blog.kimizuka.org/entry/2024/08/06/000000

コード

`
<html>
<head>
<meta charset="utf-8">
<title>GPS</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Displays the straight line distance to Kamakura Station." />
<script src="https://geographiclib.sourceforge.io/scripts/geographiclib-geodesic.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FAFAFA;
    font-size: 24px;
    font-weight: 900;
    background: #1565C0;
  }

  .display {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #m {
    font-size: 40px;
  }

  #timestamp {
    position: fixed;
    bottom: 8px; right: 8px;
    color: #0D47A1;
    font-size: 12px;
  }
</style>

</head>
<body>
<div>
<div class="display">
<p id="m"></p>
</div>
<p id="timestamp"></p>
</div>
<script>
const goalLatLong = [35.31902777, 139.55041666]; // 目標地点の緯度,経度

  navigator.geolocation.watchPosition(handleWatchPosition, null, {
    enableHighAccuracy: true,
    timeout: 60000,
    maximumAge: 0
  });

  function handleWatchPosition(evt) {
    const latitude = evt.coords.latitude;
    const longitude = evt.coords.longitude;
    const accuracy = evt.coords.accuracy;
    const altitude = evt.coords.altitude;
    const altitudeAccuracy = evt.coords.altitudeAccuracy;
    const heading = evt.coords.heading || 0;
    const speed = evt.coords.speed;
    const timestamp = evt.timestamp;

    document.getElementById('timestamp').textContent = timestamp;

    if (latitude && longitude) {
      const geod = window.geodesic.Geodesic.WGS84;
      const r = geod.Inverse(
        latitude, longitude,
        ...goalLatLong
      );

      document.getElementById('m').textContent = `${ r.s12.toFixed(2) }m`;
    }
  }
</script>

</body>
</html>
`

りゆりゆ

・watchPositionを検証するため、現在地から長野駅までの直線距離を表示するWEBサイトを作る。
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition

・ページを更新せずとも、移動のたびに距離が書き換わる。

GPS座標の取得する

https://w3c.github.io/geolocation/#watchposition-method
→英語のためChatGPTに聞く


・2つのGPS座標から距離を算出するのに使うライブラリ
https://geographiclib.sourceforge.io/JavaScript/doc/index.html

↑上記のライブラリと同じ結果が返ってくる（国土地理院の計算方法）
https://vldb.gsi.go.jp/sokuchi/surveycalc/surveycalc/bl2stf.html

2点間の距離をmで算出できるコード

`
const goalLatLong = [35.31902777, 139.55041666]; // 目標地点の緯度,経度（今回は鎌倉駅）
const geod = geodesic.Geodesic.WGS84;

const r = geod.Inverse(
latitude, // 現在地の緯度をいれる
longitude, // 現在地の経度をいれる
...goalLatLong
);

console.log(${ r.s12.toFixed(2) }m);
`

現在地と目標地点の緯度と軽度を入れる（目標地点：川崎駅）
川崎駅の緯度・経度をとる＝Wikipediaより
https://ja.wikipedia.org/wiki/川崎駅

動作のコード

`
<html>
<head>
<meta charset="utf-8">
<title>iza-kamakura</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Displays the straight line distance to Kamakura Station." />
<script src="https://geographiclib.sourceforge.io/scripts/geographiclib-geodesic.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FAFAFA;
    font-size: 24px;
    font-weight: 900;
    background: #1565C0;
  }

  .display {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #m {
    font-size: 40px;
  }

  #timestamp {
    position: fixed;
    bottom: 8px; right: 8px;
    color: #0D47A1;
    font-size: 12px;
  }
</style>

</head>
<body>
<div>
<div class="display">
<p id="m"></p>
<p>to Kamakura Station</p>
</div>
<p id="timestamp"></p>
</div>
<script>
const goalLatLong = [35.31902777, 139.55041666]; // 目標地点の緯度,経度（今回は鎌倉駅）

  navigator.geolocation.watchPosition(handleWatchPosition, null, {
    enableHighAccuracy: true,
    timeout: 60000,
    maximumAge: 0
  });

  function handleWatchPosition(evt) {
    const latitude = evt.coords.latitude;
    const longitude = evt.coords.longitude;
    const accuracy = evt.coords.accuracy;
    const altitude = evt.coords.altitude;
    const altitudeAccuracy = evt.coords.altitudeAccuracy;
    const heading = evt.coords.heading || 0;
    const speed = evt.coords.speed;
    const timestamp = evt.timestamp;

    document.getElementById('timestamp').textContent = timestamp;

    if (latitude && longitude) {
      const geod = window.geodesic.Geodesic.WGS84;
      const r = geod.Inverse(
        latitude, longitude,
        ...goalLatLong
      );

      document.getElementById('m').textContent = `${ r.s12.toFixed(2) }m`;
    }
  }
</script>

</body>
</html>

`

りゆりゆ

・ネトリファイで作ったアプリに、コードを入れていく。
https://tranquil-gnome-28c134.netlify.app/

最終的なコード

`
<html>
<head>
<meta charset="utf-8">
<title>GPS</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Displays the straight line distance to Kawasaki Station." />
<script src="https://geographiclib.sourceforge.io/scripts/geographiclib-geodesic.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FAFAFA;
    font-size: 24px;
    font-weight: 900;
    background: #FFC0CB; /* 背景色はピンク色 */
  }

  .display {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #distanceText {
    font-size: 24px;
    margin-bottom: 10px;
  }

  #m {
    font-size: 40px;
  }

  #timestamp {
    position: fixed;
    bottom: 8px; right: 8px;
    color: #0D47A1;
    font-size: 12px;
  }
</style>

</head>
<body>
<div>
<div class="display">
<p id="distanceText">2人の距離</p>
<p id="m"></p>
</div>
<p id="timestamp"></p>
</div>
<script>
const goalLatLong = [35.531389, 139.696944]; // 目標地点の緯度,経度（川崎駅）

  navigator.geolocation.watchPosition(handleWatchPosition, null, {
    enableHighAccuracy: true,
    timeout: 60000,
    maximumAge: 0
  });

  function handleWatchPosition(evt) {
    const latitude = evt.coords.latitude;
    const longitude = evt.coords.longitude;
    const accuracy = evt.coords.accuracy;
    const altitude = evt.coords.altitude;
    const altitudeAccuracy = evt.coords.altitudeAccuracy;
    const heading = evt.coords.heading || 0;
    const speed = evt.coords.speed;
    const timestamp = evt.timestamp;

    document.getElementById('timestamp').textContent = timestamp;

    if (latitude && longitude) {
      const geod = window.geodesic.Geodesic.WGS84;
      const r = geod.Inverse(
        latitude, longitude,
        ...goalLatLong
      );

      document.getElementById('m').textContent = `${ r.s12.toFixed(2) }m`;
    }
  }
</script>

</body>
</html>
`

なんと！できたかも！！！！！
１人でできたかもしれない！！！！！！
（メンターさんにめちゃめちゃヒントもらったけど😅）

明日は実際に動いてみて距離が変わっている事を確認する！！
スマホでも確認する！！今日はめちゃめちゃ頑張った！すばらしい！

りゆりゆ

座標は何分おきで変わるというものではないらしいい。
スマホではファイルがアップされないけど
パソコンではできた！！

スマホではグーグルドライブでやったけど、GPSが表示されない！
また挑戦してみよう。

動画は変わるのが遅すぎて、収録できなかったけど
移動する時にとることができた！