WordPressのサイドナビでIPv6接続診断する〜Javascriptのみでブログパーツを設置

Wordpressロゴ インターネット

IPv6が普及してきた

以前、当サイトをIPv6対応させた頃には、まだSSL（HTTPS）の対応が急務だという時期で、IPv6への対応は大手しか実現されていませんでした。

はてなブログは相変わらず非SSL（HTTP）接続でIPv6にも非対応ですが～状況把握の為にIPv4/IPv6調査用ブログパーツ設置
はてなブログがSSL（HTTPS）対応をようやく公式に発表したと言うのに、未だに実現されていません。いったい何時になったらSSL対応が終わるのやら。ましてやProユーザーが多いであろう独自ドメインは一番最後に後回しですからね。時間があればV...
mypace.sasapurin.com
2018.01.14

当時は「はてなブログPro」のSSL（HTTPS）対応が遅かったため、しびれを切らせて自前サーバーによるSSL、IPv6対応を自力で済ませました。読み返すと2018年4月29日の記録に残っていました。

当サイトについて
ぼちぼち書くブログのサイト運営について書いています。広告掲載について、サーバー環境や使用ツールなども少し紹介しています。
mypace.sasapurin.com
2024.03.20

最近は各家庭のインターネット回線もIPv6対応して来たこともあり、大手でなくてもIPv6対応させているところが多くなってきました。

また、今や一人１台以上保有しているスマートフォンの多くも、デバイスはしっかりIPv6対応しているものが大半なので、通信回線がIPv6対応しているなら後は接続先プロバイダ側の対応状況次第です。Webサイト側も対応サイトが増えてきたと思います。

IPv6と言えば「Itojun」いとじゅん

IPv6といえば、「Itojun」こと「萩野純一郎」氏を思い出します。ネットワーク系の日本人プログラマー（ハッカー）はIPv6が普及する将来を見据えていて、YouTubeで熱く語ってくれている動画を観たものです。その数年後に若くして他界されたことを知りました。

萩野純一郎 - Wikipedia
ja.wikipedia.org

動画の数は多くはありませんが、「Itojun」の貴重な動画がYouTubeに残されています。今現在あるテクノロジーは、過去に存在した人たちの努力のお陰で現在につながっているということが分かります。IPv6もそういう積み重ねの恩恵を受けている技術だと言うことの一例です。

itojun
作成した動画を友だち、家族、世界中の人たちと共有
www.youtube.com

当サイトにIPv4/IPv6診断（ブログパーツ）を設置したい

ふと思い立って、IPv6ブログパーツなるものを再び設置しようとしました。ところが昔あったIPv6を判定するブログパーツは終息してしまっていて配置できません。今となっては話題にもならなくなったのでしょうかね？

かと言って自分で作るのは・・（私はプログラマーではないから作るのは厳しい）

という訳で、困った時にはGoogle Gaminに相談です。Javascriptで作れそうな気がするのでGeminiならヒントをくれそうな気がします。

Geminiの回答

JavaScriptで訪問者のIPアドレスを診断するウィジェット

WordPressサイトに訪問したユーザーのIPアドレスがIPv4かIPv6かを診断し、視覚的に表示するJavaScriptウィジェットを作成するには、まず外部のIP診断サービスを利用するのが最も簡単です。クライアント側のJavaScriptから直接IPアドレスを取得することはセキュリティ上の理由で推奨されないため、APIを利用します。

サンプルコード

以下は、ipify.org という無料のIP診断APIを使用して、ユーザーのIPアドレスを取得し、そのバージョン（IPv4またはIPv6）を判定して表示するJavaScriptとHTMLのサンプルコードです。このコードは、WordPressの任意のウィジェットやHTMLブロックに追加できます。

1. HTMLウィジェットの作成

WordPressの外観 > ウィジェットから、カスタムHTMLウィジェットを追加し、以下のHTMLコードを貼り付けます。

HTML

<div class="ip-detector-widget">
  <h4>IPアドレスの診断</h4>
  <p>あなたのIPアドレスは:</p>
  <p id="ip-address">IPアドレスを読み込み中...</p>
  <p id="ip-version">バージョンを判定中...</p>
</div>Code language: HTML, XML (xml)

2. JavaScriptコードの追加

このJavaScriptコードを、WordPressのテーマファイル（通常はfunctions.phpまたは子テーマのファイル）に追加するか、プラグインを使用してフッターに挿入します。

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const ipAddressElement = document.getElementById('ip-address');
  const ipVersionElement = document.getElementById('ip-version');

  // ipify.orgのAPIエンドポイント
  const ipv4ApiUrl = 'https://api.ipify.org?format=json';
  const ipv6ApiUrl = 'https://api64.ipify.org?format=json';

  // IPv6アドレスを取得
  fetch(ipv6ApiUrl)
    .then(response => {
      // レスポンスがIPv6ではない場合、IPv4を取得
      if (!response.ok) {
        return fetch(ipv4ApiUrl);
      }
      return response.json();
    })
    .then(data => {
      const ip = data.ip;
      ipAddressElement.textContent = ip;

      // IPアドレスがコロン (:) を含む場合はIPv6、それ以外はIPv4と判定
      if (ip.includes(':')) {
        ipVersionElement.textContent = '➡️ あなたは現在、IPv6で接続しています。';
        ipVersionElement.style.color = '#007bff'; // 青色で表示
      } else {
        ipVersionElement.textContent = '➡️ あなたは現在、IPv4で接続しています。';
        ipVersionElement.style.color = '#28a745'; // 緑色で表示
      }
    })
    .catch(error => {
      console.error('IPアドレスの取得に失敗しました:', error);
      ipAddressElement.textContent = 'IPアドレスの取得に失敗しました。';
      ipVersionElement.textContent = '';
    });
});

