// Electron: BrowserWindow のメモリ最適化
const { BrowserWindow } = require('electron');
 
function createOptimizedWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 不要な機能を無効化してメモリ節約
      nodeIntegration: false,
      contextIsolation: true,
      sandbox: true,
      // 背景スロットリングを有効化
      backgroundThrottling: true,
      // スペルチェックを無効化（不要な場合）
      spellcheck: false,
    },
    // GPU アクセラレーションの制御
    // 必要に応じて無効化
    show: false, // ready-to-show で表示してフリッカー防止
  });
 
  // ウィンドウが非表示の間はレンダリングを抑制
  win.on('hide', () => {
    win.webContents.setBackgroundThrottling(true);
  });
 
  // 準備完了後に表示
  win.once('ready-to-show', () => {
    win.show();
  });
 
  // ウィンドウ破棄時のクリーンアップ
  win.on('closed', () => {
    // 参照をクリアしてGC対象にする
    // win = null; は呼び出し元で実行
  });
 
  return win;
}

// Electron: セキュアな BrowserWindow 設定
const { BrowserWindow, session } = require('electron');
 
function createSecureWindow() {
  const win = new BrowserWindow({
    webPreferences: {
      // セキュリティ必須設定
      nodeIntegration: false,
      contextIsolation: true,
      sandbox: true,
      // リモートコンテンツの制限
      webSecurity: true,
      allowRunningInsecureContent: false,
      // preload スクリプトのみを許可
      preload: path.join(__dirname, 'preload.js'),
    },
  });
 
  // CSP の設定
  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': [
          "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';"
        ],
      },
    });
  });
 
  // 外部リンクのナビゲーション制限
  win.webContents.on('will-navigate', (event, url) => {
    const parsedUrl = new URL(url);
    if (parsedUrl.origin !== 'http://localhost:3000') {
      event.preventDefault();
    }
  });
 
  // 新しいウィンドウの作成を制限
  win.webContents.setWindowOpenHandler(({ url }) => {
    // 外部URLはデフォルトブラウザで開く
    shell.openExternal(url);
    return { action: 'deny' };
  });
 
  return win;
}

// Tauri: tauri.conf.json のセキュリティ設定
{
  "app": {
    "security": {
      "csp": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';",
      "dangerousDisableAssetCspModification": false,
      "freezePrototype": true
    }
  },
  "plugins": {
    "fs": {
      "scope": {
        "allow": ["$APPDATA/**", "$DOWNLOAD/**"],
        "deny": ["$HOME/.ssh/**", "$HOME/.gnupg/**"]
      }
    },
    "shell": {
      "scope": {
        "allow": [
          { "name": "open-url", "cmd": "open", "args": true }
        ]
      }
    }
  }
}

// Electron IPC パターン
 
// --- preload.js ---
const { contextBridge, ipcRenderer } = require('electron');
 
contextBridge.exposeInMainWorld('electronAPI', {
  // レンダラー → メインへのリクエスト
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
  saveFile: (data: string) => ipcRenderer.invoke('file:save', data),
 
  // メイン → レンダラーへの通知を購読
  onUpdateAvailable: (callback: Function) => {
    ipcRenderer.on('update-available', (_event, info) => callback(info));
  },
 
  // 双方向ストリーミング
  onProgressUpdate: (callback: Function) => {
    ipcRenderer.on('progress', (_event, value) => callback(value));
  },
});
 
// --- main.js ---
const { ipcMain, dialog } = require('electron');
 
// invoke ハンドラ（Promise ベース）
ipcMain.handle('dialog:openFile', async (event) => {
  const result = await dialog.showOpenDialog({
    properties: ['openFile'],
    filters: [
      { name: 'テキスト', extensions: ['txt', 'md'] },
      { name: '全ファイル', extensions: ['*'] },
    ],
  });
 
  if (!result.canceled) {
    const content = await fs.readFile(result.filePaths[0], 'utf-8');
    return { path: result.filePaths[0], content };
  }
  return null;
});
 
