勉強したことのメモ

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でブラウザ幅によって異なる処理を行う方法(matchMedia)
JavaScriptでブラウザ幅によって異なる処理を行う方法(matchMedia)

JavaScriptでブラウザ幅によって異なる処理を行う場合、「window.a ...

jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法
jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法

jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...

JavaScriptのbeforeunloadイベントでページの離脱防止
JavaScriptのbeforeunloadイベントでページの離脱防止

何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...

Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法
Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法

Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...

HTMXで指定ページ内の指定要素を取得及び出力する方法サンプル
HTMXで指定ページ内の指定要素を取得及び出力する方法サンプル

あるサイトのHTMLタグ内に「hx-〇〇」という見慣れないタグが記述されていた。 ...