勉強したことのメモ

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

  関連記事

vimeoの動画URLからサムネイル画像用URLを取得する方法(oEmbed API)

vimeoの動画URL(https://vimeo.com/xxxxx)からサム ...

Leafletにて操作内容を履歴に残し「進む」「戻る」ボタンで履歴を実行できる「Leaflet.NavBar」の利用方法

Leafletにてマップ移動やズーム等、ユーザーの操作内容を履歴に残して、「進む ...

サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...

JavaScriptでdownload属性が付与されている画像を一括ダウンロードさせる方法

ページ内にdownload属性が付与されている画像が複数あり、何らかのボタンをク ...