Electron使いたい
今時のデスクトップアプリはクオリティが高い
エンジニアの皆さんは、SlackやAtom、VSCode、PostManを使ったことありますか？
使いやすさやデザイン、動作の軽さなどかなり使いやすいアプリケーションだと筆者は思っています。
そして、これらのアプリケーションに共通する点として、「全てElectronフレームワーク製」という点が言えます。
Electronとは？
Electronとは、GitHubが開発したオープンソースのフレームワークの事を指し、ChromiumとNode.jsを使いHTML/CSS/JsvaScriptのWebの技術を使いMacOS/Windows/Linuxに対応したクロスプラットフォームアプリケーションを作ることを可能にしてくれます。
Build cross platform desktop apps with JavaScript, HTML, and CSSElectron | Build cross platform desktop apps with JavaScript, HTML, and CSS.
要は1ソースコードによって複数OSごとののデスクトップアプリケーションをビルド出来るということですね。
また、それがWebの技術で簡単に作れちゃうという点がポイントです。
流行りのVue.jsでも実装可能
Electron自体はJavaScriptであればなんでも良いのでjQueryやReact、AngulerJSなどでも実装出来ますが、今回はフロントエンドでデファクトになりつつあるVue.jsを使った開発環境を作ってみようと思います。
また、vue-cliの3系を使うことで初期設定から起動までをコマンドラインのみで完結出来てしまうのでそちらも勉強がてら使ってみようと思います♪
手順
vue-cliのインストール
まずはvue-cliをインストールしましょう。
yarn global add @vue/cli 2077ms 月 9/ 2 18:22:53 2019
yarn add v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 602 new dependencies.
info Direct dependencies
└─ @vue/cli@3.11.0
info All dependencies
...
✨ Done in 39.24s.
vueプロジェクトの作成
以下のコマンドで対話式でプロジェクトの設定を行いましょう。
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter
? 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) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
Vue CLI v3.11.0
✨ Creating project in /Users/blogenist/Develop/electron-app.
⚙ Installing CLI plugins. This might take a while...
yarn install v1.17.3
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
success Saved lockfile.
✨ Done in 56.01s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 8.53s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project electron-app.
👉 Get started with the following commands:
$ cd electron-app
動作確認
以下のコマンドでサーバーを起動し、http://localhost:8080/ にアクセスしてみましょう。
yarn run v1.17.3
$ vue-cli-service serve
INFO Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin
DONE Compiled successfully in 2517ms 18:43:43
No type errors found
No lint errors found
Version: typescript 3.6.2, tslint 5.19.0
Time: 1926ms
App running at:
- Local: http://localhost:8080/
- Network: unavailable
Note that the development build is not optimized.
To create a production build, run yarn build.
正常に起動しましたね！
.
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── postcss.config.js
├── public
│ ├── favicon.ico
│ ├── img
│ │ └── icons
│ │ ├── android-chrome-192x192.png
│ │ ├── android-chrome-512x512.png
│ │ ├── apple-touch-icon-120x120.png
│ │ ├── apple-touch-icon-152x152.png
│ │ ├── apple-touch-icon-180x180.png
│ │ ├── apple-touch-icon-60x60.png
│ │ ├── apple-touch-icon-76x76.png
│ │ ├── apple-touch-icon.png
│ │ ├── favicon-16x16.png
│ │ ├── favicon-32x32.png
│ │ ├── msapplication-icon-144x144.png
│ │ ├── mstile-150x150.png
│ │ └── safari-pinned-tab.svg
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.ts
│ ├── registerServiceWorker.ts
│ ├── router.ts
│ ├── shims-tsx.d.ts
│ ├── shims-vue.d.ts
│ ├── store.ts
│ └── views
│ ├── About.vue
│ └── Home.vue
├── tsconfig.json
├── tslint.json
└── yarn.lock
簡単にプロジェクトの雛壇を作れちゃうのがvue-cliの強みですね♪
electron-builderの追加
このままだと、単純なWebプロジェクトなのでElectron化するためにelectron-builderを追加する必要があります。
以下のコマンドで追加しましょう。
yarn install v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
$ electron-builder install-app-deps
• electron-builder version=21.2.0
✨ Done in 107.13s.
⠋ Running completion hooks...
WARN It is detected that you are using Vue Router. If you are using history mode, you must push the default route when the root component is loaded. Learn more at https://goo.gl/GM1xZG .
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
The following files have been updated / added:
.browserslistrc
.gitignore
README.md
babel.config.js
package.json
postcss.config.js
public/favicon.ico
public/img/icons/android-chrome-192x192.png
public/img/icons/android-chrome-512x512.png
public/img/icons/apple-touch-icon-120x120.png
public/img/icons/apple-touch-icon-152x152.png
public/img/icons/apple-touch-icon-180x180.png
public/img/icons/apple-touch-icon-60x60.png
public/img/icons/apple-touch-icon-76x76.png
public/img/icons/apple-touch-icon.png
public/img/icons/favicon-16x16.png
public/img/icons/favicon-32x32.png
public/img/icons/msapplication-icon-144x144.png
public/img/icons/mstile-150x150.png
public/img/icons/safari-pinned-tab.svg
public/index.html
public/manifest.json
public/robots.txt
src/App.vue
src/assets/logo.png
src/background.ts
src/components/HelloWorld.vue
src/main.ts
src/registerServiceWorker.ts
src/router.ts
src/shims-tsx.d.ts
src/shims-vue.d.ts
src/store.ts
src/views/About.vue
src/views/Home.vue
tsconfig.json
tslint.json
yarn.lock
You should review these changes with git diff and commit them.
確認
無事にインストール出来たら以下のコマンドでElectronを実行してみましょう。
yarn run v1.17.3
$ vue-cli-service electron:serve
INFO Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin
DONE Compiled successfully in 2229ms 19:00:21
Type checking and linting in progress...
App running at:
- Local: http://localhost:8080/
- Network: unavailable
Note that the development build is not optimized.
To create a production build, run yarn build.
No type errors found
Version: typescript 3.6.2, tslint 5.19.0
Time: 2638ms
⠴ Bundling main process...
DONE Compiled successfully in 484ms 19:00:22
File Size Gzipped
dist_electron/index.js 651.88 KiB 148.31 KiB
Images and other types of assets omitted.
INFO Launching Electron...
無事にアプリケーションとして起動しましたね♪
デスクトップアプリケーションのビルド
では、この状態のアプリケーションをビルドしてみましょう。
vue-cliのelectron-builderを使うと、この辺のビルド周りもあらかじめ整えられているのでそのままビルド出来てしまいます・・・！
以下のコマンドを実行しましょう。
yarn run v1.17.3
$ vue-cli-service electron:build
INFO Bundling render process:
⠋ Building modern bundle for production...Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
⠹ Building modern bundle for production...
File Size Gzipped
dist_electron/bundled/js/chunk-vendors 105.82 KiB 36.04 KiB
.7d92e116.js
dist_electron/bundled/js/app.6774a83f. 6.93 KiB 2.63 KiB
js
dist_electron/bundled/service-worker.j 0.95 KiB 0.54 KiB
s
dist_electron/bundled/precache-manifes 0.67 KiB 0.31 KiB
t.b1ab04c5225d9806f86209d073594343.js
dist_electron/bundled/js/about.e281d17 0.44 KiB 0.31 KiB
d.js
dist_electron/bundled/css/app.00a74e55 0.42 KiB 0.26 KiB
.css
Images and other types of assets omitted.
DONE Build complete. The dist_electron/bundled directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
⠋ Bundling main process...
DONE Compiled successfully in 3403ms 13:45:39
File Size Gzipped
dist_electron/bundled/background.js 160.59 KiB 49.73 KiB
Images and other types of assets omitted.
INFO Building app with electron-builder:
• electron-builder version=21.2.0 os=18.6.0
• description is missed in the package.json appPackageFile=/Users/blogenist/electron-app/dist_electron/bundled/package.json
• author is missed in the package.json appPackageFile=/Users/blogenist/electron-app/dist_electron/bundled/package.json
• writing effective config file=dist_electron/builder-effective-config.yaml
• packaging platform=darwin arch=x64 electron=6.0.7 appOutDir=dist_electron/mac
• default Electron icon is used reason=application icon is not set
• skipped macOS application code signing reason=cannot find valid "Developer ID Application" identity or custom non-Apple code signing certificate, see https://electron.build/code-signing allIdentities=
1) 29560279B124B3E8ED4F245BB71C75A1C8D7D79B "member: A5AD2CF9-9D93-47E3-A0B7-4EB980E6340E 04B7A6F3-03ED-4CE0-B498-72101C605FFF" (CSSMERR_TP_NOT_TRUSTED)
1 identities found
Valid identities only
0 valid identities found
• building target=macOS zip arch=x64 file=dist_electron/electron-app-0.1.0-mac.zip
• building target=DMG arch=x64 file=dist_electron/electron-app-0.1.0.dmg
• building block map blockMapFile=dist_electron/electron-app-0.1.0.dmg.blockmap
• building embedded block map file=dist_electron/electron-app-0.1.0-mac.zip
DONE Build complete!
✨ Done in 39.89s.
すると、が生成されその中に成果物が出力されています。
dist_electron/
├── builder-effective-config.yaml
├── bundled
│ ├── background.js
│ ├── css
│ ├── favicon.ico
│ ├── img
│ ├── index.html
│ ├── js
│ ├── manifest.json
│ ├── node_modules
│ ├── package.json
│ ├── precache-manifest.b1ab04c5225d9806f86209d073594343.js
│ ├── robots.txt
│ └── service-worker.js
├── electron-app-0.1.0-mac.zip
├── electron-app-0.1.0.dmg
├── electron-app-0.1.0.dmg.blockmap
├── index.js
├── mac
│ └── electron-app.app
└── package.json
いたせりつくせりですね・・・！
試しに、electron-app-0.1.0.dmgを実行してみましょう。
無事にインストーラーが起動され、Applicationsに入れることでAlfred2の検索にもヒットし起動しました♪
2年前にReactで生のElectronを自前で実装していた時は、このビルド周りを整えるのにめちゃくちゃ苦戦していた記憶があるので幸せ過ぎます・・・！！！
もちろん、設定を変えることでアイコンやアプリ名を変えれるはずなのでそれはまた次回以降に試してみたいと思います♪
終わりに
以上のように、vue-cliを使えばベースプロジェクトの作成及び起動までは全てcli操作のみで完結しました。
あとはこのプロジェクトをベースに実装を進めていけば良いので、皆さんもオリジナルデスクトップアプリケーションを作ってみてはいかがでしょうか♪