Electron First step
Fist Step
Electron で最初のアプリケーションを作り、簡易的な方法で実行します。
Linux については、Ubuntu、Fedora、CentOS、Mint で正常動作しますが、 Debian では動作しません。
ディレクトリの作成
Electronは、一つのアプリケーションを、一つのディレクトリにまとめて管理していきます。 コマンドプロンプトかターミナルを起動して次のようにコマンドします。
// Documents ディレクトリなどに Electron 用のディレクトリなどを作り
// その中に Hello アプリケーション用のディレクトリを作ります。
cd Documents
mkdir Electron
cd Electron
mkdir Hello
cd Hello
// Hello ディレクトリに設定ファイルを作り、Electron と Electron-Builder をインストールします。
npm init -y
npm i -D electron
npm i -D electron-builder
// i は install の略記、-Dは --save-dev の略記です。-D もしくは --save-dev は、パッケージをそのディレクトリだけにインストールします。
// なお electron-builder は、この章では不要ですが、次の章で必要なのでインストールしておきました。
package.json の編集
Hello ディレクトリに package.json というファイルができ上がっています。 このファイルにアプリケーションの設定をいろいろと記述していきます。
package.json
// 最初の状態
{
"name": "Hello",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^13.1.4",
"electron-builder": "^22.11.7"
}
}
// 変更後
// "scipts": { を、"start": "electron ." に変更しています。
{
"name": "Hello",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^13.1.4",
"electron-builder": "^22.11.7"
}
}
コード説明
-
"name": "Hello",
ディレクトリの名前が自動的にアプリケーションの名前になっています。 ここを変更することによって、アプリケーションの名前を変更できます。 -
"main": "index.js",
このアプリケーションは、index.js から始まります。 - "devDependencies": {
devDependencies に依存しているパッケージが記述されます。 -
"start": "electron ."
scripts に start electron . を追加すると、npm start というスクリプトで アプリケーションを実行できるようになります。 変更前の "test": "echo \"Error: no test specified\" && exit 1" も残したい場合は、"start": "electron .", というふうに、 2つのスクリプトの間にカンマ( , )が必要になります。 - description と author は空欄のままですが、アプリケーションをビルドする場合は、 何か記述しておかなければなりません。
index.js の追加
Hello ディレクトリに、次のような index.js ファイルを追加します。
index.js
const { app, BrowserWindow } = require('electron');
let window;
app.on('ready', () => {
window = new BrowserWindow({
widht: 700,
height: 350,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
window.loadFile('index.html');
});
コード説明
全体的なコード説明は、一旦割愛しまが、 Electron のオフィシャルサイトでは、webPreferences: { のボディを preload: path.join(__dirname, 'preload.js') としています。これはちょっとした問題を回避するための手段ですが、 わざわざ preload.js という別のファイルを作成して、 そこにスクリプトの一部を記述しなければならず、少し面倒です。上記のように nodeIntegration: true, と contextIsolation: false とするほうが簡単です。
index.html の追加
Hello ディレクトリに次のような index.html ファイルを追加します。
index.html
<!DOCYTPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<h1>Hello World!</h1>
<p>
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>.</p>
</body>
</html>
コード説明
title タグに記述した名前がアプリケーションウィンドウのタイトルになります。
実行方法
コマンドプロンプトもしくはターミナルで Hello ディレクトに移動し、 次のようにコマンドします。
npm start
実行結果
Parallels Desktop for Mac をお使いの場合
Parallels Desktop for Mac で Linux を実行している場合、通常の設定では、 実行したアプリケーションは真っ黒なウィンドウの右上に白い矩形が表示されるだけです。
お使いの Linux ゲスト OS で次の設定をしてください。
構成... → ハードウェア → グラフィック → 詳細設定で、 3D アクセラレーションをオフにします。
これで Electron アプリケーションが、正常に表示されるようになります。