コードの解説

  • DOMContentLoaded: このイベントリスナーは、HTMLドキュメントが完全に読み込まれた後にコードを実行します。これにより、HTML要素が確実に存在している状態でJavaScriptが動作します。
  • fetch(): この関数は、指定されたURLからデータを非同期で取得します。
  • ipify.org:
    • https://api64.ipify.org: IPv6を優先的に取得するAPIです。もしユーザーがIPv6接続でなければエラーを返します。
    • https://api.ipify.org: IPv4アドレスを取得するAPIです。
  • IPバージョンの判定:
    • IPアドレス文字列にコロン:が含まれているかどうかをincludes(':')で確認します。IPv6アドレスはコロンで区切られた16進数で構成されているため、この方法で簡単にIPv4と区別できます。
  • 視覚的な表示:
    • IPアドレスのバージョンによって、表示するテキストの内容と色を変更しています。これにより、ユーザーは一目で自分の接続状況を理解できます。

このサンプルコードをWordPressサイトに組み込むことで、訪問者にとって有益で視覚的に分かりやすい情報を提供できます。

WordPressのウィジェットに配置してみた

需要は少ないと思いますが、IPv6対応のWordPressサイトが増えてくれると良いことだと思うので、同じ様なことをやりたい人の為（もとい何年か後の自分のために）に残しておきます。

Geminiが回答してくれた内容を簡単にウィジェットで配置してみました。面倒くさいのでウィジェット１個だけで済ませてしまいます。多分動作するでしょう。

<div class="ip-detector-widget">
<img src="https://mypace.sasapurin.com/wp-content/uploads/2025/09/IPv6-Ready.png" title="IPv6 Ready" alt="IPv6 Ready">
  <h4>IPアドレスの診断</h4>
	<p>診断には<a href="https://www.ipify.org/" target="_blank">ipify</a>のAPIを使わせていただいています。</p>
	<hr>
  <p>あなたのIPアドレスは:</p>
  <p id="ip-address">IPアドレスを読み込み中...</p>
  <p id="ip-version">バージョンを判定中...</p>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function() {
  const ipAddressElement = document.getElementById('ip-address');
  const ipVersionElement = document.getElementById('ip-version');

  // ipify.orgのAPIエンドポイント
  const ipv4ApiUrl = 'https://api.ipify.org?format=json';
  const ipv6ApiUrl = 'https://api64.ipify.org?format=json';

  // IPv6アドレスを取得
  fetch(ipv6ApiUrl)
    .then(response => {
      // レスポンスがIPv6ではない場合、IPv4を取得
      if (!response.ok) {
        return fetch(ipv4ApiUrl);
      }
      return response.json();
    })
    .then(data => {
      const ip = data.ip;
      ipAddressElement.textContent = ip;

      // IPアドレスがコロン (:) を含む場合はIPv6、それ以外はIPv4と判定
      if (ip.includes(':')) {
        ipVersionElement.textContent = '➡️ あなたは現在、IPv6で接続しています。';
        ipVersionElement.style.color = '#007bff'; // 青色で表示
      } else {
        ipVersionElement.textContent = '➡️ あなたは現在、IPv4で接続しています。';
        ipVersionElement.style.color = '#28a745'; // 緑色で表示
      }
    })
    .catch(error => {
      console.error('IPアドレスの取得に失敗しました:', error);
      ipAddressElement.textContent = 'IPアドレスの取得に失敗しました。';
      ipVersionElement.textContent = '';
    });
});
</script>Code language: JavaScript (javascript)

結果的には上手く動作していると思います。IPv6接続を無効にするとIPv4のアドレス（ルーターのWAN側グローバルIPアドレス）になるので機能していると思います。

ipifyによるIPv6接続判定のブログパーツ画像

OS情報を追加してみた

個人的にはLinuxデスクトップを良く使用するので、OS情報を表示させてみたくなりました。ちょっと修正することにしました。これもGeminiに相談したらコードの修正でできるという回答を得られました。

