💡 【検証環境・個人研究（PoC）に関する注記】
本記事は、筆者個人の自宅検証環境（ホームラボ／仮想環境）において、公開情報およびOSS（オープンソースソフトウェア）を用いて独自に構築・検証した個人研究（PoC）の記録です。特定の企業・団体の実環境や業務上の非公開情報とは一切関係ありません。

はじめに：市販ツールのネットワークマップに感じる「これじゃない感」

インフラエンジニアや情シスなら、一度は「社内ネットワークの可視化マップ」を導入したことがあると思います。
Zabbixのマップ機能、PRTG、オープンソースのトポロジーツール……。

しかし、実際に使ってみてこう感じたことはないでしょうか？

仮想IPやDockerのブリッジ、一時的なゴミノードが大量に描画されて画面がぐちゃぐちゃ
ノードをクリックしても「Ping応答グラフ」が出るだけで、そこからSSHやリモートデスクトップに飛べない
重いSVGやDOMノードを何百個も配置していてブラウザのファンが回り出す

運用担当者が本当に見たいのは、**「今オフィスに物理的に存在している本物の機器（実機）だけがスッキリ整理されたマップ」であり、「障害や設定変更のときに、その画面からワンクリックですぐ対象機器にログインできるハブ」**です。

そこで、「実機100%抽出」「7大分類Podグルーピング」「HTML5 Canvas軽量描画」「ワンクリック遠隔接続（.rdp動的生成 / SSH / VNC）」 を備えたWebダッシュボードを作りました。

工夫 1：仮想IPを徹底排除する「実機100% 7大分類Pod」

一般的なARPやポートスキャンでは、仮想マシンのインターフェースや一時的なローカルIPが混入してノード数が肥大化します。
本システムでは、MACアドレスのOUIベンダー判定、ホスト名、OS判定結果（TTLや稼働ポート）を基に、以下の7つの明確な業務Podに分類し、未分類のゴミノードをフィルタリングします。

この分類により、「会議室のプリンタはどこか」「どのPCがどのサブネットにいるか」が一目で把握できるようになります。

工夫 2：ブラウザから即繋がる「ワンクリックRDP自動生成」

Windows端末のIPアドレスが分かっても、毎回「リモートデスクトップ接続」を起動してIPを手打ちし、解像度やクリップボード共有を設定するのは手間です。

そこで、FastAPI側で接続先IPと最適設定（画面サイズ、クリップボード有効化、スマートサイジング）を埋め込んだ .rdp ファイルを動的にストリーミング生成するAPIを実装しました。

アーキテクチャ詳細、処理フロー図、中核ロジックのコード抜粋（PoC）、およびパラメータ解説・トラブルシューティング手順は、GitHubリポジトリ（詳細技術リファレンス）にて管理・随時アップデートしています。
設計の全体像や要点スニペットの確認は以下のリンクをご参照ください。

👉 GitHubで詳細技術リファレンス・処理フローを見る (QIITA_ARTICLE_DETAIL_6.md)

ユーザーがマップ上のWindowsノードをクリックして「RDP接続」を押すと、ブラウザが .rdp を即座にダウンロードし、クリック1回でMicrosoft Remote Desktopが立ち上がってログイン画面が表示されます。

工夫 3：接続前に死活がわかる「リアルタイム・ポートチェッカー」

「RDPをクリックしたけどタイムアウトで待たされた」「SSHがなぜか繋がらない」という無駄な待ち時間をなくすため、API側に超軽量なTCPソケットチェッカーを用意しました。

アーキテクチャ詳細、処理フロー図、中核ロジックのコード抜粋（PoC）、およびパラメータ解説・トラブルシューティング手順は、GitHubリポジトリ（詳細技術リファレンス）にて管理・随時アップデートしています。
設計の全体像や要点スニペットの確認は以下のリンクをご参照ください。

👉 GitHubで詳細技術リファレンス・処理フローを見る (QIITA_ARTICLE_DETAIL_6.md)

UI上で「⚡ ポート確認」を押すと、わずか0.8秒で画面上のアイコンが 🟢（開放）または ❌（閉じている）に切り替わります。繋がることが確定してから接続できるため、ストレスが激減します。

工夫 4：DOMを使わず HTML5 Canvas で爆速描画

DOM要素（<div>）を何百個も並べたり巨大なSVGを操作すると、ブラウザの拡大縮小やドラッグ移動（パン）で描画がカクつきます。
そこで、描画には HTML5 Canvas 2D Context を採用しました。

アーキテクチャ詳細、処理フロー図、中核ロジックのコード抜粋（PoC）、およびパラメータ解説・トラブルシューティング手順は、GitHubリポジトリ（詳細技術リファレンス）にて管理・随時アップデートしています。
設計の全体像や要点スニペットの確認は以下のリンクをご参照ください。

👉 GitHubで詳細技術リファレンス・処理フローを見る (QIITA_ARTICLE_DETAIL_6.md)

Canvasを利用することで、端末が100台あっても60fpsのヌルヌルしたドラッグ・ズーム体験が維持されます。

まとめ：運用者のための「生きたトポロジー」を作ろう

ネットワークマップは、単なる「観賞用のきれいな絵」であっては意味がありません。

本物の実機だけが整理されて並んでいること
障害時にその画面から直接、即座にログイン（SSH/RDP/Web）できること
事前チェックで繋がることが保証されていること

この3点が揃って初めて、日々の運用負荷を半分にしてくれる「生きた運用ハブ」になります。
自社の社内LANやホームラボ（自宅サーバー群）の管理に困っている方は、ぜひFastAPIとHTML5 Canvasを組み合わせた自作トポロジーハブを試してみてください！

📚 さらに詳しい本番実装・トラブルシューティングについて

本記事は現場運用のエッセンスを凝縮したサマリー版です。
本番導入に向けた 「深層メカニズム解説」「完全パラメータ表」「現場アンチパターン」「トラブルシューティング対応表」「運用チェックリスト」 は、以下のGitHub完全技術リファレンスにて全網羅して公開しています。

👉 【第6弾詳細技術リファレンス】

⭐ 全14層・200パターンの自立型インフラ＆オンプレAIリファレンスを順次公開予定です。役に立った・面白かったと感じていただけましたら、ぜひリポジトリへの Star (★) をお願いいたします！
👉 GitHub リポジトリ: ojisan-arsenal