Electron でデスクトップアプリを作る

Uncategorized
990 words

JavaScript で デスクトップアプリ が簡単に作れる Electron を試してみたいと思います。

準備

Node.js がインストールされている前提で進めていきます。

1
2
3
4
5
node -v
# v12.18.1

npm -v
# 6.14.5

Electronアプリ を作る

Electron は Node.js によってパッケージ管理されているため、新規フォルダを作って プロジェクト を作成する必要があります。

npmパッケージ を作成

新規フォルダ内で下記コマンドを実行し「package.json」を作成します。

1
npm init

今回は「Hello-world」というアプリフォルダ名で作業して行きます。

初期化時の設定は下記の通りです。

  • package name: hello-world（初期値）
  • version: 1.0.0（初期値）
  • description: 未入力
  • entry point: main.js
  • test command: 未入力
  • git repository: 未入力
  • keywords: 未入力
  • author: 未入力
  • license: ISC（初期値）

変更点は entry point だけですね。index.js はメイン画面で使うので Electron では main.js に変更しました。

npm init 実行

新規フォルダ内に「package.json」が作られました。

package.json 作成

package.json を修正

「package.json」を作ったばかりですが、内容を一部修正します。

1
2
3
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

の部分を下記に修正します。

1
2
3
"scripts": {
  "start": "electron ."
},

これを忘れると Electron の実行が出来ませんので忘れずに修正しましょう。

package.json 修正

Electron をインストール

次に Electronパッケージ をインストールします。

アプリフォルダ内で下記コマンドを実行し Electron をインストールします。

1
npm install --save-dev electron

npm install electron 実行

アプリフォルダ内に「node_modules」フォルダと「package-lock.json」ファイルが作成されます。

node_modules と package-lock.json 追加

Electron用 JavaScript の作成

まず初めに Electron を制御するための JavaScript を作成します。

アプリフォルダ内に「main.js」ファイルを新規作成します。

main.js 作成

「main.js」に下記をコピペします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { app, BrowserWindow } = require('electron');
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadFile('index.html');
  // win.setMenu(null);
  // win.webContents.openDevTools();
}
app.whenReady().then(createWindow);

これで Electronアプリ の起動準備が出来ました。

main.js 修正

次に Electronアプリ内に表示する画面を作ります。

先程 index.html を読み込むように書いたので「index.html」を作ります。

index.html 作成

「index.html」に下記をコピペします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

index.html 修正

アプリの実行

ここまで出来れば Electronアプリ を実行することが出来ます。

コマンドプロンプトに下記を入力して Electronアプリ を実行してみます。

1
npm run test

Electronアプリ を実行

エラーが出る場合は？

D:\Electron\Hello-world>npm run start
npm ERR! missing script: start

npm ERR! missing script: start

「スクリプトの start なんて無いぜ」と言ってます。

「package.json」の scripts 修正忘れていませんか？ 少し記事をさかのぼって違いを探してみましょう。

デバッグを簡単にする

このままでもいいですが、実行するたびに「npm start」を入力するのは手間だと思います。

なので デバッグ実行の構成 を作ります。

VS Code の 実行アイコンを押して「launch.json ファイルを作成します」をクリック。

launch.json ファイルを作成します

「Node.js」を選択。

構成の選択

「構成の追加」を押して「Run “npm start” in a debug terminal」を選択したら設定完了です。

Run "npm start" in a debug terminal

launch.json を保存してから デバッグ実行の構成を「Run npm start」に変えます。

Run npm start

最後に「F5キー」を押すか デバックの開始 を押せば Electronアプリを実行できます。

デバックの開始

「停止」ボタンを押せば終わらせることが出来ます。

停止

終わりに

一番簡単な Electronアプリ が完成しました。

次回は、Electronアプリ をパッケージングして 配布できるようにします。

あとは、もう少し凝ったことをやってみたいと思っています。

参考

https://www.electronjs.org/docs