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

チュートリアルの流れ

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

学習目標

この章のチュートリアルでは、Electron Forge でアプリをパッケージ化して頒布するための基本を説明します。

Electron Forge を使用する

Electron は、パッケージ化や頒布のためのツールをコアモジュールにバンドルしていません。開発モードで Electron アプリが動作するようになったならば、ユーザに頒布できるパッケージ化したアプリ (頒布形式 とも呼ばれるもの) を作成するためにさらなるツールを使用する必要があります。頒布形式は、インストーラー (Windows の MSI など) やポータブルな実行ファイル (macOS の .app など) のどちらにもできます。

Electron Forge は、Electron アプリのパッケージ化と頒布を行うオールインワンのツールです。このツールは内部で、既存の多くの Electron ツール (@electron/packager、@electron/osx-sign、electron-winstaller など) を一つのインターフェースに統合しています。そのため、それらをまとめて繋げる方法について心配する必要はありません。

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

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

npm
Yarn

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

npm install --save-dev @electron-forge/cli
yarn dlx 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 ドキュメントをご参照ください。

また、devDependencies 内にさらにいくつかのパッケージがインストールされ、設定のオブジェクトをエクスポートしている forge.config.js ファイルが追加されていることに気づくでしょう。事前入力した設定には、ターゲットプラットフォームごとに複数のメーカー (頒布形式のアプリバンドルが生成されるパッケージ) が見えるはずです。

頒布形式を作成する

頒布形式を作成するには、プロジェクトの新しい make スクリプトを使用して、electron-forge make コマンドを実行します。

npm
Yarn

npm run make

yarn make

この make コマンドは以下 2 つのステップを含みます。

最初に electron-forge package を実行し、アプリのコードを Electron のバイナリと一緒にバンドルします。パッケージ化されたコードは、フォルダ内に生成されます。
そして、このパッケージ化されたアプリフォルダを利用して、メーカーの構成ごとに個別の頒布形式を作成します。

スクリプトの実行後、頒布形式とパッケージ化されたアプリケーションコードのフォルダの両方を含む out フォルダが見えるでしょう。

macOS output example
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 のアイコンのチュートリアルをご参照ください。

Electron Forge なしでのパッケージ化

If you want to manually package your code, or if you're just interested understanding the mechanics behind packaging an Electron app, check out the full Application Packaging documentation.

重要: コードに署名する

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

コード署名はセキュリティ技術のひとつで、デスクトップアプリの作成者が既知であることを証明するために使用します。 Windows や macOS は OS 固有のコード署名システムを備えており、ユーザが署名されていないアプリケーションをダウンロードしたり起動したりすることは困難でしょう。

macOS では、コード署名はアプリケーションのパッケージのレベルで行われます。 Windowsでは、配布形式のインストーラーが代わりに署名されています。 Windows と macOS のコード署名の証明書を既にお持ちの方は、Forge の設定で証明書を設定できます。

info

コード署名の詳細については、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 にインポートする

頒布形式を作成する

重要: コードに署名する

概要