Webの技術でMacアプリを作ってみる

Webの技術でデスクトップ用のアプリケーションを作成出来る、クロスプラットフォームのフレームワークの「Electron」 を使ってみたのでメモです。

JavaScriptやhtmlで、Swiftや.NET等のネイティブ言語を書かなくてもデスクトップアプリを作成できる、Web技術者にとってはありがたい、フレームワークになります。

Electronについては前提知識として以下を斜め読みして、調べながら試してみました。ネイティブのAPIを叩けば画面キャプチャーやクリップボードの操作なども使えるようですね。

ようこそ！Electron入門 - Qiita

実際に作ってみたのは以下になります。デスクトップアイコンからアプリを起動でき、Vue.jsの初期画面が確認できます。

環境

$ node -v
v12.16.1
$ vue -V
@vue/cli 4.3.1
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.4
BuildVersion:	19E287 

vue-cliでプロジェクトを作成

vue-cliでプロジェクトの作成します。TypeScriptを使ってみたかったので初期設定時に設定しました。

$ vue create hello-electron
  Vue CLI v4.3.1
 ? Please pick a preset: 
   default (babel, eslint) 
 ❯ Manually select features 
 
 Vue CLI v4.3.1
 ? Please pick a preset: Manually select features
 ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit
 ? Use class-style component syntax? Yes
 ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
 ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
 ? Pick a linter / formatter config: Prettier
 ? Pick additional lint features: Lint on save
 ? Pick a unit testing solution: Jest
 ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
 ? Save this as a preset for future projects? No

作ったVueを起動します。

$ cd hello-electron
$ npm run serve

立ち上がりました。（Hello Vue → Hello Electronに変更してます。）

ElectronでMacアプリをビルドする

Vueの環境ができたので、実際にMacアプリをビルドしてみます。
まずビルド用のライブラリを、インストールします。
バージョンは最新版の6、テストは一旦追加してみました。（テストは初期ビルド時にこけてしまったので、とりあえず使ってみたい場合はテストは不要かもしれません。）

$ vue add electron-builder
  
  
  📦  Installing vue-cli-plugin-electron-builder...
  
  
  > electron-chromedriver@5.0.1 install /Users/shoutaro/dev/2_practive/hello-electron/node_modules/electron-chromedriver
  > node ./download-chromedriver.js
  
  + vue-cli-plugin-electron-builder@1.4.6
  added 225 packages from 108 contributors and audited 1864 packages in 45.983s
  
  53 packages are looking for funding
    run `npm fund` for details
  
  found 3 vulnerabilities (2 low, 1 high)
    run `npm audit fix` to fix them, or `npm audit` for details
  ✔  Successfully installed plugin: vue-cli-plugin-electron-builder
  
  ? Choose Electron Version ^6.0.0
  ? Add tests with Spectron to your project? Yes

Macアプリをビルドします。ビルドの際に、上記の設定で追加したテストがこけてしまいました。

$ npm run electron:build
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at tests/unit/electron.spec.js:1:30:
> 1 | const { testWithSpectron } = require("vue-cli-plugin-electron-builder");
    |                              ^
  2 | jest.setTimeout(50000);
  3 | 
  4 | test("Window Loads Properly", async () => {

一旦動作確認したかったので、electron-builderの初期設定時に作成されたテストは、コメントアウトしました。その上で再度実行すると成功しました。

$ npm run electron:build
DONE  Build complete!

現在のディレクトリ構成を確認します。dist_electrontというディレクトリに、ビルドされたデスクトップアプリが保存されます。

dist_electront配下にある、 hello-electron-0.1.0.dmg が、今回作成したかったVueとTypeScritptで作成したMac用のデスクトップアプリです。

$ tree -d -L 1
.
├── dist_electron
├── node_modules
├── public
├── src
└── tests

$ cd dist_electron 
$ ll
total 249576
drwxr-xr-x   8 shoutaro  staff       256  5 17 00:19 .
drwxr-xr-x  15 shoutaro  staff       480  5 17 00:17 ..
-rw-r--r--   1 shoutaro  staff       160  5 17 00:18 builder-effective-config.yaml
drwxr-xr-x  10 shoutaro  staff       320  5 17 00:18 bundled
-rw-r--r--   1 shoutaro  staff  62426155  5 17 00:19 hello-electron-0.1.0-mac.zip
-rw-r--r--@  1 shoutaro  staff  64297658  5 17 00:19 hello-electron-0.1.0.dmg
-rw-r--r--   1 shoutaro  staff     68503  5 17 00:19 hello-electron-0.1.0.dmg.blockmap
drwxr-xr-x   3 shoutaro  staff        96  5 17 00:18 mac 

finderで実際に開いてみると、Macアプリケーションとして認識してくれました。

おわりに

調べ始めてから1時間程度で、デスクトップアプリの動作確認まで試すことができました。Swift等ネイティブ言語等の知識がなく、Webの知識しか無い僕のようなエンジニアにはデスクトップアプリを作る時の選択肢の１つになるのかなと思います。

作りたいアプリがあり、そのために検証を兼ねて実施してみたので、そのうちデスクトップアプリをリリースすると思います🚀

最後まで読んでいただきありがとうございました〜✌️

追記

ローカルでビルドせずに環境を立ち上げたい場合

npm run electron:serve