勉強したことのメモ

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

  関連記事

PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法
PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法

ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...

sweetalert2を閉じた後、指定位置にスクロールしようとしても元の位置に戻る現象を解決する方法
sweetalert2を閉じた後、指定位置にスクロールしようとしても元の位置に戻る現象を解決する方法

sweetalert2で表示したウィンドウを閉じた後、指定位置にスクロールさせた ...

JavaScript / jQueryで〇番目、最初、最後の要素を指定する方法
JavaScript / jQueryで〇番目、最初、最後の要素を指定する方法

jQueryでリストタグ(<li>)の〇番目、最初、最後の要素を指定 ...

CKEditor5(WYSIWYGエディタ)をページ遷移無しでtextareaに切り替える方法
CKEditor5(WYSIWYGエディタ)をページ遷移無しでtextareaに切り替える方法

ラジオボタンを選択することでCKEditor5(ウィジウィグエディタ)とテキスト ...

Leafletにて地図を全画面(フルスクリーン)表示機能を追加する方法
Leafletにて地図を全画面(フルスクリーン)表示機能を追加する方法

Leafletにて表示されている地図に全画面表示ボタンが設置されているサイトがあ ...