これは、あなたの現在のIPアドレスです。
このIPアドレスを取得するために、私が用意したのはJS・HTML・CSSだけとなります。
あなたのIPアドレスを表示するこのトリック、実はJavaScriptのみで実現できます。
外部APIへの簡単なfetchリクエストで、IP情報を取得し、ウェブページに直接表示。
エラーがあれば、それも教えてくれます。
スタイリングには、CSSで数行足すだけ。
この方法なら、どんなウェブサイトにもすぐに取り入れられます。
サーバーは不要です。
では、どうやるのか見てみましょう。
JavaScriptのみでIPアドレスを把握するテクニック
ウェブサイトを訪れたユーザーの情報を収集することは、多くの開発者にとって重要なタスクです。
IPアドレスは、その中でも特に注目されるデータの一つです。
通常、サーバーサイド言語を介して取得しますが、JavaScriptを使用すれば、その必要はありません。
用意するのは、HTML、CSS、そしてJavaScriptのコードのみ。
簡単なAPIリクエストを発行し、そのレスポンスからユーザーのIPアドレスを抽出する手法です。
まず、fetch APIを使って外部APIにリクエストを送ります。
これはブラウザがネイティブでサポートする機能です。
リクエストは外部APIに向けて行い、JSON形式でレスポンスを受け取ります。
JavaScript
fetch('https://api.ipify.org?format=json')
.then(response => {
if (!response.ok) {
throw new Error('ネットワークの状態が良くないか、サーバーに接続できませんでした。');
}
return response.json();
})
.then(data => {
document.getElementById('your_id').innerText += data.ip;
})
.catch(error => {
document.getElementById('your_id').innerText = 'IPアドレスを取得できませんでした。';
console.error('Error fetching IP:', error);
});
ここで出てくる外部APIは、ipifyの無料サービスとなります。
このコードスニペットは、リクエストの成功と失敗の両方のケースを処理します。
成功した場合は、取得したIPアドレスをウェブページに表示します。
もし何らかの理由でリクエストが失敗した場合は、エラーメッセージを表示します。
HTML側では、次のようなマークアップを用意します。
HTML
<div id="your_id" class="ip-display"></div>
そして、CSSでスタイリングを加え、ユーザーに視覚的に魅力的な形で情報を提示します。
CSS
.ip-display {
color: #ffd700; /* 文字色をゴールドに設定 */
background-color: #1e90ff; /* 背景色をドジャーブルーに設定 */
font-weight: bold; /* 文字を太字に設定 */
padding: 10px; /* 内側の余白を設定 */
border: 1px solid #000000; /* 黒の境界線を設定 */
text-align: center; /* 文字を中央揃えに設定 */
width: 250px; /* 要素の幅を設定 */
margin: 20px auto; /* 上下20px 左右のマージンを自動で等しくして中央揃えにする */
font-size: 20px; /* 文字の大きさを設定 */
box-shadow: 3px 3px 3px #888888; /* 影を設定 */
display: block; /* ブロックレベル要素として表示 */
}
以上で、JavaScriptのみを使用したIPアドレスの取得と表示の実装は完了です。
サーバーサイドの設定や複雑なバックエンド処理に頼ることをしていません。
ブラウザ内で完結するこの方法は、手軽に実装可能です。
この技術を使えば、ウェブサイトの訪問者が自分のIPアドレスを簡単に確認できるツールを作成することもできます。
開発の幅が広がること間違いなしです。
