![見出し画像](https://assets.st-note.com/production/uploads/images/58940737/rectangle_large_type_2_596b23878fe3d14f7450e68d6fcfd652.png?width=1200)
訪問者のIPアドレスを表示する方法《.htaccess + JavaScript》
はじめに
「.htaccess」と「JavaScript」を使って、ユーザーのIPアドレスを表示する方法をまとめました。CGIやPHPは使いません。
《 もくじ 》
■ サンプル
■ 動作確認
■ 材料
■ ① .htaccess 記述例
■ ② IPアドレス表示用のHTML 記述例
■ ③ IPアドレス取得用のHTML 記述例
■ ④ JavaScript 記述例
■ サンプル
訪問者のIPアドレスを表示する方法《.htaccess + JavaScript》 - text
https://text.sakura.ne.jp/search/result/note-tool-ip.html
■ 動作確認
「Microsoft Edge (Chromium)」、「Firefox」、「Safari (iPhone)」で表示を確認。
■ 材料
① ファイル (.htaccess)
② ファイル (IPアドレス表示用のHTML)
③ ファイル (IPアドレス取得用のHTML)
④ ファイル (JavaScript)
■ ① .htaccess 記述例
RewriteCond %{QUERY_STRING} ^check=ip$
RewriteCond %{REMOTE_ADDR} ^(.+)
RewriteRule ^$ https://サイトのアドレス/?ip=%1 [R=302,NE,L]
《 解説 》
「https:// サイトのアドレス /?check=ip」にアクセスすると、
「https:// サイトのアドレス /?ip=[IPアドレス]」という“IPアドレス付きURL”に変換される。
ユーザーのIPアドレスが“0.0.0.0”の場合、
「https:// サイトのアドレス /?ip=0.0.0.0」というURLに変換される。
この.htaccessは『③ IPアドレス取得用のHTML』で使用。
■ ② IPアドレス表示用のHTML 記述例
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><title></title>
<script src="javascript.js"></script>
</head><body>
<iframe id="getip" src="https://サイトのアドレス/?check=ip" width="24" height="24">
</iframe>
</body></html>
《 解説 》
iframeに埋め込まれた『③ IPアドレス取得用のHTML』のURLは、.htaccessの転送機能によって“IPアドレス付きURL”に変換される。
[変換前の例] https:// サイトのアドレス /?check=ip
[変換後の例] https:// サイトのアドレス /?ip=0.0.0.0
変換されたURL内のIPアドレスの部分をJavaScriptを使って抽出して表示。
■ ③ IPアドレス取得用のHTML 記述例
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><title></title>
</head><body></body></html>
《 解説 》
このファイルに①の.htaccessを適用させる。
このファイルは②のiframeに埋め込む形で使用。
HTMLファイルの中身は空でも構わない。
■ ④ JavaScript 記述例
window.onload = function() {
// [取得] iframe(id="getip")のリダイレクト後のURLのクエリを取得
// [取得] ?ip=0.0.0.0
let getip = document.getElementById("getip").contentWindow.document.location.search;
// [抽出] クエリからIPアドレスを抽出
// [抽出] 0.0.0.0
if (getip.match(/^\?ip\=([0-9]+\.[0-9]+\.[0-9]+\.[0-9]+)$/)){
getip = getip.replace(/^\?ip\=([0-9]+\.[0-9]+\.[0-9]+\.[0-9]+)$/gm, "$1");
} else {
getip = "[エラー] IPアドレスを取得できませんでした。";
}
// [表示] IPアドレスを表示
let ip_view = document.createElement("div");ip_view.id = 'ipaddress';
document.getElementsByTagName("body").item(0).appendChild(ip_view);
document.getElementById("ipaddress").innerHTML = getip;
};
《 解説 》
最初に、HTML(②)のiframe内のURLのクエリを取得。
そして、IPアドレスを抽出。
最後に、抽出したIPアドレスを表示。
(text)
◇ ◇ ◇
《 過去に作成したnoteの記事リスト 》
https://note.com/text_sakura/n/na2cd73291236
《 記事についてのお問い合わせ先 》
text.sakura.note@gmail.com
※ 添付ファイルが含まれるメールは受け取ることができません。
※ テキストのみでお願いいたします。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?