次の方法で共有

Windows API 開発用の Electron の設定

このガイドでは、Windows API 開発用に Electron 開発環境を設定する手順について説明します。 必要なツールをインストールし、projectを初期化して、Windows SDK を構成します。

このガイドを最後まで進めると、Electron アプリを完成させることができます。

  • 最新の Windows API を呼び出す (Windows SDK とWindows App SDK)
  • AI 機能 (Phi Silica または WinML) でネイティブ アドオンを使用できます
  • 保護された API をテストするためのアプリ ID を使用して実行する
  • 配布用の署名付き MSIX としてパッケージ化できます

[前提条件]

  • Windows 11 (Phi Silica を使用している場合は Copilot+ PC)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio のネイティブ デスクトップ ワークロード - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

手順 1: 新しい Electron アプリを作成する

Electron Forge を使用して新しい Electron アプリから始めます。 既存のアプリがある場合は、この手順をスキップします。

npm create electron-app@latest my-windows-app
cd my-windows-app

アプリの実行を確認します。

npm start

手順 2: winapp CLI をインストールする

npm install --save-dev @microsoft/winappcli

手順 3: Windows 開発用にprojectを初期化する

npx winapp init

プロンプトが表示されたら、次を実行します。

  • パッケージ名: Enter キーを押して既定値をそのまま使用します (my-windows-app)
  • Publisher名: Enter キーを押して既定値をそのまま使用するか、名前を入力します
  • バージョン: Enter キーを押して 1.0.0.0 を受け入れる
  • エントリ ポイント: Enter キーを押して既定値 (my-windows-app.exe) をそのまま使用します。
  • SDK のセットアップ: [安定した SDK] を選択する

winapp initは何をしますか?

このコマンドは、Windows 開発に必要なすべてのものを設定します。

  1. Windows SDK および Windows App SDK のヘッダーとライブラリを含む.winapp/ フォルダーを作成します
  2. appxmanifest.xmlを生成します- アプリ ID と MSIX パッケージ化に必要なアプリ マニフェスト
  3. Assets/ フォルダーを作成する - アプリ アイコンとビジュアルアセットが含まれています
  4. Creates winapp.yaml - SDK のバージョンとproject構成を追跡します
  5. Windows App SDK ランタイムのインストール - 最新の API に必要なランタイム コンポーネント
  6. Windows で開発者モードを有効にする - デバッグに必要

注

.winapp/ フォルダーは自動的に.gitignoreに追加されるため、ソース管理にチェックインしないでください。

手順 4: ビルド パイプラインに復元を追加する

postinstall スクリプトを package.json に追加して、他の開発者がprojectを複製するときに Windows SDK を使用できるようにします。

{
  "scripts": {
    "postinstall": "winapp restore && winapp node add-electron-debug-identity"
  }
}

このスクリプトは、 npm install 後に実行されます。

  1. winapp restore - すべての Windows SDK パッケージをダウンロードして復元する
  2. winapp node add-electron-debug-identity - Electron アプリをデバッグ ID に登録します

クロスプラットフォーム プロジェクトの場合は、 scripts/postinstall.jsを作成します。

if (process.platform === 'win32') {
  const { execSync } = require('child_process');
  try {
    execSync('npx winapp restore && npx winapp cert generate --if-exists skip && npx winapp node add-electron-debug-identity', {
      stdio: 'inherit'
    });
  } catch (error) {
    console.warn('Warning: Windows-specific setup failed.');
  }
} else {
  console.log('Skipping Windows-specific setup on non-Windows platform.');
}

次に、 package.jsonを更新します。

{
  "scripts": {
    "postinstall": "node scripts/postinstall.js"
  }
}

手順 5: デバッグ ID について

winapp node add-electron-debug-identity コマンドは、次のことを行います。

  1. appxmanifest.xmlを読み取り、アプリの詳細と機能を取得します
  2. node_modules内でelectron.exeを一時的な ID で登録します
  3. 完全な MSIX パッケージを作成せずに、ID が必要な API をテストできます

appxmanifest.xmlまたはリンクされたアセットを変更するたびに、次のコマンドを手動で実行します。

npx winapp node add-electron-debug-identity

セットアップをテストします。

npm start

注

Windowsで疎にパッケージ化したElectronアプリケーションに関連する既知のバグがあり、これによりクラッシュや空白のウィンドウが発生する可能性があります。 回避策として、 --no-sandbox を開始スクリプトに追加します: "start": "electron-forge start -- --no-sandbox"。 この問題は、MSIX パッケージ全体には影響しません。 デバッグ ID を元に戻すには、 npx winapp node clear-electron-debug-identityを実行します。

次のステップ

開発環境が設定されたので、ネイティブ アドオンを作成し、Windows API を呼び出します。

  • Last updated on