Electronアプリ開発

Electronとは

Electronは、ChromiumとNode.jsを組み合わせたクロスプラットフォームのフレームワーク。Web技術を使用してデスクトップアプリケーションを開発することができる。

nodejsをインストール

Node.js — Node.js®をダウンロードする

バージョンの確認

node -v
npm -v

※npm
Node Package Managerの略で、Node.jsで使用されるパッケージ管理システム。npmでは、JavaScriptのライブラリやツールをパッケージとして管理し、インストールや更新を簡単に行うことができる。

yarnをインストール

npm install -g yarn
yarn -v

※Yarn
Node.jsで使用されるパッケージ管理システム。npmと同様に、JavaScriptのライブラリやツールをパッケージとして管理し、インストールや更新を簡単に行うことができる

Yarnとnpmの違いは以下の通り。

• Yarnはnpmよりも高速で効率的。

• Yarnはnpmよりもセキュリティが強化されている。

• Yarnはnpmよりもインストールが簡単。

• Yarnはnpmよりもコミュニティが小さい。（サポートが少ない可能性あり）

プロジェクトフォルダの作成

mkdir sample
cd sample

packege.jsonの作成

yarn init -y

yarn add electron

index.jsを作成

package.jsonのmainに「index.js」を指定

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

index.jsのコード

const {app, BrowserWindow} = require('electron')
let mainWindow
function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600, useContentSize: true,title: 'sample',})
  //mainWindow.loadFile('index.html')
  mainWindow.loadURL('https://www.google.com');

  mainWindow.on('closed', () => {
     mainWindow = null
  })
}
app.on('ready', createWindow)

アプリの実行

yarn electron .