勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

バニラJavaScriptにて「ipify API」を利用してユーザのIPアドレスを取得する方法

  JavaScript

あるサイトでユーザのIPアドレスを取得したいというケースがあった。普段であればPHPで取得できるがASPを利用したサイトのためPHPは使用不可という制限があった。調べたところ「ipify API」というAPIが無料かつ制限無しでIPアドレスを取得できる模様。以下に利用方法をメモ。

 

ipify API

公式サイト

https://www.ipify.org/

GitHub

https://github.com/sindresorhus/ipify

 

利用方法

ソースコード

<script>
const url = 'https://api.ipify.org?format=json';
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.send();
xhr.responseType = 'json';
xhr.onload = () => {
    if( xhr.status == 200 ){
        console.log(xhr.response); //Object { ip: "xxx.xxx.xxx.xxx" }
        console.log(xhr.response.ip); //xxx.xxx.xxx.xxx
    }else{
        console.log(`Error`);
    }
};
</script>

 - JavaScript

  関連記事

JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法

あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...

フォームに入力された値をJavaScriptのURLコンストラクタ(パーサー)でURL形式かチェックする方法
フォームに入力された値をJavaScriptのURLコンストラクタ(パーサー)でURL形式かチェックする方法

フォームのテキストボックスに入力された値がURL形式になっているかチェックしたか ...

Leafletで「leaflet.sprite」プラグインを導入してマーカーの色を変更する方法
Leafletで「leaflet.sprite」プラグインを導入してマーカーの色を変更する方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置したい。 ...

Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法
Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法

LeafletとOpenStreetMapでマップを表示させ、テキストボックスに ...

バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法
バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法

サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今 ...