勉強したことのメモ

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

  関連記事

jQueryで指定の行動をとった際に、クリックイベントを発火させる方法
jQueryで指定の行動をとった際に、クリックイベントを発火させる方法

あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...

無料でシンプルなアイコンを設置できる「Feather」の利用方法
無料でシンプルなアイコンを設置できる「Feather」の利用方法

ページ上にアイコンを表示したい場合Font Awesomeを使うことが多いが、個 ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...

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

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

jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動
jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動

jQueryで後から追加した要素にhasClass / addClass / r ...