LoginSignup
33
22

More than 1 year has passed since last update.

@allJokin(Tomoki Hirai)

【初心者向け】Electron Forgeでお手軽Electronアプリ開発（環境構築、Typescript+React導入、自動更新）

Last updated at Posted at 2021-09-20

はじめに

この記事ではelectron-forgeを使ってTypescript+Reactのelectronアプリを構築したいと思います。
開発環境の構築方法から作成したアプリの公開、自動更新までを紹介します。

electronとは

JavaScript, HTML, CSSで構築できるクロスプラットフォームなデスクトップアプリ開発のフレームワークです。
有名なElectron 製アプリとしては「Vistual Studio Code」や「Slack」などがあります。

　　

electron 開発環境

electron アプリをパッケージング（コードをアプリケーション化する）するツールとしては以下の二つが広く使われているようです。

electron-builderはパッケージツールでelectron-forgeはパッケージツール＋ボイラーテンプレートという認識で問題なさそうです。

electron-forgeはボイラーテンプレートがあるので、開発環境を簡単に構築できます。electron+Typescript+Reactなどで検索するとwebpack.config.jsやtsconfig.jsonをかなりいじる構築方法が出てきますが、electron-forgeを使うとそのあたりの面倒を見てくれます。

今回は、Typescript+Reactという構成で開発したいので、electron-forgeを使ってelectronアプリを構築します。

使用環境

  • Windows10 64 bit
  • electron 14.0.1
  • electron-forge 6.0.0-beta.57
  • yarn 1.22.5

Macを使用する場合は、自動更新にアプリ署名が必要です。

環境構築

electron-forgeを使ってelectornアプリの開発環境を構築します。
以下のelectron-forgeの公式ドキュメントを参考に（TypeScript + Webpack）の環境を構築します。

最初に以下のコードを実行します。（yarnがない場合はインストールするかnpmで実行してください。）

yarn create electron-app my-new-app --template=typescript-webpack

上記のコマンドを実行するとmy-new-appというフォルダが作成されるので以下のコマンドでフォルダの中に移動してアプリを起動します。

cd my-new-app
yarn start

以下のように表示されれば成功です。

electron-start.PNG

次に、Reactを導入します。
以下のドキュメントを参考にします。

必要なライブラリをインストールします。

yarn add react react-dom
yarn add --dev @types/react @types/react-dom

ライブラリをインストール後、tsconfig.json、src/app.tsx、src/renderer.tsを編集します。

tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "module": "commonjs",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "paths": {
      "*": ["node_modules/*"]
-   }
+   },
+   "jsx": "react"
  },
  "include": [
    "src/**/*"
  ]
}
src/app.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function render() {
  ReactDOM.render(<h2>Hello from React!</h2>, document.body);
}

render();
src/renderer.ts
// ファイルの末尾に追加
import './app';

yarn startを実行して以下のような画面が出れば成功です。
これでTypescript+Reactの開発環境が整いました！簡単ですね！

react.PNG

自動更新の設定

自動更新の導入は以下のドキュメントを参考にします。

今回はgithubのrelease機能を使って実装しようと思います。
他にもAWS S3や自前のサーバーで更新することも可能です。

自動更新のために必要な手順は以下のとおりです。

  1. githubの設定
  2. 自動更新のコードを追加
  3. githubで公開
  4. パッケージのアップデート

順番に説明していきます。

githubの設定

最初にgithubのリポジトリを作成してコードをpushしてください。
githubのリポジトリはprivateではなくpublicで作成する必要があります。

githubのユーザー名と作成したリポジトリ名は後で使用します。

次に、electron-forge publishコマンド（公開用のコマンド）を実行するために必要なgithubのアクセストークンを作成します。

githubアカウントの設定画面からDeveloper settingsを選択します。

setting.PNG

Personal acess tokensの画面でGenerate new tokenを選択します。

tokens.PNG

以下のような画面が表示されるので、Noteに任意の名前を入力し、write:packagesを選択してGenerate tokenをクリックします。

screencapture-github-settings-tokens-new-2021-09-19-23_35_26.png

