Electronでアプリケーション開発

Electronでアプリケーションを開発する

Electronは、ブラウザChrome(Chromium)ベースのアプリケーション開発プラットフォームでWindows, MacOS, Linuxなどで動作します。
ほとんどの部分をWebアプリケーションの技術を用いて作成することができます。

デスクトップ版Slack, Atom, Visual Studio CodeなどはElectronで作成されています。

ここでは簡単なElectronアプリケーションを作ってみます。
開発環境:MacOS

NodeJSをインストール

ElectronはNodeJSで開発・動作するので、NodeJSをインストールします。
1.MacOSにHomebrewをインストールします。こちらを参考にしてください→「MacOSにHomebrewのインストール
2.以下のコマンドを入力してNodeJSをインストールします。

Electronの開発環境インストール

1.以下のコマンドを入力してElectronをインストールします。

これでElectronの開発環境が整いました。

Electronプロジェクト作成

1.以下のコマンドを入力します。

index.html, index.jsにコードを記述していきます。

index.html

index.js

Electronアプリケーションの起動

以下のコマンドを入力することでElectronアプリケーションを起動することができます。

index.jsの「app.on(‘ready’, function() {」内に「mainWindow.openDevTools();」と記述すると、起動時にChromeのデベロッパーコンソールを操作することができます。
起動時の実行画面です。
electron