配布用に Electron アプリをパッケージ化する

このガイドでは、Windows API を使用して Electron アプリを配布するための MSIX パッケージを作成する方法について説明します。

[前提条件]

パッケージ化する前に、次の作業が完了していることを確認します。

• 開発環境のセットアップが完了しました
• [省略可能]アドオンを作成してテストしました ( Phi Silica アドオン や WinML アドオンなど)
• でアプリが正しく実行されていることを確認しました npm start

パッケージ化の準備

最終的なビルドから一時ファイルを除外するように Electron Forge を構成します。 ignoreのpackagerConfigにforge.config.js配列を追加します。

module.exports = {
  packagerConfig: {
    asar: true,
    ignore: [
      /^\/\.winapp($|\/)/,     // SDK packages and headers
      /^\/winapp\.yaml$/,       // SDK config
      /\.pfx$/,                 // Certificate files
      /\.pdb$/,                 // Debug symbols
      /\/obj($|\/)/,            // C# build artifacts
      /\/bin($|\/)/,            // C# build artifacts
      /\.msix$/                 // MSIX packages
    ]
  },
  // ... rest of your config
};

開発証明書を生成する

署名された MSIX パッケージを作成する前に、開発証明書を生成します。

npx winapp cert generate

これにより、MSIX パッケージの署名に使用される devcert.pfx ファイルがプロジェクト ルートに作成されます。

パッケージ 化オプション

Electron アプリの MSIX パッケージを作成するには、次の 2 つのオプションがあります。

1. オプション 1: winapp CLI を直接使用する - より構成可能で、任意のパッケージャーで動作する
2. オプション 2: Electron Forge MSIX Maker を使用する - フォージ ワークフローに統合

ワークフローに最適なオプションを選択します。

オプション 1: winapp CLI を直接使用する (柔軟性を高めるために推奨)

このアプローチにより、パッケージ化プロセスをより細かく制御でき、任意の Electron パッケージャーで動作します。

Electron アプリをビルドする

MSIX を使用して Electron アプリをパッケージ化するには、まず運用レイアウトを作成する必要があります。 Electron Forge では、package コマンドを使用できます。

# Package with Electron Forge (or your preferred packager)
npx electron-forge package

これにより、 ./out/ フォルダーにアプリの実稼働バージョンが作成されます。 正確なフォルダー名は、アプリ名とアーキテクチャ (たとえば、 my-windows-app-win32-x64) によって異なります。

MSIX パッケージを作成する

次に、winapp CLI を使用して、パッケージ化されたアプリから MSIX パッケージを作成して署名します。

npx winapp pack .\out\<your-app-folder> --output .\out --cert .\devcert.pfx --manifest .\Package.appxmanifest

<your-app-folder>を、Electron Forge によって作成された実際のフォルダー名に置き換えます (例: x64 の場合はmy-windows-app-win32-x64、ARM64 の場合はmy-windows-app-win32-arm64)。

--manifest オプションは省略可能です。 指定しない場合は、パッケージ化されているフォルダーまたは現在のディレクトリ内の Package.appxmanifest が検索されます。

--cert オプションも省略可能です。 指定しない場合、msix は署名されません。

--output オプションも省略可能です。 指定しない場合は、現在のディレクトリが使用されます。

MSIX パッケージは、 ./out/<your-app-name>.msixとして作成されます。

{
  "scripts": {
    "package-msix": "npm run build-csAddon && npx electron-forge package && npx winapp pack ./out/my-windows-app-win32-x64 --output ./out --cert ./devcert.pfx --manifest Package.appxmanifest"
  }
}

オプション 2: Electron Forge MSIX Maker を使用する (Forge ユーザー向け)

Electron Forge を既に使用している場合は、 @electron-forge/maker-msix メーカーを使用して MSIX パッケージを Forge ワークフローに直接統合できます。

MSIX Maker をインストールする

npm install --save-dev @electron-forge/maker-msix

forge.config.js の構成

MSIX Maker を forge.config.jsに追加します。

module.exports = {
  // ... other config
  makers: [
    {
      name: '@electron-forge/maker-msix',
      config: {
        appManifest: '.\\Package.appxmanifest',
        windowsSignOptions: {
          certificateFile: '.\\devcert.pfx',
          certificatePassword: 'password'
        }
      }
    }
  ],
  // ... rest of your config
};

Package.appxmanifest の更新