ipcMain.handle('file:save', async (event, data) => {
  const result = await dialog.showSaveDialog({
    defaultPath: 'untitled.txt',
  });
 
  if (!result.canceled) {
    await fs.writeFile(result.filePath, data, 'utf-8');
    return { success: true, path: result.filePath };
  }
  return { success: false };
});
 
// --- renderer.js ---
// preload で公開された API を使用
async function handleOpenFile() {
  const result = await window.electronAPI.openFile();
  if (result) {
    editor.setValue(result.content);
    setCurrentPath(result.path);
  }
}

// Tauri IPC パターン
 
// --- src-tauri/src/main.rs ---
use tauri::Manager;
use serde::{Deserialize, Serialize};
 
#[derive(Serialize, Deserialize)]
struct FileResult {
    path: String,
    content: String,
}
 
// コマンドハンドラ
#[tauri::command]
async fn open_file(app: tauri::AppHandle) -> Result<Option<FileResult>, String> {
    use tauri_plugin_dialog::DialogExt;
 
    let file_path = app.dialog()
        .file()
        .add_filter("テキスト", &["txt", "md"])
        .blocking_pick_file();
 
    match file_path {
        Some(path) => {
            let content = std::fs::read_to_string(&path.path)
                .map_err(|e| e.to_string())?;
            Ok(Some(FileResult {
                path: path.path.to_string_lossy().to_string(),
                content,
            }))
        }
        None => Ok(None),
    }
}
 
#[tauri::command]
async fn save_file(path: String, content: String) -> Result<bool, String> {
    std::fs::write(&path, &content).map_err(|e| e.to_string())?;
    Ok(true)
}
 
// イベント発行（バックエンド → フロントエンド）
fn emit_progress(app: &tauri::AppHandle, progress: f64) {
    app.emit("progress", progress).unwrap();
}
 
fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![open_file, save_file])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// Tauri フロントエンド側
import { invoke } from '@tauri-apps/api/core';
import { listen } from '@tauri-apps/api/event';
 
// コマンド呼び出し
async function handleOpenFile() {
  const result = await invoke<{ path: string; content: string } | null>('open_file');
  if (result) {
    editor.setValue(result.content);
    setCurrentPath(result.path);
  }
}
 
// イベントリスナー
const unlisten = await listen<number>('progress', (event) => {
  updateProgressBar(event.payload);
});
 
// クリーンアップ
onDestroy(() => {
  unlisten();
});

# Electron 開発環境のセットアップ
 
# 前提条件
node --version  # v20.0.0 以上
 
# プロジェクト作成（electron-forge 推奨）
npm init electron-app@latest my-electron-app -- \
  --template=vite-typescript
 
cd my-electron-app
 
# 基本的な依存関係
npm install electron-store     # データ永続化
npm install electron-updater   # 自動更新
npm install electron-log       # ログ管理
 
# 開発用依存関係
npm install -D @electron/rebuild  # ネイティブモジュール再ビルド
npm install -D electron-devtools-installer  # DevTools
 
# プロジェクト構造
# my-electron-app/
# ├── src/
# │   ├── main/           # メインプロセス
# │   │   ├── index.ts    # エントリポイント
# │   │   └── preload.ts  # preload スクリプト
# │   ├── renderer/       # レンダラープロセス
# │   │   ├── index.html
# │   │   ├── App.tsx     # React コンポーネント
# │   │   └── main.tsx    # レンダラーエントリ
# │   └── shared/         # 共有型定義
# │       └── types.ts
# ├── forge.config.ts     # Electron Forge 設定
# ├── vite.main.config.ts
# ├── vite.renderer.config.ts
# ├── tsconfig.json
# └── package.json
 
# 開発サーバー起動
npm start
 
# ビルド
npm run make

# Tauri v2 開発環境のセットアップ
 
# 前提条件
# Rust のインストール
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
rustc --version  # 1.77.0 以上
 
# Node.js
node --version  # v20.0.0 以上
 
