XDR UI
これまで見てきた拡張ポイントは、いずれもプラットフォームの背後で動作するものでした。接続プロファイルは設定を管理し、クエリコマンドはデータを処理し、その結果はクエリ画面やダッシュボードウィジェットを通じて表示されます。
XDR UIは、アプリが画面全体を所有する拡張ポイントです。アプリはWebコンソールのメニューに自身の項目を登録し、ユーザーがそのメニューを選択すると、アプリが作成した画面がWebコンソール内に表示されます。
XDR UIは次の2つの目的で使用します。
統合対象製品の管理コンソールをログプレッソ・ソナーへ移植します。 セキュリティ運用担当者は、ファイアウォール、EDR、脅威インテリジェンスのように複数の製品を併用し、製品ごとに異なるコンソールを開いて業務を処理します。ログプレッソでログを収集しても、実際の調査と対応は依然として各製品のコンソールで行われます。アプリが対象製品の画面をログプレッソ内に再実装すれば、担当者はログプレッソ上で検知内容を確認し、詳細情報を照会し、対応まで完了できます。複数の製品を単一プラットフォームで統合管理することがXDRの目標であり、XDR UIはその最終段階を担います。
ログプレッソ・ソナー自体の機能を拡張します。 ログプレッソの標準画面では表現しにくい業務フローを、アプリが直接提供します。アプリが追加したデータを扱う専用の管理画面や、複数の段階を行き来する調査画面がこれに該当します。
いずれの場合も、ウィジェットやダッシュボードでは解決できません。ウィジェットとダッシュボードはログプレッソ・ソナーが定義した枠にデータを載せる方式であるため、表現できる形が決まっています。XDR UIは画面全体をアプリが構成するため、一覧と詳細の遷移、項目選択に応じた動作、対象製品固有の情報構造をそのまま再現できます。
XDR UIの動作方式
アプリはマニフェストファイルにメニューを登録し、メニューの遷移パスを /app-loader/{app_code}/{内部パス} の形式で指定します。ユーザーがこのメニューを選択すると、Webコンソールのアプリローダーが画面を開き、アプリローダーは /app/{app_code}/{内部パス} を指すiframeを1つ配置します。プラットフォームはこのアドレスへのリクエストに対して、アプリバンドルに内蔵された WEB-INF ディレクトリの静的ファイルを返します。
メニュークリック
→ /app-loader/sample/subnet-groups (Webコンソールのルート、アプリローダーが処理)
→ iframe src = /app/sample/subnet-groups
→ バンドル内の WEB-INF/index.html を返す
→ WEB-INF/assets/index-*.js, index-*.css を読み込む
この構造で重要な点は、静的ファイルを配信するサーブレットをアプリが自ら作らないということです。アプリが行うのはビルド成果物をバンドルの WEB-INF ディレクトリに配置することまでで、残りはプラットフォームが処理します。
画面をiframeで分離しているため、アプリはWebコンソールと異なるフレームワークや異なるバージョンを使用でき、アプリのスタイルがWebコンソールに影響を与えません。その代わり、アドレスバーとブラウザの履歴はWebコンソールが所有するため、アプリとWebコンソールは定められたメッセージ規約に従って画面遷移をやり取りします。この規約は画面ルーティングで説明します。
開発スタック
XDR UIは次のスタックを前提とします。アプリごとに異なるスタックを選択することもできますが、本書の例とデザインシステムの資産は以下を前提に作成されています。
| 区分 | 使用技術 | 備考 |
|---|---|---|
| UIライブラリ | React 19 | |
| 言語 | TypeScript 5.7 | 厳密モード |
| ビルド | Vite 6 | Mavenビルドが自動的に実行 |
| スタイル | Tailwind CSS 4 | デザインシステムのトークンをテーマ変数として定義 |
| ルーティング | なし | Webコンソールが履歴を所有するため、ルーターライブラリは不要 |
Node.jsとnpmは自分でインストールする必要はありません。Mavenビルドが必要なバージョンをダウンロードして使用します。詳細は開発環境の準備を参照してください。
本章を読む順序
XDR UIの開発は1つのアプリに画面を追加する作業であり、次の順序で進めます。
- AIエージェントによる開発 — 画面開発をAIエージェントに任せる際に必要な参照資料とルールです。自分で開発する場合も、デザインシステムの場所と遵守事項を把握できます。
- UIプロジェクトの作成 — アプリにUIを追加する際に必要な最小限のファイル構成です。
- UIのビルドとインストール — ビルドの流れとインストール方法、画面を素早く修正する開発方法です。
- アプリマニフェストとメニュー — Webコンソールのメニューにアプリ画面を登録します。
- 画面ルーティング — Webコンソールとアプリが画面遷移をやり取りする規約です。
- REST APIプラグイン — 画面がサーバーのデータを読み取る方法です。
- デザインシステムの遵守 — アプリ画面が製品の他の画面と同じように見えるようにする仕様です。
次節では、AIエージェントを活用してXDR UIを開発する方法を説明します。