TWSNMP Map Viewer (twsnmpmv)

English

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で管理)

インストール

1. リポジトリをクローンする:

   git clone https://github.com/twise-oss/twsnmpmv.git
   cd twsnmpmv

2. ツールと依存関係をインストールする:

   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ファイルを参照してください。