Webアプリケーションで位置情報を取得しました!

Posted date at 2024-05-07

React

API

geocoding.png

 

本日夕方長谷川さんから、勤怠打刻アプリを内製する場合、位置情報を保存するようにできないかとの質問があり、技術検証しましたので作成アプリと資料を共有します。

  


🚀作成したアプリ

説明文

ボタンを押すと、緯度・経度、住所が表示されます。

本番のアプリでは打刻ボタンクリックの際にkintoneに社員情報と時刻と一緒に、緯度・経度・住所情報を併せて登録しようと考えています。

  


 

🚀使用技術

🐡位置情報(緯度経度)の取得

標準の位置情報 API (Geolocation API)📒 を使用しています。

ChatGPTによると以下の方法により位置を特定しているそうです。

  • ・GPS (Global Positioning System): 最も正確な位置情報を提供しますが、GPSが機能するには直接的な衛星の視界が必要で、屋内ではうまく機能しないことがあります。
  • ・Wi-Fi: 近くのWi-Fiネットワークの位置情報データベースを使用して位置を推定します。都市部ではかなり正確な位置情報を提供することができます。
  • ・携帯電話の塔: デバイスが接続されている携帯電話の塔の情報から位置を推定します。この方法はGPSやWi-Fiよりも精度が低いですが、広範囲に渡って利用可能です。
  • ・IPアドレス: 最も精度が低く、地域レベルの位置情報しか提供できませんが、他の方法が利用不可能な場合には有用です。

🐡緯度経度から住所を取得

GoogleCloudのGeoCodingAPI📒を使用しています。

  


 

🚀参考にさせていただいた資料

🐡位置情報の取得

🐡緯度経度から住所を取得

  

←ホームに戻る