トークンが作成されるので、赤枠で囲んだアイコンをクリックしてコピーしておいてください。
作成したトークンは公開時に使用します。

screencapture-github-settings-tokens-2021-09-19-23_35_44.png

以上でgithubの設定は完了です。
次は自動更新のコードを追加します。

自動更新のコードを追加

electronの自動更新にはいくつか方法がありますが、今回はelectron公式のauto-updaterを使います。

src/index.tsとsrc/app.tsxを以下のように変更します。
src/app.tsxはアップデート前とアップデート後がわかりやすいようにするために変更しています。

src/index.ts
import { app, BrowserWindow, autoUpdater, dialog } from 'electron';

// ファイルの末尾に追加
const server = 'https://update.electronjs.org'
const feed = `${server}/OWNER/REPO/${process.platform}-${process.arch}/${app.getVersion()}`

if (app.isPackaged) { // パッケージされている（ローカル実行ではない）
  autoUpdater.setFeedURL({
    url: feed,
  });
  autoUpdater.checkForUpdates(); // アップデートを確認する

  // アップデートのダウンロードが完了したとき
  autoUpdater.on("update-downloaded", async () => {
    const returnValue = await dialog.showMessageBox({
      message: "アップデートあり",
      detail: "再起動してインストールできます。",
      buttons: ["再起動", "後で"],
    });
    if (returnValue.response === 0) {
      autoUpdater.quitAndInstall();  // アプリを終了してインストール
    }
  });

  // アップデートがあるとき
  autoUpdater.on("update-available", () => {
    dialog.showMessageBox({
      message: "アップデートがあります",
      buttons: ["OK"],
    });
  });

  // アップデートがないとき
  autoUpdater.on("update-not-available", () => {
    dialog.showMessageBox({
      message: "アップデートはありません",
      buttons: ["OK"],
    });
  });

  // エラーが発生したとき
  autoUpdater.on("error", () => {
    dialog.showMessageBox({
      message: "アップデートエラーが起きました",
      buttons: ["OK"],
    });
  });
}
src/app.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";

function render() {
  ReactDOM.render(
    <div>
      <h1>v1.0.0</h1>
      <h2>Hello from React!</h2>
    </div>,
    document.body
  );
}

render();

src/index.tsのfeedのURLはアップデート確認のために接続しに行くためのURLを記載します。
OWNERはgithubのユーザー名、REPOはgithubのリポジトリ名に変更してください。

https://update.electronjs.orgというのはelectronが公式で提供している自動更新のためのサーバです。
以下の条件を満たす場合に使用できます。

  • macOSまたはWindowsで動作するアプリである。
  • アプリはGitHubのパブリックなリポジトリである。
  • ビルド成果物は、GitHub Releases で提供する。
  • ビルド成果物はコード署名されている。（macOS）

https://update.electronjs.orgのgithubリポジトリは以下のURLです。

以上で、自動更新のためのコードは追加できたので、次は作成したアプリを公開します。

githubで公開

公開するためのelectron-forgeの設定とgithubへの公開方法です。

electron-forgeの設定はデフォルトではpackage.jsonに記載されていますが、ファイルを分けたほうが管理しやすいので、forge.config.jsに移動します。

package.jsonのconfig を削除して、forgeの中身をforge.config.jsにコピーします。

package.json
{
  ...
- "config": {
-   "forge": {
-     ...
-   },
- },
  ...
}
forge.config.js
module.exports = {
  makers: [
    {
      name: "@electron-forge/maker-squirrel",
      config: {
        name: "electron_publish",
      },
    },
    {
      name: "@electron-forge/maker-zip",
      platforms: ["darwin"],
    },
    {
      name: "@electron-forge/maker-deb",
      config: {},
    },
    {
      name: "@electron-forge/maker-rpm",
      config: {},
    },
  ],
  plugins: [
    [
      "@electron-forge/plugin-webpack",
      {
        mainConfig: "./webpack.main.config.js",
        renderer: {
          config: "./webpack.renderer.config.js",
          entryPoints: [
            {
              html: "./src/index.html",
              js: "./src/renderer.ts",
              name: "main_window",
            },
          ],
        },
      },
    ],
  ],
};