Electron Forge MSIX メーカーは、winapp CLI アプローチとは異なるフォルダー レイアウトを使用します。 MSIX の app\ フォルダー内にアプリを配置します。 このフォルダーは、パッケージ化中に自動的に作成されます。自分で作成する必要はありません。 Executable フォルダーを指すように、Package.appxmanifest内のapp パスを更新します。

<Applications>
  <Application Id="myApp"
    Executable="app\my-app.exe"
    EntryPoint="Windows.FullTrustApplication">
    <!-- ... rest of your application config -->
  </Application>
</Applications>

my-app.exeを実際の実行可能ファイル名に置き換えます。 これは、productNameのname (またはpackage.json) フィールドに基づいています。

MSIX パッケージを作成する

MSIX パッケージを作成できるようになりました。 --targets フラグを使用して MSIX メーカーのみを実行します。そうでない場合は、Forge で構成されているすべてのメーカーが実行されます。

npx electron-forge make --targets @electron-forge/maker-msix

MSIX パッケージは、 ./out/make/msix/<arch>/ フォルダー ( ./out/make/msix/arm64/ や ./out/make/msix/x64/など) に作成されます。

MSIX のインストールとテスト

まず、開発証明書 (1 回限りのセットアップ) をインストールします。

# Run as Administrator:
npx winapp cert install .\devcert.pfx

次に、MSIX パッケージをインストールします。 msix ファイルをダブルクリックするか、次のコマンドを実行します。

# Option 1 output:
Add-AppxPackage .\out\<your-app-name>.msix

# Option 2 output:
Add-AppxPackage .\out\make\msix\<arch>\<your-app-name>.msix

<your-app-name>と<arch>をビルド出力の実際の値に置き換えます。

アプリがスタート メニューに表示されます。 それを起動し、Windows API 機能をテストします。

配布オプション

動作する MSIX パッケージを作成したら、アプリを配布するためのいくつかのオプションがあります。

直接ダウンロード

直接ダウンロードするために、Web サイトで MSIX パッケージをホストします。 ユーザーがセキュリティ警告なしでインストールできるように、信頼された証明機関 (CA) のコード署名証明書で署名してください。

Microsoft Store

最も広いディストリビューションと自動更新のために、アプリをMicrosoft Storeに送信します。 次のことを行う必要があります。

1. Microsoft Partner Center アカウントを作成する
2. アプリ名を予約する
3. ストア ID で Package.appxmanifest を更新します。 msix に署名する必要はありません。ストア発行プロセスによって自動的に署名されます。
4. 認証に提出する

詳細情報: アプリを Microsoft Store

エンタープライズ配布

企業のお客様に直接配布するには、次の方法を使用します。

• ポータル サイト - Intune を使用している組織向け
• 直接ダウンロード - Web サイトで MSIX をホストする
• サイドローディング - PowerShell またはアプリ インストーラーを使用してインストールする

詳細情報: ストアの外部でアプリを配布する

アプリ インストーラー

自動更新用の .appinstaller ファイルを作成します。

<?xml version="1.0" encoding="utf-8"?>
<AppInstaller
    Uri="https://your-domain.com/packages/myapp.appinstaller"
    Version="1.0.0.0"
    xmlns="http://schemas.microsoft.com/appx/appinstaller/2017/2">
    <MainPackage
        Name="YourAppName"
        Version="1.0.0.0"
        Publisher="CN=YourPublisher"
        Uri="https://your-domain.com/packages/myapp.msix"
        ProcessorArchitecture="x64" />
    <UpdateSettings>
        <OnLaunch HoursBetweenUpdateChecks="24" />
    </UpdateSettings>
</AppInstaller>

詳細情報: アプリ インストーラー ファイルの概要

次のステップ

おめでとうございます! 配布用にWindows対応の Electron アプリが正常にパッケージ化されました。 🎉

その他のリソース

• winapp CLI のドキュメント - 完全な CLI リファレンス
• サンプル Electron アプリ - 完全な作業例
• MSIX パッケージ化に関するドキュメント - MSIX の詳細
• Windows アプリ Certification Kit - Store 申請前にアプリをテストする

概要に戻る

• 概要 - メイン ガイドに戻る
• 開発環境のセットアップ - セットアップ手順を確認する
• Phi シリカ アドオンの作成 - アドオンの作成を確認する
• WinML アドオンの作成 - WinML 統合について学習する

ヘルプを取得する

• バグが見つかりましたか?問題を提出する

配布を楽しんでください! 🚀