---
url: https://docs.ogmabox.com/ja/development/architecture.md
description: >-
  Ogma の Rust バックエンド、Vue フロントエンド、Electron シェル、ローカルストレージ、プラグインランタイム、MCP
  サーバー、デスクトップパッケージの構成を説明します。
---

# アーキテクチャ {#architecture}

Ogma は、Rust バックエンド、Vue フロントエンド、Electron シェル、ローカルのプロジェクトストレージ、プラグインランタイム、任意の MCP 統合で構成された、ローカルデスクトップアプリケーションです。

## 主要コンポーネント {#high-level-components}

| コンポーネント | 場所 | 役割 |
| --- | --- | --- |
| Rust プロキシ/API バックエンド | `crates/proxy` | MITM プロキシ、REST API、ストレージ、スキャナー、再送、自動化、プラグイン、MCP、OAST、ブラウザー制御エンドポイント。 |
| Vue フロントエンド | `frontend/src` | ワークスペース UI、ストア、ルート、エディター、スキャナー、プラグイン iframe、AI ワークスペース、ユーティリティ。 |
| Electron デスクトップシェル | `desktop` | パッケージ化されたデスクトップアプリ、ブラウザーウィンドウの統合、設定ブリッジ、アプリのライフサイクル。 |
| ドキュメント | `docs` | VitePress のドキュメントサイト。 |
| データディレクトリ | `ogma-data` またはプラットフォームのアプリデータ | SQLite データベース、CA 関連データ、プラグイン、エクスポート、バックアップ、ファイル。 |

## バックエンド {#backend}

バックエンドは REST API とプロキシリスナーを公開します。主なバックエンドモジュールは次のとおりです。

* `proxy_server.rs`：HTTP のインターセプトと転送。
* `intercept.rs` と `intercept_rules.rs`：インターセプトキューと照合。
* `store.rs` と `store_actor.rs`：プロジェクトデータベースへのアクセスと非同期ストアハンドル。
* `api.rs`：API ルーティングとハンドラー。
* `replay.rs`、`automate.rs`、`workflows.rs`：繰り返し可能なリクエスト実行。
* `passive_scanner.rs` と `active_scanner.rs`：スキャナーエンジン。
* `plugins.rs` と `plugin_runtime.rs`：プラグインのメタデータ、サンドボックスランタイム、権限、イベント。
* `mcp.rs`：MCP リソースとツール。
* `ca.rs`、`tls_cert.rs`、`client_cert.rs`：証明書と TLS のサポート。
* `ws_history.rs`、`ws_replay.rs`、`sse.rs`：ストリーミング通信のサポート。
* `oast.rs`：アウトオブバンドのコールバックサービス。

## フロントエンド {#frontend}

フロントエンドは Vue アプリケーションで、ほとんどのワークスペースビューにルート単位の遅延読み込みを使用します。

主要な領域：

* `router/index.ts`：ワークスペースのルートと設定のルート。
* `components/NavSidebar.vue`：製品のメインナビゲーション。
* `stores/*`：履歴、再送、自動化、指摘事項、ワークフロー、プラグイン、診断対象範囲、シェル、AI、その他の状態を管理する Pinia ストア。
* `api/client.ts` と `api/types.ts`：型付きの API クライアントインターフェース。
* `views/*`：ワークスペースの機能ページ。
* `components/WorkspacePanel.vue`：AI とリバースシェルのワークスペースパネル。
* `views/PluginsView.vue` と `views/PluginPageView.vue`：プラグインのインストール、管理、フロントエンド iframe のホスティング。

## デスクトップシェル {#desktop-shell}

Electron シェルは、パッケージ化されたデスクトップ環境とネイティブブリッジ機能を提供します。

* アプリウィンドウの起動と制御。
* デスクトップ設定をフロントエンドのローカルストレージに永続化。
* Ogma ブラウザーのウィンドウと埋め込みブラウザービューを開く機能。
* デスクトップ配布用のアセットとバイナリのパッケージ化。

## ストレージモデル {#storage-model}

Ogma は診断データをローカルに保存します。バックエンドのマイグレーションは、次のデータについてプロジェクト単位のテーブルを定義します。

* HTTP 履歴とボディ。
* WebSocket と SSE の通信。
* 再送セッションと試行。
* 自動化セッション、実行履歴、結果。
* 指摘事項と証拠へのリンク。
* ワークフローとワークフローの実行履歴。
* 診断対象範囲のプリセット。
* プラグインとプラグイン権限。
* ファイル、エクスポート、バックアップ、設定。

## プラグインランタイム {#plugin-runtime}

プラグインにはバックエンドコンポーネント、フロントエンドコンポーネント、またはその両方を含められます。

バックエンドプラグインは JavaScript サンドボックス内で実行され、`sdk` オブジェクトを受け取ります。フロントエンドプラグインはサンドボックス化された iframe 内で実行され、Ogma が制御するブリッジを通じて通信します。

重要な境界：

* フロントエンドプラグインは親 DOM にアクセスできません。
* ブリッジコマンドはサーバー側で検証されます。
* 保護されたバックエンド操作には、宣言され、許可された権限が必要です。
* 安定した実行時動作を確保するため、インストールされたパッケージは Ogma 管理下のプラグインディレクトリにコピーされます。

[プラグインシステム](../plugins/README.md)をご覧ください。

## MCP 統合 {#mcp-integration}

MCP サーバーは、Ogma のプロジェクトコンテキストを外部のアシスタントに公開します。既定では読み取り専用で起動します。書き込み、エクスポート、リクエスト送信、ワークフロー実行、インターセプト制御には明示的な権限が必要です。

[MCP の設定](../mcp-setup.md)をご覧ください。

## 設計原則 {#design-principles}

* 既定ではローカルファースト。
* 指摘事項と証拠を関連付ける。
* 自動化の前に診断対象範囲を設定する。
* AI、プラグイン、リクエスト送信、エクスポートには明示的な権限制御を設ける。
* テスターが繰り返し行う作業のために、すばやいナビゲーションを提供する。
* 既存のプロキシワークフローと互換性を保ちつつ、Ogma の拡張性を維持する。