初めてのElectron vol.01 [hello world]

記事はbookへ統合されます

https://zenn.dev/isana_citrus/books/90372c9fe6554d

初めに

Electronとはっていう題で文章を記述するのはこれを見ている方は見飽きている気がするので書きません。
まぁ。要するにHTML+CSS+JSなどのWeb技術を使ってデスクトップアプリケーションが作れてしまうやつです。
自分の認識はGUI部分をwebライクな書き方ができるよって感じの認識です。

対象version情報等

今回の記事の対象バージョン情報です。
違う場合はうまく動かないかもしれません。

virsion

node -v
#v16.13.2

electron -v
#v16.0.7

当方windowsにて動作確認をしてます。
多分他OSでもそのまま動きます。

Node.jsインストール

node.jsを入れます。
バージョンは上記の通りです。

electronを入れていく

npm init

ディレクトリを用意してnpm initする

npm install

mkdir electron_1
cd electron_1
npm init -y

package.jsonができる

./package.json

{
  "name": "electron_1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Electron install

いよいよelectronをインストール

electron install

npm install -d electron
electron

とりあえずインストールできた。

hello world

1,package.json編集

package.jsonを以下のように書き換える

./package.json

{
-   "main": "index.js",
+   "main": "main.js",
    "scripts":{
-       "test": "echo \"Error: no test specified\" && exit 1"
+       "start":"electron ."
    }
}

2,main.js作成

ディレクトリ直下にmain.jsを作成

./main.js

const electron = require("electron");   
//electron読み込んでapp,BrowserWindowを取り出す
const { app, BrowserWindow } = electron;
const path = require("path");           //pathはjoin用
let mainWindow;

//electron が準備終わったとき
app.on("ready", function () {

    //新しいウインドウを開く
    mainWindow = new BrowserWindow();

    //mainWindowでhtmlファイルを開く
    //"file://" + path.join(__dirname, 'index.html'); => file://作業ディレクトリ/index.html
    mainWindow.loadURL("file://" + path.join(__dirname, 'index.html'));

    //メインウインドウが閉じたらアプリが終了する
    mainWindow.on("closed", function () {
        app.quit();
    });
});

index.html作成

とりあえずこれだけかいとこう。

./index.html

<h1>hello world</h1>

ここまでのdir構成及びファイル

ここまでのディレクトリ構成はほぼフラット。
改装になっているのは自動生成されたnode_modulesのみ

dir

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2022/01/19     11:27                node_modules
-a----        2022/01/19     13:27             20 index.html
-a----        2022/01/19     13:21            752 main.js
-a----        2022/01/19     11:27          58535 package-lock.json
-a----        2022/01/19     12:42            190 package.json

./index.html

<h1>hello world</h1>

./main.js

const electron = require("electron");   
//electron読み込んでapp,BrowserWindowを取り出す
const { app, BrowserWindow } = electron;
const path = require("path");           //pathはjoin用
let mainWindow;

//electron が準備終わったとき
app.on("ready", function () {

    //新しいウインドウを開く
    mainWindow = new BrowserWindow();

    //mainWindowでhtmlファイルを開く
    //"file://" + path.join(__dirname, 'index.html'); => file://作業ディレクトリ/index.html
    mainWindow.loadURL("file://" + path.join(__dirname, 'index.html'));

    //メインウインドウが閉じたらアプリが終了する
    mainWindow.on("closed", function () {
        app.quit();
    });
});

./pakage.json

{
  "name": "electron_1",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

実行しよう

実行するには

npm start

起動したらこんな感じ

この内容いろんなところに書いてあるって

まあそんなこと言わずに。

これはvol.01です。
vol.02からをお楽しみに。