全体アーキテクチャ設計

Electronベースのクロスプラットフォームアプリケーションは、プロセス分離アーキテクチャを採用：

• メインプロセス (src/main/core.ts)：ウィンドウ管理とデバイスエミュレーションを担当
• レンダラープロセス (src/ui/MainView.tsx)：ReactによるUIレイヤーとWebView制御
• プリロードスクリプト (src/bridge/preload.js)：プロセス間通信のセキュアブリッジ

主要技術構成

• 基盤フレームワーク：Electron 13+
• 状態管理：Redux (src/ui/state)
• デバイスエミュレーション：カスタム設定システム (src/core/deviceConfig.ts)

中核モジュール分析

1. デバイス管理システム

マルチデバイスプレビューの中枢を担う設定管理システム：

// デバイス設定インターフェース [src/core/deviceConfig.ts]
export interface DisplayProfile {
  identifier: string;
  verticalPixels: number;
  horizontalPixels: number;
  label: string;
  agentString: string;
  deviceClass: string;
  pixelDensity: number;
  touchEnabled: boolean;
  mobileOptimized: boolean;
  supportedFeatures: string[];
  customConfig?: boolean;
}

UIコンポーネントによる可視化操作機能：

• デバイスフィルタリング検索
• カスタムプロファイル設定
• デバイスグループ管理

2. ブラウザ同期機構

複数デバイス間のリアルタイム連携を実現 (src/core/sync-engine.ts)：

// ファイル変更監視実装 [src/core/sync-engine.ts]
export function initFileMonitor(targetPath: string) {
  if (targetPath && fs.existsSync(targetPath)) {
    const jsObserver = syncService.watch(
      [`${targetPath}`, `${rootDir}/**/**.js`],
      { persistent: true }
    ).on('modify', syncService.refresh);
    
    const cssObserver = syncService.watch(
      `${rootDir}/**/**.css`,
      { persistent: true },
      (eventType, filename) => {
        if (eventType === 'change') {
          syncService.refreshStyles(filename);
        }
      }
    );
  }
}

3. マルチデバイスレンダリングエンジン

WebViewコンポーネントとデバイス設定の連携フロー：

1. デバイス選択：DeviceSelectorでターゲットデバイスを指定
2. パラメータ適用：Viewport設定とUser-Agentを動的更新
3. 同期レンダリング：IPC経由で全ウィンドウに変更通知

主要機能の実装原理

レスポンシブプレビューの中核技術：

ブラウザ同期メカニズム

1. 同期サービス初期化 (src/core/sync-engine.ts)
2. ファイルシステム変更の監視登録
3. 変更検知時のWebViewインスタンス更新

コード構造と拡張性

モジュール化されたプロジェクト構成：

project-root/
├── core/               # メインプロセス
│   ├── sync-engine.ts   # 同期サービス
│   ├── capture/         # 画面キャプチャ
│   └── permissions/     # 権限制御
├── ui/                 # UIレイヤー
│   ├── components/      # Reactコンポーネント
│   ├── state/           # 状態管理
│   └── MainView.tsx     # メインインターフェース
└── bridge/             # 共有モジュール
    └── deviceConfig.ts  # デバイス設定

拡張開発ガイド

1. 新規デバイス追加：deviceConfig.tsにプロファイル定義
2. UIコンポーネント拡張：components配下に新規作成
3. API拡張：プリロードスクリプト経由で機能公開