Electronの良い開発環境を知りたい2023/01
まず仕様を決める
目的(欲求)
Electronで快適に開発したい
仕様
まずはシンプルに
- 中央に数値といくつかのボタンが表示されている
- ボタンはそれぞれ数値のインクリメント・デクリメント・セーブ・ロード 機能を備える
仕様に要求すること
- インタラクションでなにか変わる
- nodeの機能を使う
前提
WSL上で開発する
開発で使いたいもの・したいこと
- TypeScript
- 自動テスト
- CI?
- 使うCIなどで設定がわりと変わりそう
- 今回はGitHub Actionsに限定する
- 実行ファイル作成
プロジェクト作成
目標
起動して画面に "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などを参考にさせて頂く
ここのスターターコードを参照すれば目標は達成される。
E2E テストの作成
試しにPlaywrightを使用してみる。
Rendererプロセスだけで完結する機能を実装する
- 数値表示
- インクリメント
- デクリメント
画面は雑に span{0}+button{Increment}+button{Decrement}
で済ます
セーブ・ロード機能を実装する
src/renderer.ts
がある状態で src/renderer.d.ts
を追加してしまうと、 d.ts
が古いコンパイル後のファイルだと判定されて無視されてしまうため別途適切な名前に変更する
TODO: 公式ドキュメントに該当する箇所がないか調べる
preload.ts
に declare
を書いてしまう
Github Actions 設定
今はテストしかないのでテストのみ
実行可能ファイルを作成する
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
で動作することを確認。
electron-forgeで完結するように
目標
-
npm run start
などelectron-forgeだけでビルドしたりできるようにする
やったこと
forge.config.js
に generateAssets
hookに npm run build
タスクを実行する処理を追加
TODO
- npm run buildをリネーム
- GitHub actions設定を追加
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.
足りないファイルを持ってくる。
- 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に自信なし
[中断] 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に対しての理解を深めたほうが良さそう