アプリケーションのパッケージ化

チュートリアルに従う

これはElectronチュートリアルのパート5です。

学習目標

チュートリアルのこのパートでは、Electron Forgeを使用してアプリをパッケージ化および配布する基本について説明します。

Electron Forgeの使用

Electronのコアモジュールには、パッケージ化と配布のためのツールはバンドルされていません。開発モードで動作するElectronアプリを作成したら、追加のツールを使用して、ユーザーに配布できるパッケージ化されたアプリ（配布可能ファイルとも呼ばれます）を作成する必要があります。配布可能ファイルは、インストーラー（例：Windowsの場合はMSI）またはポータブル実行ファイル（例：macOSの場合は.app）のいずれかになります。

Electron Forgeは、Electronアプリのパッケージ化と配布を処理するオールインワンツールです。内部的には、多くの既存のElectronツール（例：@electron/packager、@electron/osx-sign、electron-winstallerなど）を単一のインターフェースに統合しているため、それらをすべてまとめて配線する必要はありません。

プロジェクトをForgeにインポートする

プロジェクトのdevDependenciesにElectron ForgeのCLIをインストールし、便利な変換スクリプトを使用して既存のプロジェクトをインポートできます。

npm
Yarn

npm install --save-dev @electron-forge/cli
npx electron-forge import

yarn add --dev @electron-forge/cli
npx electron-forge import

変換スクリプトが完了すると、Forgeはpackage.jsonファイルにいくつかのスクリプトを追加しているはずです。

package.json
  //...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  //...

CLIドキュメント

makeおよびその他のForge APIの詳細については、Electron Forge CLIドキュメントをご覧ください。

また、package.jsonにdevDependenciesの下にいくつかパッケージがインストールされ、設定オブジェクトをエクスポートする新しいforge.config.jsファイルがあることに気付くはずです。事前設定された構成には、ターゲットプラットフォームごとに1つずつ、複数のメーカー（配布可能なアプリバンドルを生成するパッケージ）が表示されます。

配布可能ファイルの作成

配布可能ファイルを作成するには、プロジェクトの新しいmakeスクリプトを使用します。これは、electron-forge makeコマンドを実行します。

npm
Yarn

npm run make

yarn make

このmakeコマンドには、2つのステップが含まれています

最初に、内部でelectron-forge packageを実行します。これは、アプリのコードをElectronバイナリと一緒にバンドルします。パッケージ化されたコードはフォルダーに生成されます。
次に、このパッケージ化されたアプリフォルダーを使用して、設定されたメーカーごとに個別の配布可能ファイルを作成します。

スクリプトの実行後、配布可能ファイルとパッケージ化されたアプリケーションコードを含むフォルダーの両方を含むoutフォルダーが表示されます。

macOS出力例
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

out/makeフォルダーにある配布可能ファイルは、起動できる状態になっているはずです！これで、最初のバンドルされたElectronアプリケーションが作成されました。

配布可能ファイルの形式

Electron Forgeは、OS固有のさまざまな形式（例：DMG、deb、MSIなど）で配布可能ファイルを作成するように設定できます。Forgeのメーカードキュメントで、すべての設定オプションをご覧ください。

アプリケーションアイコンの作成と追加

カスタムアプリケーションアイコンを設定するには、設定にいくつか追加する必要があります。詳細については、Forgeのアイコントutorialをご覧ください。

Electron Forgeを使用しないパッケージ化

コードを手動でパッケージ化する場合、またはElectronアプリのパッケージ化の背後にあるメカニズムを理解することに興味がある場合は、アプリケーションのパッケージ化のドキュメント全体をご覧ください。

重要：コードの署名

デスクトップアプリケーションをエンドユーザーに配布するには、Electronアプリにコード署名することを強くお勧めします。コード署名は、デスクトップアプリケーションを出荷する上で重要な部分であり、チュートリアルの最後の部分にある自動更新ステップには必須です。

コード署名は、デスクトップアプリが既知のソースによって作成されたことを証明するために使用するセキュリティテクノロジーです。WindowsとmacOSには、独自のOS固有のコード署名システムがあり、署名されていないアプリケーションをユーザーがダウンロードまたは起動することを困難にします。

macOSでは、コード署名はアプリのパッケージ化レベルで行われます。Windowsでは、配布可能なインストーラーが代わりに署名されます。WindowsとmacOSのコード署名証明書が既にある場合は、Forge構成で資格情報を設定できます。

情報

コード署名の詳細については、ForgeドキュメントのmacOSアプリの署名ガイドをご覧ください。

macOS
Windows

forge.config.js
module.exports = {
  packagerConfig: {
    osxSign: {},
    // ...
    osxNotarize: {
      tool: 'notarytool',
      appleId: process.env.APPLE_ID,
      appleIdPassword: process.env.APPLE_PASSWORD,
      teamId: process.env.APPLE_TEAM_ID
    }
    // ...
  }
}

forge.config.js
module.exports = {
  // ...
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        certificateFile: './cert.pfx',
        certificatePassword: process.env.CERTIFICATE_PASSWORD
      }
    }
  ]
  // ...
}

まとめ

Electronアプリケーションは、ユーザーに配布するためにパッケージ化する必要があります。このチュートリアルでは、アプリをElectron Forgeにインポートし、アプリをパッケージ化してインストーラーを生成するように設定しました。

アプリケーションがユーザーのシステムから信頼されるようにするには、配布可能ファイルが本物であり、コード署名によって改ざんされていないことをデジタル的に証明する必要があります。コード署名証明書情報を使用するように設定すると、Forgeを介してアプリに署名できます。

学習目標​

Electron Forgeの使用​

プロジェクトをForgeにインポートする​

配布可能ファイルの作成​

重要：コードの署名​

まとめ​

学習目標

Electron Forgeの使用

プロジェクトをForgeにインポートする

配布可能ファイルの作成

重要：コードの署名

まとめ