IPv6も普及してきた
以前、当サイトをIPv6対応させた頃には、まだSSL（HTTPS）の対応が急務だという時期で、IPv6への対応は大手しか実現されていませんでした。
当時は「はてなブログPro」のSSL対応が遅かったため、しびれを切らせて自前サーバーによるSSL、IPv6対応を自力で済ませました。2018年4月29日の記録に残っていました。
最近は各家庭のインターネット回線もIPv6対応して来たこともあり、大手でなくてもIPv6対応させているところが多くなってきました。
また、今や一人１台以上保有しているスマートフォンの多くも、デバイスはしっかりIPv6対応しているものが大半なので、通信回線がIPv6対応しているなら後は接続先プロバイダ側の対応状況次第です。Webサイト側も対応サイトが増えてきたと思います。
IPv6と言えば「Itojun」いとじゅん
IPv6といえば、「Itojun」こと「萩野純一郎」氏を思い出します。ネットワーク系の日本人プログラマー（ハッカー）はIPv6が普及する将来を見据えていて、YouTubeで熱く語ってくれている動画を観たものです。その数年後に若くして他界されたことを知りました。
動画の数は多くはありませんが、「Itojun」の貴重な動画がYouTubeに残されています。今現在あるテクノロジーは、過去に存在した人たちの努力のお陰で現在につながっているということが分かります。IPv6もそういう積み重ねの恩恵を受けている技術だと言うことの一例です。
当サイトにIPv4/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 = '';
});
});Code language: JavaScript (javascript)コードの解説
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アドレス文字列にコロン
- 視覚的な表示:
- 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アドレス）になるので機能していると思います。
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の技術の普及はゆっくりでしたが、確実に浸透しながらネットワークインフラとして世の役に立っていますよ。
コメント