ElectronでP5Sっぽいmacアプリ
作ったもの
きっかけ
ある日サボっていたmacのアップデートをしてOSXがBigSurになった。 すると、今まで使っていたデスクトップアプリ「Deadline P5」が最適化警告によって起動できなくなっていた。
それを見て思った。 「自分で作ってみよっと」
初めてのElectron
今までデスクトップアプリの制作経験は無いので、仕事でも使っているvue.jsで開発出来るElectronを使ってみることにした。
メインプロセスとそれぞれのレンダープロセスという考え方がまだしっかり理解できていないかもしれないが、今の所の理解の整理も兼ねてハマったところなどを書いていこうと思う。
開発環境
- vue3 Composition Api
- typescript
- Electron v9.0.0(vue-cli-plugin-electron-builder)
- node v14.15.1
- npm v6.14.8
環境作成については、vue-cliでvueプロジェクトを作ってからvue add electron-builderでElectronを乗っける。
ハマった
基本的には公式ドキュメントや、先人たちの知恵で解決できた。
だが、buildコマンドで吐き出したappを起動すると何も表示されない。 productionでもコンソールをだして確認してみるとpreloadが読み込めない的エラーが出ている。 そこから、一生懸命ググってみたが解決できず。
結局、preloadでは読み込めないソースをimportしているのが原因だったみたい。 10時間くらい持っていかれた......。
感想
既存の知識を流用して手軽にデスクトップアプリが作れるのは楽しいけど、win用mac用の実装差だったり、プロダクションビルド後特有のエラーだったり分かりにくいなぁと思いました。