# OS 別の追加依存関係
# Windows:
#   → Visual Studio Build Tools 2022
#   → WebView2 Runtime（Windows 10+ にはプリインストール）
#
# macOS:
#   → Xcode Command Line Tools: xcode-select --install
#
# Linux (Ubuntu/Debian):
#   sudo apt install libwebkit2gtk-4.1-dev build-essential \
#     curl wget file libxdo-dev libssl-dev \
#     libayatana-appindicator3-dev librsvg2-dev
 
# プロジェクト作成
npm create tauri-app@latest my-tauri-app
cd my-tauri-app
 
# フロントエンドフレームワーク選択時の推奨:
#   → React + TypeScript + Vite
#   → SvelteKit
#   → Vue + Vite
 
# プロジェクト構造
# my-tauri-app/
# ├── src/                    # フロントエンド
# │   ├── App.tsx
# │   ├── main.tsx
# │   └── styles.css
# ├── src-tauri/              # Rust バックエンド
# │   ├── src/
# │   │   ├── main.rs         # エントリポイント
# │   │   ├── commands.rs     # コマンドハンドラ
# │   │   └── lib.rs
# │   ├── Cargo.toml          # Rust 依存関係
# │   ├── tauri.conf.json     # Tauri 設定
# │   ├── capabilities/       # 権限設定
# │   └── icons/              # アプリアイコン
# ├── package.json
# ├── tsconfig.json
# └── vite.config.ts
 
# 開発サーバー起動
npm run tauri dev
 
# ビルド
npm run tauri build

# WinUI 3 開発環境のセットアップ（Windows のみ）
 
# 前提条件
# Visual Studio 2022 のインストール
# ワークロード: .NET デスクトップ開発 + Windows アプリ開発
# 個別コンポーネント: Windows App SDK
 
# .NET SDK
dotnet --version  # 8.0 以上
 
# プロジェクト作成
dotnet new winui3 -n MyWinUIApp
cd MyWinUIApp
 
# NuGet パッケージの追加
dotnet add package CommunityToolkit.Mvvm        # MVVM ツールキット
dotnet add package CommunityToolkit.WinUI       # UI コンポーネント
dotnet add package Microsoft.Extensions.DependencyInjection  # DI
 
# プロジェクト構造
# MyWinUIApp/
# ├── App.xaml             # アプリケーション定義
# ├── App.xaml.cs          # アプリケーション起動ロジック
# ├── MainWindow.xaml      # メインウィンドウ
# ├── MainWindow.xaml.cs   # コードビハインド
# ├── ViewModels/          # ViewModel 層
# │   └── MainViewModel.cs
# ├── Views/               # View 層
# │   └── SettingsPage.xaml
# ├── Models/              # Model 層
# │   └── AppSettings.cs
# ├── Services/            # サービス層
# │   └── NavigationService.cs
# ├── Helpers/             # ユーティリティ
# ├── Assets/              # 画像・アイコン
# ├── Strings/             # ローカライゼーション
# ├── Package.appxmanifest # パッケージマニフェスト
# └── MyWinUIApp.csproj    # プロジェクトファイル
 
# ビルド・実行
dotnet build
dotnet run

// Electron のライフサイクル管理
import { app, BrowserWindow } from 'electron';
 
// 単一インスタンスの保証
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
  app.quit();
} else {
  app.on('second-instance', (event, commandLine, workingDirectory) => {
    // 2つ目のインスタンスが起動された場合、最初のウィンドウにフォーカス
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore();
      mainWindow.focus();
    }
  });
}
 
// アプリの準備完了
app.whenReady().then(async () => {
  // 設定の読み込み
  await loadSettings();
 
  // メインウィンドウ作成
  createMainWindow();
 
  // 自動更新チェック
  checkForUpdates();
 
  // macOS: ドックアイコンクリックでウィンドウ再作成
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createMainWindow();
    }
  });
});
 
