まず仕様を決める

目的(欲求)

Electronで快適に開発したい

仕様

まずはシンプルに

中央に数値といくつかのボタンが表示されている
ボタンはそれぞれ数値のインクリメント・デクリメント・セーブ・ロード機能を備える

仕様に要求すること

インタラクションでなにか変わる
nodeの機能を使う

前提

WSL上で開発する

virusbb001 2023/01/08に更新

開発で使いたいもの・したいこと

TypeScript
自動テスト
CI?
- 使うCIなどで設定がわりと変わりそう
- 今回はGitHub Actionsに限定する
実行ファイル作成

virusbb001 2023/01/08

プロジェクト作成

目標

起動して画面に "Hello, Worlds." と表示する

調査したこと

If you prefer to get a project started with a single-command boilerplate, we recommend you start with Electron Forge's create-electron-app command.

create-electron-app のビルトインテンプレートがWebpack前提のものだけなので今回は手動で設定することにする

ElectronをTypeScriptで開発する先行研究があったのでtsconfigなどを参考にさせて頂く

ここのスターターコードを参照すれば目標は達成される。

virusbb001 2023/01/08

E2E テストの作成

試しにPlaywrightを使用してみる。

virusbb001 2023/01/08

Rendererプロセスだけで完結する機能を実装する

数値表示
インクリメント
デクリメント

画面は雑に span{0}+button{Increment}+button{Decrement} で済ます

virusbb001 2023/01/12

セーブ・ロード機能を実装する

src/renderer.ts がある状態で src/renderer.d.ts を追加してしまうと、 d.ts が古いコンパイル後のファイルだと判定されて無視されてしまうため別途適切な名前に変更する
TODO: 公式ドキュメントに該当する箇所がないか調べる

preload.ts に declare を書いてしまう

virusbb001 2023/01/19

Github Actions 設定

https://github.com/microsoft/playwright/blob/b740aa04e7df1b99ac4c0cc2880f18ef969bd511/.github/workflows/tests_electron.yml を参考にする

今はテストしかないのでテストのみ

virusbb001 2023/02/08

実行可能ファイルを作成する

electron-forge を追加する

https://github.com/electron/forge electronチームが直接管理しているElectron Forgeが推奨されるようになった。

https://www.electronforge.io/import-existing-project#using-the-import-script こちらに従いコマンドを実行する

npm run build && npm run start で動作することを確認。

virusbb001 2023/02/17

electron-forgeで完結するように

目標

npm run start などelectron-forgeだけでビルドしたりできるようにする

やったこと

forge.config.js に generateAssets hookに npm run build タスクを実行する処理を追加

TODO

npm run buildをリネーム
GitHub actions設定を追加

virusbb001 2023/02/28

Electron Forge GitHub Actionsを設定する

If you don't have access to Windows, macOS, and Linux machines, we highly recommend creating a build pipeline on a Continuous Integration platform that supports all these platforms (e.g. CircleCI or GitHub Actions). For an example of CI builds in action, see Electron Fiddle's GitHub Actions pipeline.

https://github.com/electron/fiddle/blob/4f6e743cacaeae3f083e6ec3cd366e93af13b029/.github/workflows/build.yaml を丸コピ

足りないファイルを持ってくる。

macOSのサインのためには Apple Developer Programへの加入が必要
Windowsのサインのためにはコード署名証明書の購入が必要

今回はコード署名はスキップする

# macOSをサインする場合はmacos-cert.shを持ってくる。一応コマンドを残しておくが、今回は実行しない
mkdir tools
cd tools
curl -O https://raw.githubusercontent.com/electron/fiddle/4f6e743cacaeae3f083e6ec3cd366e93af13b029/tools/add-macos-cert.sh

GitHub Actionsに自信なし

virusbb001 2023/03/14

[中断] Flatpak の対応を追加する

npm install --save-dev @electron-forge/maker-flatpak
forge.config に @electron-forge/maker-flatpak の設定を追加する
https://github.com/electron/forge/issues/2561#issuecomment-1425107777 にあるコマンドを実行する
npm run make して実行しようとしたが実行に失敗したため一旦これは中断することにした

もうちょっとFlatpakに対しての理解を深めたほうが良さそう