次に、forge.config.jsに公開用の設定を追加します。

forge.config.js
module.exports = {
  makers: [
    {
      name: "@electron-forge/maker-squirrel",
      config: {
        name: "electron_publish",
      },
    },
    {
      name: "@electron-forge/maker-zip",
      platforms: ["darwin"],
    },
    {
      name: "@electron-forge/maker-deb",
      config: {},
    },
    {
      name: "@electron-forge/maker-rpm",
      config: {},
    },
  ],
  plugins: [
    [
      "@electron-forge/plugin-webpack",
      {
        mainConfig: "./webpack.main.config.js",
        renderer: {
          config: "./webpack.renderer.config.js",
          entryPoints: [
            {
              html: "./src/index.html",
              js: "./src/renderer.ts",
              name: "main_window",
            },
          ],
        },
      },
    ],
  ],
+ publishers: [
+   {
+     name: "@electron-forge/publisher-github",
+     platforms: ["win32"],
+     config: {
+       repository: {
+         owner: "OWNER",
+         name: "REPO",
+       },
+     },
+   },
+ ],
};

platformsはwindows用の設定です。macOSの場合はdarwin、linuxの場合はlinuxを指定してください。
OWNERにはgithubのユーザー名、REPOにはリポジトリ名を指定してください。

以上で設定は完了したので、以下のコマンドを実行してください。
コマンド実行時にはgithubのアクセストークンが必要なので、環境変数に設定します。

windowsの場合
$Env:GITHUB_TOKEN = "xxxx"
yarn electron-forge publish
windows以外
GITHUB_TOKEN=xxxx
yarn electron-forge publish

コマンドの実行が完了するとDraft状態のReleasesが作成されます。
githubのReleasesに移動します。

github.PNG

Releasesページに移動するとDraft状態のものが作成されているので、Publish releaseを選択してリリースします。

release.PNG

screencapture-github-allJokin-electron-publish-releases-edit-untagged-955fe7fdf69eea961214-2021-09-18-22_17_56.png

releaseが完了するとv1.0.0が追加されていると思います。
次は新しいバージョンをリリースしてアップデートします。

パッケージのアップデート

パッケージのアップデートはpackage.jsonのversionを更新してyarn electron-forge publishを実行するだけです。
アップデートできたことがわかりやすいようにsrc/app.tsxも変更します。

package.json
- "version": "1.0.0",
+ "version": "1.0.1",
src/app.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";

function render() {
  ReactDOM.render(
    <div>
-     <h1>v1.0.0</h1>
+     <h1>v1.0.1</h1>
      <h2>Hello from React!</h2>
    </div>,
    document.body
  );
}

render();

ファイルが更新できたら以下のコマンドを実行します。

yarn electron-forge publish

コマンドを実行したら先程と同じようにDraft状態のreleaseを公開しておきます。

v1.0.1を公開した状態でv1.0.0をインストールします。
インストールはreleseされているSetup.exeを実行するとできます。

v100.PNG

v1.0.0を起動します。画面上でもv1.0.0と表示されています。

しばらくするとアップデートがありますというダイアログが表示されます。
アップデートは自動的にバックグラウンドでダウンロードされます。

updateav.PNG

ダウンロードが完了すると以下のようなダイアログが表示され、再起動をクリックするとアプリが終了して再起動されます。

updatedone.PNG

再起動するとアップデートが完了します。
ダイアログでアップデートはありませんと表示されて画面上のバージョンもv1.0.1に変わっています。

updated.PNG

以上でアップデートが完了しました！
新しいバージョンを公開すると自動で確認してインストールしてくれるのでとても便利です！

まとめ

この記事ではelectron-forgeを使った環境構築から自動更新までを紹介しました。
設定が面倒くさそうと思ってelectron開発を躊躇していた方はぜひ試してみてください！

なにかのお役に立てれば幸いです！

33
22
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
33
22