プログラミング

アクセス元のグローバルIPアドレスが表示されるだけのWebページを作る (Content-Type を変えた2種類)(PHP利用)

投稿日:2019年1月10日 更新日:

1. はじめに

アクセス元の グローバルIPアドレス が表示されるだけのWebページを作ってみましょう。

少し工夫して、以下の2通り作成します。

  1. HTMLバージョン
  2. プレーンテキストバージョン

プログラミング言語としては、PHP を使います。PHP なら、たいていのレンタルサーバーで何も設定せずに使えます。

2. 手順(HTMLバージョン)

HTMLのコンテンツ(ページ)として作成する場合です。

(1) ウェブサーバー上にディレクトリを用意します

ウェブサーバーのドキュメントルートとなるディレクトリ以下に、今回アクセスするためのディレクトリを作ります。

例えば myip というディレクトリを作ります。

(2) index.php ファイルを作成します

(1) で作成したディレクトリ内に、index.php というファイルを作成します。

そのファイルに以下を記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My IP address</title>
</head>
<body>
<?php echo $_SERVER['REMOTE_ADDR']; ?>
</body>
</html>

基本的には一般的な HTML が書いてあるだけなのですが、body の中に「アクセス元のIPアドレス」を出力するPHPのコードを記述しています。(参考:PHP: $_SERVER – Manual

※ HTML の中に文字列を出力する場合、通常は HTMLエスケープ処理を通して出力しないと危険なのですが、$_SERVER['REMOTE_ADDR'] に格納されたIPアドレスに悪意のある文字列がセットされることは考えにくいため、ここではそのまま出力しています。

(3) この Webページにアクセスします

作成した Webページにアクセスします。(1) で作成したディレクトリの位置に応じた URL にアクセスします。

例えば、ドキュメントルートとなるディレクトリ直下に myip という名前のディレクトリを作成した場合は、http(s)://ドメイン/myip/ という URL になります。

こんな感じで表示されます
こんな感じで表示されます

デモページを作ってみました。

実際にアクセスし、ブラウザのデベロッパーツールで中身を見てみると、Content-Type が、「text/html」になっていることが分かります。これは HTMLコンテンツであることを意味しています。

Chromeブラウザのデベロッパーツールで確認したところ
Chromeブラウザのデベロッパーツールで確認したところ

3. 手順(プレーンテキストバージョン)

プレーンテキストのコンテンツとして表示する場合です。

(1) ウェブサーバー上にディレクトリを用意します

ウェブサーバーのドキュメントルートとなるディレクトリ以下に、今回アクセスするためのディレクトリを作ります。

例えば myip2 というディレクトリを作ります。

(2) index.php ファイルを作成します

(1) で作成したディレクトリ内に、index.php というファイルを作成します。

そのファイルに以下を記述してください。

<?php
header("Content-Type: text/plain;charset=UTF-8");
echo $_SERVER['REMOTE_ADDR'];
?>

Webサーバーからクライアントに返すレスポンスヘッダの一部を PHP の header() 関数で出力しています。具体的には、コンテンツの種類を表す「Content-Type」という項目に、「text/plain」を指定しています。つまりこれは、HTML文書ではなく「ただのテキストデータ」として扱うように ウェブブラウザに指示することになります。実際、どこにも HTMLタグは書いていません。
(参考:MIME タイプ | MDN

その下は、HTMLバージョンの時と同様に、アクセス元のIPアドレスを出力しています。

(3) この Webページ(実際はただのテキストページ)にアクセスします

作成した Webページにアクセスします。(1) で作成したディレクトリの位置に応じた URL にアクセスします。

例えば、ドキュメントルートとなるディレクトリ直下に myip2 という名前のディレクトリを作成した場合は、http(s)://ドメイン/myip2/ という URL になります。

こちらも、デモページを作ってみました。

ウェブブラウザ上に表示される内容としては、HTMLバージョンとほぼ同じになりますが(*1)、これは HTMLページではなく、あくまでテキストのコンテンツです。ブラウザのデベロッパーツールで確認すると、Content-Type が「text/plain」になっています。

Chromeブラウザのデベロッパーツールで確認したところ
Chromeブラウザのデベロッパーツールで確認したところ
(*1) HTMLバージョンとテキストバージョンでは表示される文字のフォントやサイズが少し違っていると思います。これはなぜかというと、ウェブブラウザは独自に「デフォルトで適用するスタイルシート」を持っており、HTMLバージョンの場合はこれが適用されるためです。

4. プレーンテキストバージョンの利点

プレーンテキストとして作成したページはシンプルである分、他から利用しやすいという利点があります(その代り、装飾などはできませんが)。

例えば、ターミナルエミュレータで以下のコマンドを実行すると、そのデバイスのグローバルIPアドレスを表示することができます。

$ wget -qO - https://misc.laboradian.com/myip2/

以下でも同様です。

$ curl https://misc.laboradian.com/myip2/

HTMLバージョンだと、HTMLタグがいろいろと入っているため、肝心のIPアドレス部分を取り出すのにもう一手間必要になります。

5. おわりに

アクセス元のグローバルIPアドレスが表示されるWebページの作り方を2種類説明しましたが、今回の内容の場合であれば、プレーンテキストとして作成した方が使い勝手がよいでしょう。

単純な Webページですが、これも1つのWebサービスです。更に他の項目も表示して発展させたい方は、以下の記事を参考にしてください。

Web Programming

ブラウザがウェブサーバーに送っている情報を表示するウェブページを作ってみよう(HTML/CSS/JavaScript/PHP)

2016.11.08

その他の関連記事

Windows

Windows 10 で自分のIPアドレスを調べる方法

2018.06.08

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Python

Pythonのバージョンを切り替える pyenv の使い方

Pythonのバージョンを切り替える pyenv の使い方について説明します。

WordPress

WordPress のテーマ、プラグイン開発のためのデバッグ設定

WordPress のテーマ、プラグイン開発のためのデバッグ設定や Tips について、ここにまとめていこうと思います。 目次1. wp-config.php の設定WP_DEBUGWP_DEBUG_ …

WordPress

plugin-update-checker を使って WordPress のテーマに自動更新機能を実装する

目次1. はじめに2. テーマディレクトリに対する準備作業3. テーマを更新する手順3-1. テーマ提供者側3-2. 利用者側4. おわりに 1. はじめに plugin-update-checker …

Web Components

Web Components: カスタム属性の利用方法

Web Components を使ってカスタム要素を作成し、そのタグを記述する際に、独自の属性を利用する方法について説明します。

normalizr の使い方

目次1. はじめに2. normalizr とは?3. 使い方ともう少し詳しい説明4. 関連 1. はじめに JavaScript のライブラリである normalizr の使い方を簡単に説明します。 …