Closed11

Electronの良い開発環境を知りたい2023/01

virusbb001virusbb001

まず仕様を決める

目的(欲求)

Electronで快適に開発したい

仕様

まずはシンプルに

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

仕様に要求すること

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

前提

WSL上で開発する

virusbb001virusbb001

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

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

プロジェクト作成

目標

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

調査したこと

https://www.electronjs.org/ja/docs/latest/tutorial/tutorial-prerequisites#コードエディタ

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.

https://www.electronforge.io/templates/typescript-+-webpack-template

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

https://zenn.dev/lowpaper/articles/89caa5cdddfd89

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

https://www.electronjs.org/ja/docs/latest/tutorial/tutorial-first-app

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

virusbb001virusbb001

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

https://www.electronjs.org/ja/docs/latest/tutorial/context-isolation#typescript-との連携

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

preload.tsdeclare を書いてしまう

https://github.com/virusbb001/investigating-electron-ecosystem/compare/4ada39a5d8d...2cd2014e2b

virusbb001virusbb001

electron-forgeで完結するように

目標

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

やったこと

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

TODO

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

Electron Forge GitHub Actionsを設定する

https://www.electronforge.io/core-concepts/build-lifecycle#cross-platform-build-systems

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

https://github.com/virusbb001/investigating-electron-ecosystem/compare/virusbb001:882eb5b...virusbb001:1cabbd5

GitHub Actionsに自信なし

virusbb001virusbb001

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

  1. npm install --save-dev @electron-forge/maker-flatpak
  2. forge.config@electron-forge/maker-flatpak の設定を追加する
  3. https://github.com/electron/forge/issues/2561#issuecomment-1425107777 にあるコマンドを実行する
  4. npm run make して実行しようとしたが実行に失敗したため一旦これは中断することにした
  • もうちょっとFlatpakに対しての理解を深めたほうが良さそう
このスクラップは2023/08/07にクローズされました