![見出し画像](https://assets.st-note.com/production/uploads/images/25926039/rectangle_large_type_2_5f239a68118333c183da585de4fa1753.png?width=1200)
Webの技術でMacアプリを作ってみる
Webの技術でデスクトップ用のアプリケーションを作成出来る、クロスプラットフォームのフレームワークの「Electron」 を使ってみたのでメモです。
JavaScriptやhtmlで、Swiftや.NET等のネイティブ言語を書かなくてもデスクトップアプリを作成できる、Web技術者にとってはありがたい、フレームワークになります。
Electronについては前提知識として以下を斜め読みして、調べながら試してみました。ネイティブのAPIを叩けば画面キャプチャーやクリップボードの操作なども使えるようですね。
実際に作ってみたのは以下になります。デスクトップアイコンからアプリを起動でき、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の知識しか無い僕のようなエンジニアにはデスクトップアプリを作る時の選択肢の1つになるのかなと思います。
作りたいアプリがあり、そのために検証を兼ねて実施してみたので、そのうちデスクトップアプリをリリースすると思います🚀
最後まで読んでいただきありがとうございました〜✌️
追記
ローカルでビルドせずに環境を立ち上げたい場合
npm run electron:serve
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?