ねこじゃすり
猫を魅了する魔法の装備品!
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう!
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です!
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし!
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ!!
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード!
スポンサーリンク
目次
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
をインストールしましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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プロジェクトの作成
以下のコマンドで対話式でプロジェクトの設定を行いましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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/ にアクセスしてみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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. |
正常に起動しましたね!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
. ├── 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
を追加する必要があります。
以下のコマンドで追加しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
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を実行してみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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を使うと、この辺のビルド周りもあらかじめ整えられているのでそのままビルド出来てしまいます・・・!
以下のコマンドを実行しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
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. |
すると、が生成されその中に成果物が出力されています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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操作のみで完結しました。
あとはこのプロジェクトをベースに実装を進めていけば良いので、皆さんもオリジナルデスクトップアプリケーションを作ってみてはいかがでしょうか♪