素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【デスクトップアプリ】Electron+Vueの環境構築をvue-cliのみで完結してみた【エディターいらず】

投稿日: 2019年9月5日
最終更新日:

スポンサーリンク

336×280




Electron使いたい

今時のデスクトップアプリはクオリティが高い

エンジニアの皆さんは、SlackAtomVSCodePostManを使ったことありますか?

使いやすさやデザイン、動作の軽さなどかなり使いやすいアプリケーションだと筆者は思っています。

そして、これらのアプリケーションに共通する点として、「全てElectronフレームワーク製」という点が言えます。

Electronとは?

Electronとは、GitHubが開発したオープンソースのフレームワークの事を指し、ChromiumNode.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であればなんでも良いのでjQueryReactAngulerJSなどでも実装出来ますが、今回はフロントエンドでデファクトになりつつあるVue.jsを使った開発環境を作ってみようと思います。

また、vue-cli3系を使うことで初期設定から起動までをコマンドラインのみで完結出来てしまうのでそちらも勉強がてら使ってみようと思います♪

手順

vue-cliのインストール

まずはvue-cliをインストールしましょう。

vueプロジェクトの作成

以下のコマンドで対話式でプロジェクトの設定を行いましょう。

動作確認

以下のコマンドでサーバーを起動し、http://localhost:8080/ にアクセスしてみましょう。

正常に起動しましたね!

簡単にプロジェクトの雛壇を作れちゃうのがvue-cliの強みですね♪

electron-builderの追加

このままだと、単純なWebプロジェクトなのでElectron化するためにelectron-builderを追加する必要があります。

以下のコマンドで追加しましょう。

確認

無事にインストール出来たら以下のコマンドでElectronを実行してみましょう。

無事にアプリケーションとして起動しましたね♪

デスクトップアプリケーションのビルド

では、この状態のアプリケーションをビルドしてみましょう。

vue-cliのelectron-builderを使うと、この辺のビルド周りもあらかじめ整えられているのでそのままビルド出来てしまいます・・・!

以下のコマンドを実行しましょう。

すると、が生成されその中に成果物が出力されています。

いたせりつくせりですね・・・!

試しに、electron-app-0.1.0.dmgを実行してみましょう。

無事にインストーラーが起動され、Applicationsに入れることでAlfred2の検索にもヒットし起動しました♪

2年前にReact生のElectronを自前で実装していた時は、このビルド周りを整えるのにめちゃくちゃ苦戦していた記憶があるので幸せ過ぎます・・・!!!

もちろん、設定を変えることでアイコンやアプリ名を変えれるはずなのでそれはまた次回以降に試してみたいと思います♪

本日のおすすめ商品

終わりに

以上のように、vue-cliを使えばベースプロジェクトの作成及び起動までは全てcli操作のみで完結しました。

あとはこのプロジェクトをベースに実装を進めていけば良いので、皆さんもオリジナルデスクトップアプリケーションを作ってみてはいかがでしょうか♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , , ,

blogenist

Author: blogenist