<div class="ip-detector-widget">
<img src="https://mypace.sasapurin.com/wp-content/uploads/2025/09/IPv6-Ready.png" title="IPv6 Ready" alt="IPv6 Ready">
	<h4>IPアドレスの診断</h4>
	<p>診断には<a href="https://www.ipify.org/" target="_blank">ipify</a>のAPIを使わせていただいています。</p>
	<hr>
  <p>あなたのIPアドレスは:</p>
  <p id="ip-address">IPアドレスを読み込み中...</p>
  <p id="ip-version">バージョンを判定中...</p>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const ipAddressElement = document.getElementById('ip-address');
  const ipVersionElement = document.getElementById('ip-version');
  const osInfoElement = document.createElement('p'); // OS情報を表示する新しい要素を作成
  osInfoElement.id = 'os-info';
  ipVersionElement.parentNode.insertBefore(osInfoElement, ipVersionElement.nextSibling);

  // OSを判定する関数
  function getOS() {
    const userAgent = navigator.userAgent;
    if (userAgent.includes('Win')) {
      return 'Windows';
    } else if (userAgent.includes('Mac')) {
      return 'macOS';
    } else if (userAgent.includes('Linux')) {
      return 'Linux';
    } else if (userAgent.includes('Android')) {
      return 'Android';
    } else if (userAgent.includes('iOS')) {
      return 'iOS';
    } else {
      return '不明';
    }
  }

  // ipify.orgのAPIエンドポイント
  const ipv4ApiUrl = 'https://api.ipify.org?format=json';
  const ipv6ApiUrl = 'https://api64.ipify.org?format=json';

  fetch(ipv6ApiUrl)
    .then(response => {
      if (!response.ok) {
        return fetch(ipv4ApiUrl);
      }
      return response.json();
    })
    .then(data => {
      const ip = data.ip;
      ipAddressElement.textContent = `IPアドレス: ${ip}`;

      if (ip.includes(':')) {
        ipVersionElement.textContent = '➡️ あなたはIPv6で接続しています。';
        ipVersionElement.style.color = '#007bff';
      } else {
        ipVersionElement.textContent = '➡️ あなたはIPv4で接続しています。';
        ipVersionElement.style.color = '#28a745';
      }

      // OS情報を取得して表示
      osInfoElement.textContent = `OS: ${getOS()}`;
    })
    .catch(error => {
      console.error('データの取得に失敗しました:', error);
      ipAddressElement.textContent = 'IPアドレスの取得に失敗しました。';
      ipVersionElement.textContent = '';
      osInfoElement.textContent = '';
    });
});
</script>Code language: JavaScript (javascript)

Geminiに発展形のアイディアも聞いてみた

Geminiは、更に改良案として「IPv4とIPv6とで違うアイコンを表示する」ことや、「接続元の地域（国）などを表示する」ということも提案してくれました。

そこまでやると逆に怪しいサイトというか、情報を抜いてると思われても嫌なので、後々そういう発展形も可能だということを覚えておく程度にしたいと思います。IP情報はWebサーバーのログには残るものの、それ以外は残していませんし、何事もなければログを解析することも無いのでほどほどが良いでしょう。

今回はこれで終わりにしておきますが、もはやAIには自分では思いつかないアイディアを提案させると言う使い方もできちゃう訳ですね。自分でアイディアを考えるのが苦手な人にもチャンスが巡ってきたということですね。AIを上手く活用するかどうかは人それぞれですが、活用できる人の方がチャンスをモノに出来るように思えます。あくまでもAIはツールですけどね。

しかし、今回のことで、もはやIPv6のブログパーツなるものも存在しないと知って残念に思いました。IPv6はItojunが願ったように裏方のネットワーク技術として、人々が意識しない内に浸透してネットワークインフラを支えるようになっていると思います。私はハードウェア系のエンジニアですが、年齢が近い天才プログラマーItojunと一度会って話をしてみたかったと残念に思ったのを思い出しました。

Itojun、あなたの思い描いていたIPv6の技術の普及はゆっくりでしたが、確実に浸透しながらネットワークインフラとして世の役に立っていますよ。

本当にIPv6で接続しているか確認（IPvFoo）

Firefoxにアドオン「IPvFoo」を追加して、接続先のサーバーのIPアドレスを表示させることができます。

IPvFoo – 🦊 Firefox (ja) 向け拡張機能を入手
Firefox 向け IPvFoo をダウンロード。Display the server IP address, with a realtime summary of IPv4, IPv6, and HTTPS information ac...
addons.mozilla.org

当サイト（ぼちぼち書くブログ）は、IPv6で接続できる環境からアクセスすればIPv6で応答し、IPv4でしか接続できない環境からアクセスすれはIPv4で応答していることが確認できました。

当サイトにIPv6環境から接続すると、IPv6で接続できていることが確認できたのでキャプチャ画像を残した

ちょっと予定外のコンテンツも混ざっているみたいで色々なサーバーにアクセスする構造になってしまっていることも可視化されました。テストした時の残骸が残っている様なので整理しなくてはならないということも気づけて良かったです。

（参考）GoogleとYouTubeは全てのサーバーがIPv6で応答してくれます。
Yahoo!は意外にも全てIPv4でサーバーが応答しますので、IPv6対応はまだみたいです。

スポンサーリンク

コメント

Comment spam is annoying.

There has been an increase in comment spam, but we decline it. It’s pointless because we use Akismet to block spam comments. Spam comments will not be posted.

コメントスパムが増えていますがお断りします。akismetでスパムコメントを弾いているので無意味です。スパムコメントは掲載されません。

タイトルとURLをコピーしました