TWSNMP Map Viewer (twsnmpmv)
TWSNMP Map Viewerは、TWSNMP FCで管理されているネットワークの状態をモバイルで視覚化するためのアプリケーションです。複数のTWSNMPサイトを監視し、ネットワークマップを表示して、ノードやポーリングの状態をリアルタイムで追跡できます。
特徴
- マルチサイト対応: 複数のTWSNMPインスタンスを同時に監視。
- インタラクティブなネットワークマップ: ノード、ライン、ステータスインジケータを使用してネットワークレイアウトを視覚化。
- リアルタイムステータス更新: 設定されたサイトから定期的にステータスを取得。
- ステータスの視覚化: 色分けされたステータス（正常、注意、軽度、重度）とアイコンで素早く識別可能。
- モバイル対応: Capacitorを使用してシームレスなモバイル体験を提供。
ダウンロード
- iOS: App Storeからダウンロードできます。
- Android: GitHubのリリースからAPKファイルをダウンロードできます。
スクリーンショット
| マップ | サイトリスト |
|---|---|
 |
 |
| 環境レポート | IPAMレポート |
|---|---|
 |
 |
| サイト編集 | AI分析 |
|---|---|
 |
 |
技術スタック
- Frontend: Svelte + TypeScript
- Build Tool: Vite
- Visualization: p5.js (ネットワークマップの描画)
- Mobile Platform: Capacitor
- Styling: Vanilla CSS + Tailwind CSS (一部)
- API Communication: Fetch API + JWT認証
アーキテクチャ概要
本アプリケーションは、シンプルなストアベースのアーキテクチャを採用しています。
- DataStore (
src/lib/datastore.ts): アプリケーションの状態（TWSNMPサイトのリストや現在のステータスなど）を管理する中心的なハブ。Capacitor Preferencesを使用してデータを永続化します。 - TwsnmpAPI (
src/lib/twsnmpapi.ts): TWSNMP REST APIとやり取りするためのラッパー。 - Map Library (
src/lib/map.ts): p5.jsを使用してネットワークマップをレンダリングし、ズームなどのユーザーインタラクションを処理する専用ライブラリ。 - Svelte Components: UIレイヤー。
src/lib/内の再利用可能なコンポーネントとして構成されています。
自分でビルドする場合
前提条件
- mise (ツールとタスクの管理に推奨)
- Node.js (miseで管理)
- Java OpenJDK 21 (miseで管理)
インストール
- リポジトリをクローンする:
git clone https://github.com/twise-oss/twsnmpmv.git cd twsnmpmv - ツールと依存関係をインストールする:
mise install npm install
開発
開発サーバーを起動する:
mise run dev
テストを実行する:
mise run test
E2Eテストと操作録画
このプロジェクトでは、E2Eテストと操作画面の録画にMaestroを使用しています。
前提条件
- Maestro CLIのインストール:
curl -Ls "https://get.maestro.dev" | bash - AndroidエミュレータまたはiOSシミュレータが起動していること。
- アプリがデバイスにインストールされていること（
mise run debug:androidまたはmise run debug:ios）。
テストの実行
すべてのE2Eテストを実行する場合:
mise run e2e:test
操作の録画
テストフローを実行し、操作画面をMP4ファイルとして録画する場合:
mise run e2e:record
ビルドと実行
このプロジェクトでは、miseを使用してWebおよびモバイルプラットフォーム向けのビルドと同期タスクを調整しています。
Webプロダクションビルド
mise run build
Android
- エミュレータでのデバッグ:
mise run debug:android - リリース用APKのビルド:
mise run release:android
iOS
- シミュレータでのデバッグ:
mise run debug:ios - リリース用ビルド:
mise run release:ios
フルリリース (両プラットフォーム)
mise run release
ライセンス
このプロジェクトはApache License 2.0の下でライセンスされています。詳細はLICENSEファイルを参照してください。