0Pricing
React Academy · レッスン

デスクトップ向けのパッケージ化と配布

electron-builder を使い、コード署名と自動更新に対応した macOS、Windows、Linux 向けインストーラーを作成します。

「デスクトップ向けのパッケージ化と配布」はCoddyKit上の無料React Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

electron-builderの設定

electron-builderは、Electronアプリを配布可能なインストーラーにパッケージ化する標準ツールです。設定はpackage.jsonの「build」キーの下に記述し、アプリのメタデータ(appId、productName)、アイコンのパス、プラットフォームごとのターゲット形式を指定します。

プラットフォーム別のビルドターゲット

electron-builderは、macOS(dmgとzip)、Windows(nsisインストーラー)、Linux(AppImageとdeb)をサポートしています。1つのビルドコマンドで複数のプラットフォームを対象にすることも、互換性を最も高めるために、各プラットフォームのネイティブランナーでビルドするようCIを設定することもできます。

macOSのコード署名

macOSでは、Gatekeeperがセキュリティ警告なしでアプリを開けるようにするため、Apple Developer証明書によるコード署名が必要です。electron-builderはビルド中にmacOS Keychainから証明書を読み込み、すべてのバイナリに自動的に署名します。

macOSの公証

最新のmacOSでは、コード署名に加えて公証も必要です。これはアプリをAppleの公証サービスに提出し、マルウェアのスキャンを受けてチケットを発行してもらう仕組みです。electron-builderはelectron-notarizeを通じて公証を自動化でき、macOS 10.15以降のユーザーは、公証なしではアプリの実行をブロックされます。

Windowsのコード署名

WindowsでSmartScreenにインストーラーを信頼させるには、信頼された認証局(CA)が発行したAuthenticode証明書が必要です。署名がない場合、ユーザーには「Windows protected your PC」という警告が表示されます。Extended Validation(EV)証明書なら警告がすぐに表示されなくなり、標準のOV証明書は時間をかけて信頼を築きます。

ビルド出力の構成

ビルドが成功すると、electron-builderはプラットフォーム固有のインストーラーをdist/ディレクトリに書き出します。macOS用のDMGまたはzip、Windows用のNSIS .exe、Linux用のAppImageまたは.debに加えて、自動更新マニフェストのlatest.yml(またはlatest-mac.yml)も生成されます。

アプリアイコン

Electronアプリでは、プラットフォーム固有の形式のアイコンが必要です。Linuxでは512x512のPNG、macOSではICNSファイル(複数解像度)、WindowsではICOファイル(複数解像度)を使用します。electron-builderでは、--iconフラグを使って1つの1024x1024 PNGからすべての形式を生成できます。

electron-updaterによる自動更新

electron-updaterパッケージはelectron-builderと連携し、自動更新を提供します。ビルドをGitHub ReleasesまたはS3に公開すると、electron-updaterが起動時に更新を確認し、バックグラウンドで差分アップデートをダウンロードして、ユーザーに再起動を促せるようになります。

起動時の更新確認

アプリの準備が完了した後、main.jsでautoUpdater.checkForUpdatesAndNotify()を呼び出してください。electron-updaterは公開先から最新のlatest.ymlマニフェストを取得してバージョンを比較し、更新が利用可能であればダウンロードします。インストールの準備が整うと、ネイティブ通知を表示します。

ASARアーカイブ

electron-builderは、配布のためにアプリケーションのJavaScriptファイルを1つのASARアーカイブ(tarファイルに似たもの)にまとめます。これによりファイルシステムの検索回数が減り、起動パフォーマンスが向上します。また、ソースコードを直接調べることが難しくなります(不可能になるわけではありません)。

ASARからのネイティブモジュールの展開

ネイティブNode.jsモジュール(.nodeファイル)はASARアーカイブ内から読み込めないため、ファイルシステムに展開する必要があります。electron-builderでasarUnpackを設定してネイティブモジュールのパターンを指定すると、アーカイブと同じ場所にあるapp.asar.unpackedディレクトリへ配置されます。

macOSの公証要件

macOSで配布する場合、コード署名だけでなく公証も必要なのはなぜでしょうか。

レッスンのまとめ

Electronアプリの配布では、electron-builderのターゲットを設定し、macOS(公証を含む)とWindows(Authenticode)の両方でコードに署名し、必要に応じてelectron-updaterによる自動更新を設定します。ASARアーカイブはアプリを配布用にまとめ、ネイティブモジュールは別途展開します。堅牢なCI/CDパイプラインを構築すれば、これらの手順をプラットフォームごとに自動処理できます。

よくある質問

「デスクトップ向けのパッケージ化と配布」レッスンは無料ですか?

はい。「デスクトップ向けのパッケージ化と配布」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「デスクトップ向けのパッケージ化と配布」で何を学びますか?

electron-builder を使い、コード署名と自動更新に対応した macOS、Windows、Linux 向けインストーラーを作成します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「デスクトップ向けのパッケージ化と配布」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか?

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Electronのアーキテクチャ:メインプロセスとレンダラープロセス
  2. ElectronでReactをセットアップする
  3. プロセス間のIPC通信
  4. デスクトップ向けのパッケージ化と配布
← React Academyに戻る