訪問者の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
※ 添付ファイルが含まれるメールは受け取ることができません。
※ テキストのみでお願いいたします。