Zenn
📍

JavaScriptでアクセス元のIPアドレスから位置情報を取得する

2023/10/06に公開
JavaScript
tech

位置情報の取得方法

  • パターン1. geolocationAPIを使用
    • メリット: 正確な位置情報を取得出来る
    • デメリット: ユーザーに位置情報のアクセス許可をしてもらう必要がある
  • パターン2.IPアドレスから取得
    • メリット: アクセス許可無しでおおよその位置を取得出来る
    • デメリット: VPNを経由していた場合はVPNサーバの位置になる

今回はそこまで正確な位置情報は必要なかったのでIPアドレスから取得してみた。

成果物

ソースコード : https://github.com/kanaru-ssk/get-ip-info
デモ : https://kanaru-ssk.github.io/get-ip-info/

実装

https://ipinfo.io のFreeAPIを使用使用するとアクセス元のIPアドレスを取得できる。

fetch("https://ipinfo.io?callback")
  .then((response) => response.json())
  .then((ipInfo) => {
    console.log(ipInfo);
  });

consoleに以下のように出力される。(出力内容はダミー)

{
  "ip": "211.197.11.0",
  "hostname": "211-197-11-0.indigo.static.arena.ne.jp",
  "city": "Tokyo",
  "region": "Tokyo",
  "country": "JP",
  "loc": "35.6895,139.6917",
  "org": "AS2514 NTT PC Communications, Inc.",
  "postal": "101-8656",
  "timezone": "Asia/Tokyo",
  "readme": "https://ipinfo.io/missingauth"
}

終わり。

Discussion