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

IT

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

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

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2025/01/05 12:56:12時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

【最新機種】GoPro hero11 Black

created by Rinker
¥61,300 (2025/01/05 20:59:47時点 楽天市場調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

created by Rinker
THE NORTH FACE(ザノースフェイス)
¥33,000 (2025/01/05 13:22:08時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です!

ペヤング ソースやきそば 120g×18個

created by Rinker
ペヤング
¥3,280 (2025/01/05 12:33:38時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥10,429 (2025/01/05 12:09:13時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

スポンサーリンク

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

関連記事

YouTubeも見てね♪