// すべてのウィンドウが閉じられた時
app.on('window-all-closed', () => {
  // macOS 以外はアプリを終了
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
 
// 終了前の処理
app.on('before-quit', async (event) => {
  event.preventDefault();
 
  // 未保存データの確認
  const hasUnsaved = await checkUnsavedChanges();
  if (hasUnsaved) {
    const result = await dialog.showMessageBox({
      type: 'question',
      buttons: ['保存して終了', '保存せず終了', 'キャンセル'],
      message: '未保存の変更があります。',
    });
 
    if (result.response === 2) return; // キャンセル
    if (result.response === 0) await saveAll(); // 保存
  }
 
  // クリーンアップ
  await cleanup();
  app.exit(0);
});
 
// クラッシュレポート
app.on('render-process-gone', (event, webContents, details) => {
  console.error('Renderer process gone:', details.reason);
  // クラッシュレポートの送信
  reportCrash(details);
});

// WinUI 3 のライフサイクル管理
// App.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.Windows.AppLifecycle;
using Windows.ApplicationModel.Activation;
 
public partial class App : Application
{
    private Window? _mainWindow;
 
    public App()
    {
        InitializeComponent();
 
        // 未処理の例外ハンドラ
        UnhandledException += OnUnhandledException;
    }
 
    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        // 単一インスタンスの保証
        var mainInstance = AppInstance.FindOrRegisterForKey("main");
        if (!mainInstance.IsCurrent)
        {
            // 既存インスタンスにリダイレクト
            var activatedArgs = AppInstance.GetCurrent().GetActivatedEventArgs();
            mainInstance.RedirectActivationToAsync(activatedArgs).AsTask().Wait();
            System.Diagnostics.Process.GetCurrentProcess().Kill();
            return;
        }
 
        // アクティベーション処理の登録
        mainInstance.Activated += OnActivated;
 
        // DI コンテナの構築
        ConfigureServices();
 
        // メインウィンドウの作成
        _mainWindow = new MainWindow();
        _mainWindow.Activate();
 
        // ウィンドウ閉じる時の処理
        _mainWindow.Closed += async (sender, e) =>
        {
            // 未保存データの確認
            if (await HasUnsavedChangesAsync())
            {
                e.Handled = true; // 閉じるのをキャンセル
                await PromptSaveAsync();
            }
        };
    }
 
    private void OnActivated(object? sender, AppActivationArguments args)
    {
        // アプリがアクティベートされた時（ファイルの関連付け等）
        _mainWindow?.DispatcherQueue.TryEnqueue(() =>
        {
            (_mainWindow as MainWindow)?.BringToFront();
        });
    }
 
    private void OnUnhandledException(object sender,
        Microsoft.UI.Xaml.UnhandledExceptionEventArgs e)
    {
        // クラッシュレポート
        LogError(e.Exception);
        e.Handled = true;
    }
}

// Electron でのデータ永続化
 
// electron-store を使用した設定管理
import Store from 'electron-store';
 
interface AppSettings {
  theme: 'light' | 'dark' | 'system';
  language: string;
  windowBounds: {
    x: number;
    y: number;
    width: number;
    height: number;
  };
  recentFiles: string[];
  autoSave: boolean;
  autoSaveInterval: number; // 秒
}
 
const store = new Store<AppSettings>({
  defaults: {
    theme: 'system',
    language: 'ja',
    windowBounds: { x: 100, y: 100, width: 1200, height: 800 },
    recentFiles: [],
    autoSave: true,
    autoSaveInterval: 300,
  },
  // 暗号化が必要な場合
  encryptionKey: 'your-encryption-key',
  // スキーマバリデーション
  schema: {
    theme: { type: 'string', enum: ['light', 'dark', 'system'] },
    language: { type: 'string' },
    autoSaveInterval: { type: 'number', minimum: 30, maximum: 3600 },
  },
});
 
// 使用例
store.set('theme', 'dark');
const theme = store.get('theme');
 
// ウィンドウ位置の保存と復元
function saveWindowBounds(win: BrowserWindow) {
  const bounds = win.getBounds();
  store.set('windowBounds', bounds);
}
 
function restoreWindowBounds(): Electron.Rectangle {
  return store.get('windowBounds');
}
 
// 最近使ったファイルの管理
function addRecentFile(filePath: string) {
  const recent = store.get('recentFiles');
  const updated = [filePath, ...recent.filter(f => f !== filePath)].slice(0, 10);
  store.set('recentFiles', updated);
 
  // OS のジャンプリスト / 最近使った項目にも追加
  app.addRecentDocument(filePath);
}
 
// 認証情報の安全な保存（safeStorage）
import { safeStorage } from 'electron';
 
function saveCredential(key: string, value: string) {
  if (safeStorage.isEncryptionAvailable()) {
    const encrypted = safeStorage.encryptString(value);
    store.set(`credentials.${key}`, encrypted.toString('base64'));
  }
}
 
function loadCredential(key: string): string | null {
  const encrypted = store.get(`credentials.${key}`) as string | undefined;
  if (encrypted && safeStorage.isEncryptionAvailable()) {
    const buffer = Buffer.from(encrypted, 'base64');
    return safeStorage.decryptString(buffer);
  }
  return null;
}

// Tauri でのデータ永続化
 
// Cargo.toml
// [dependencies]
// tauri-plugin-store = "2"
// serde = { version = "1", features = ["derive"] }
// serde_json = "1"
 
use serde::{Deserialize, Serialize};
use tauri_plugin_store::StoreExt;
 
#[derive(Serialize, Deserialize, Clone)]
struct AppSettings {
    theme: String,
    language: String,
    auto_save: bool,
    auto_save_interval: u32,
    recent_files: Vec<String>,
}
 
impl Default for AppSettings {
    fn default() -> Self {
        Self {
            theme: "system".to_string(),
            language: "ja".to_string(),
            auto_save: true,
            auto_save_interval: 300,
            recent_files: Vec::new(),
        }
    }
}
 
#[tauri::command]
fn save_settings(app: tauri::AppHandle, settings: AppSettings) -> Result<(), String> {
    let store = app.store("settings.json")
        .map_err(|e| e.to_string())?;
 
    store.set("theme", serde_json::to_value(&settings.theme).unwrap());
    store.set("language", serde_json::to_value(&settings.language).unwrap());
    store.set("auto_save", serde_json::to_value(&settings.auto_save).unwrap());
    store.set("recent_files", serde_json::to_value(&settings.recent_files).unwrap());
 
    store.save().map_err(|e| e.to_string())
}
 
#[tauri::command]
fn load_settings(app: tauri::AppHandle) -> Result<AppSettings, String> {
    let store = app.store("settings.json")
        .map_err(|e| e.to_string())?;
 
    let theme = store.get("theme")
        .and_then(|v| serde_json::from_value(v).ok())
        .unwrap_or_else(|| "system".to_string());
 
    Ok(AppSettings {
        theme,
        ..Default::default()
    })
}

// Electron E2E テスト（Playwright）
import { test, expect, _electron as electron } from '@playwright/test';
 
test.describe('メインウィンドウ', () => {
  let electronApp: any;
  let page: any;
 
  test.beforeAll(async () => {
    electronApp = await electron.launch({
      args: ['.'],
      env: {
        ...process.env,
        NODE_ENV: 'test',
      },
    });
    page = await electronApp.firstWindow();
    await page.waitForLoadState('domcontentloaded');
  });
 
  test.afterAll(async () => {
    await electronApp.close();
  });
 
  test('アプリが正常に起動する', async () => {
    const title = await page.title();
    expect(title).toBe('My Electron App');
  });
 
  test('ファイルを開くダイアログが表示される', async () => {
    await page.click('[data-testid="open-file-btn"]');
    // ダイアログの処理をモック
    const isDialogShown = await electronApp.evaluate(({ dialog }: any) => {
      return dialog.showOpenDialog !== undefined;
    });
    expect(isDialogShown).toBe(true);
  });
 
  test('テーマの切り替えが動作する', async () => {
    await page.click('[data-testid="theme-toggle"]');
    const isDarkMode = await page.evaluate(() => {
      return document.documentElement.classList.contains('dark');
    });
    expect(isDarkMode).toBe(true);
  });
});