自己紹介
みなさん初めまして、IIJの清水です。
2024年に新卒で入社し、ネットワークの一元管理と統合運用を目的としたMPCサービスの開発を担当しています。
本記事ではMPCサービスの新機能である「ネットワークマップ」機能についてご紹介します。
本記事での登場人物
SEIL
「SEIL（ザイル）」は、IIJがISPのノウハウを結集して開発した高機能ルータです。 *https://www.seil.jp より
MPC（IIJマルチプロダクトコントローラサービス）
IIJマルチプロダクトコントローラサービスは、IIJの高機能ルータ「SEIL（ザイル）シリーズ」をはじめとする様々なプロダクトを遠隔から一元的に管理する仕組みを提供するサービスです。 * https://www.iij.ad.jp/biz/mpc/ より
サービスアダプタ
2025 年 10 月現在、MPCサービスでは以下をまとめて「サービスアダプタ」と呼称しています。
背景
ネットワークを運用していると、
「どう繋がってるんだっけ？」
「いまこの瞬間、」
みたいな疑問って日常的に出てきますよね。
ただ、情報がリストで並んでいるだけだと 全体像をパッと把握するのは難しい という課題がありました。
また、一度書いたネットワークマップ構成図が一体いつのものなのか、果たしてこれは最新のものなのか？と、確認に追われたりしますよね。
頭の中でネットワーク図を描くのはもうやめたい！
そんな思いから、ネットワークの構成や状態を ひと目で直感的に理解できる 新機能「ネットワークマップ」を実装しました。
ネットワークマップでなにができるか
目玉機能は以下の3つです。
- SEIL/SA-Wシリーズのコンフィグから、ネットワークマップを自動生成
- サービスアダプタの状態確認
- トラフィックの可視化
SEIL/SA-Wシリーズのコンフィグから、ネットワークマップを自動生成
以下の組み合わせから選択するだけで、現状の構成に沿ったネットワークマップを自動で生成します。
- WAN, VPN, LAN
- WAN, LAN
- VPN, LAN
WAN, VPN, LAN を選択した場合、以下のようなネットワークマップを自動生成します。
青: WAN, 赤: VPN, 緑: LAN
0 から作図を行う必要がなく、自動生成で作成したネットワークマップをベースに自分好みに手を加えることが可能です。
サービスアダプタの状態確認
ネットワークマップ上に存在するサービスアダプタの状態を簡単に把握することができます。
- 接続状況
- IPv4アドレス
- IPv6アドレス
トラフィックの表示
サービスアダプタの特定のインターフェースに流れるトラフィックを簡単に把握することができます。
サービスアダプタは、Heartbeat と呼ばれるパケットを自動で送信しています。
これまでは 受信ログの表示, グラフの参照 で、その値を確認することができました。
ネットワークマップでは Heartbeat を使って取得した各インターフェースのトラフィックを俯瞰的に可視化することができます。
もちろん0からネットワークマップを作成することも可能です
編集モードから任意のサービスアダプタや、PCやスマートフォンなどの図形を追加・編集・削除・配置が可能です
苦労話
今回、MPCに「ネットワークマップ機能」を実装するにあたり、新たに JavaScript のライブラリを導入しました。
MPC のフロントエンドの実装は TypeScript × React なので、ライブラリの導入自体はとても簡単に行うことができました。
しかし、このライブラリはピュアな JavaScript で React 特有の「状態」を持たないかつ、ライブラリは難読化されてワンライナーとなっているため拡張は不可能でした。
そのため、ライブラリで提供されている一部のコンポーネントの使用を諦め、それらの代替となるコンポーネントを TypeScript × React で独自で実装することで MPC 固有の「状態」を使い回しています。
車輪の再発明をしている気分でとても辛い日々でしたが、完成系をみた人には気が付かれないほど自然に作り上げることができたので嬉しい限りです。
今後の展望
「サービスアダプタによるイベント監視（モニタ機能）」の「他のホストのping応答性」イベントなども、ネットワークマップで確認できると幸せだろうなと思い描いているところです。
上記の他にもユーザの皆様が幸せになれるような機能を順次実装していきます！
ここまで読んでいただきありがとうございました！
元の記事を確認する
