Electronアプリ開発入門01

posted in: electron | 0

松山事務所の くろもん です。
今回はElectronを用いてWindowsのデスクトップアプリを作成してみました。

Electronとは

公式サイト(https://electronjs.org/)
github(https://github.com/electron/electron)

ChromiumとNode.jsを用いて、デスクトップアプリを作成できるフレームワークです。

開発環境について

Node.js(npm)がインストールされている必要があります。
今回はElectron本体の他に、作成したアプリをWindows用のexeへ変換するためのライブラリを導入して作成しました。
導入時のコマンドは以下の通りです。

単純な例

以下のコードが、Electronアプリを起動するための単純なコードです。

これらのファイルを、以下のフォルダ構成にして、
ルートディレクトリ内で “npx electron .” と実行することで、画面が表示されます。

実行ファイル(exe)の作成

先ほど表示した画面を、electron-builderを使用して実行ファイルにします。

ただ、方法は単純で、package.jsonを以下の通り編集し、出力されるファイルの情報を設定した上で、 “npx build” と実行するだけです。

“dist”というフォルダが作成され、フォルダ内に” .exe”という形式で実行ファイルが作成されます。

今後の内容

ローカルのファイルやシェルへのアクセスの実現方法について、まとめている最中です。
また、開発用とアプリ用のpackage.jsonは分けたほうがいいとのことなので、フォルダ構成についても修正するつもりです。

LINEで送る
Pocket