公開と更新

チュートリアルの流れ

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

学習目標

ここまでのチュートリアルで、ついにこちらが最後のステップです！ここではアプリを GitHub の Release に公開し、アプリのコードに自動更新を組み込みます。

update.electronjs.org の利用

Electron のメンテナにより、オープンソースアプリケーションの自動更新サービスが https://update.electronjs.org にて無償で提供されています。この必須要件は以下のとおりです。

アプリが macOS または Windows で動作する
アプリに GitHub の公開リポジトリがある
ビルドが GitHub の Releases で公開されている
ビルドがコード署名されている (macOS のみ)

ここでは、既に全コードを GitHub の公開リポジトリにプッシュしているものとします。

代替の更新サービス

別のリポジトリホスト (GitLab や Bitbucket など) をご利用の方や、コードリポジトリを非公開にする必要がある場合は、各自の Electron 更新サーバーをホストする方法についての段階的なガイドをご参照ください。

GitHub Release を公開する

Electron Forge には Publisher プラグインがあり、パッケージ化したアプリケーションを様々なソースへと自動配信できます。このチュートリアルでは、GitHub Publisher を利用して、コードを GitHub の Release に公開します。

個人アクセストークンを作成する

Forge は GitHub 上のどのリポジトリにも権限無しには公開できません。 Forge が GitHub の Release にアクセスできるように、認可トークンを渡す必要があります。最も簡単な方法は、public_repo スコープで新しいパーソナルアクセストークン (PAT) を作成し、公開リポジトリへの書き込み権限を付与することです。 このトークンは必ず秘匿しておいてください。

GitHub Publisher のセットアップ

モジュールのインストール

Forge の GitHub Publisher はプラグインであり、プロジェクトの devDependencies にインストールする必要があります。

npm
Yarn

npm install --save-dev @electron-forge/publisher-github

yarn add --dev @electron-forge/publisher-github

Forge の公開システムの設定

インストールしたら、Forge の設定でセットアップする必要があります。オプションの完全なリストは、Forge の PublisherGitHubConfig API ドキュメントに記載されています。

forge.config.js
module.exports = {
  publishers: [
    {
      name: '@electron-forge/publisher-github',
      config: {
        repository: {
          owner: 'github-user-name',
          name: 'github-repo-name'
        },
        prerelease: false,
        draft: true
      }
    }
  ]
}

公開前に Release のドラフトを作成する

注意として、ここでは Release をドラフトとして作成するように Forge を設定しました。これにより、実際にエンドユーザに公開することなく、生成された成果物を含むリリースを確認できます。リリースノートを書き、頒布形式が動作することを再確認した後、手動で GitHub から Release を公開できます。

認証トークンの設定

Publisher に認証トークンを認識させる必要もあります。デフォルトでは、環境変数 GITHUB_TOKEN に格納されている値を使用します。

公開コマンドの実行

Forge の publish コマンドを npm スクリプトに追加します。

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

このコマンドは、設定したメーカーを実行し、出力された頒布形式を新しい GitHub の Release へ公開します。

npm
Yarn

npm run publish

yarn run publish

デフォルトでは、ホスト OS とアーキテクチャに対応した頒布形式 1 つのみが公開されます。 Forge コマンドに --arch フラグを渡すことで、他アーキテクチャ用にも公開できます。

このリリース名は、プロジェクトの package.json ファイルの version フィールドに対応しています。

Release のタグ付け

任意で、リリースがコードの履歴のラベル付けした時点と関連付くように、Git でリリースのタグを付けることもできます。 npm には便利な npm version コマンドがあり、バージョン更新やタグ付けができます。

おまけ: GitHub Actions で公開する

ローカルで公開することは苦痛です。特に、これではホストオペレーティングシステム用の頒布形式しか作成できません (つまり、macOS から Windows の .exe ファイルを公開できません)。

これは、GitHub Actions のような自動化ワークフローでアプリを公開することで解決できます。ワークフローは、クラウド上の Ubuntu、macOS、Windows でタスクを実行できます。これは、Electron Fiddle が採っているアプローチとまったく同じです。詳細については、Fiddle のビルドとリリースのパイプラインと Forge の構成をご参照ください。

アップデータコードの設置

GitHub の Release を使ったリリースシステムができたので、次は新しいリリースが出たときにアップデートをダウンロードするよう Electron アプリに指示します。 Electron アプリは autoUpdater モジュールによってこれを行い、アップデートサーバーのフィードから新バージョンがダウンロード可能であるかどうかを確認できます。

update.electronjs.org サービスは、アップデータ互換のフィードを提供します。例えば、Electron Fiddle v0.28.0 は https://update.electronjs.org/electron/fiddle/darwin/v0.28.0 のエンドポイントをチェックし、より新しい GitHub リリースが利用可能かどうか確認します。

GitHub にリリースが公開されると、update.electronjs.org サービスがあなたのアプリケーションのために動作します。あとは autoUpdater モジュールでフィードを設定するのみです。

このプロセスを簡単にするために、Electron チームは update-electron-app モジュールを保守しています。これは、1 つの関数呼び出しで update.electronjs.org の autoUpdater のテンプレートをセットアップするもので、設定は不要です。このモジュールは、プロジェクトの package.json の "repository" フィールドと同じ update.electronjs.org のフィードを検索します。

まず、このモジュールを実行時の依存関係としてインストールします。

npm
Yarn

npm install update-electron-app

yarn add update-electron-app

次に、このモジュールをインポートしてメインプロセスですぐに呼び出します。

main.js
require('update-electron-app')()

これで全て完了です！パッケージされたアプリケーションは、新しい GitHub の Release が公開される毎に自身を更新します。

概要

このチュートリアルでは、Electron Forge の GitHub Publisher を設定し、アプリの頒布形式を GitHub の Release にアップロードする方法を説明しました。プラットフォーム間では常に頒布形式を生成することはできないため、そういったマシンを利用できない場合は、継続的インテグレーションのパイプラインでビルドと公開のフローを設定することを推奨します。

Electron アプリケーションは、autoUpdater モジュールにアップデートサーバーのフィードを指定することで、自己更新が可能です。 update.electronjs.org は、GitHub の Release で公開されているオープンソースアプリケーション向けに Electron が提供する無料のアップデートサーバーです。このサービスを利用するための Electron アプリの設定は、update-electron-app モジュールをインストールしインポートすることで簡単に行えます。

アプリケーションが update.electronjs.org の対象でない場合は、代わりに各自のアップデートサーバーを導入し、autoUpdater モジュールを自分で構成する必要があります。

🌟 これで完了です！

ここまでで、Electron のチュートリアルは正式に終了しました。他のドキュメントも自由に探して、開発を楽しんでください！質問がある方は、コミュニティの Discord サーバーをお訪ねください。

学習目標​

update.electronjs.org の利用​

GitHub Release を公開する​

個人アクセストークンを作成する​

GitHub Publisher のセットアップ​

モジュールのインストール​

Forge の公開システムの設定​

認証トークンの設定​

公開コマンドの実行​

おまけ: GitHub Actions で公開する​

アップデータコードの設置​

概要​