Ubuntu20.10にElectron環境を構築したのでメモ

2021/01/27 2021/01/28

Ubuntu20.10にElectron環境を構築したので書き留めておきます。

ちなみにだいぶ古いですがWindowsにインストールした記事は以下の通り。4年前の情報なので今も同じ内容かはわかりませんが。

HTML/Javascriptでデスクトップアプリが作れるElectron試した

HTML/Javascriptでデスクトップアプリが作れるElectronを試してみました。デスクトップアプリといえば、WindowsだとC#やJavaあたりが思い浮かぶところですが、HTMLとJavascriptで作るという発想は盲点ですね（昔から話題にはありましたが）。Web系とデスクトップ系が同じ言語に統合されるという点は注目の技術です。ElectronのインストールElectronを使うにはnode.jsのインストールが必要になります。node.jsのウェブサイトからnode.jsの安定板の４系をダウンロートしインストールしました。https://nodejs.org/en/ ダウンロード...

今回のインストール先はUbuntu20.10です。

1 Electron関連パッケージのインストール
2 プロジェクトの作成
3 package.jsonの編集
4 ソースコード
5 実行

Electron関連パッケージのインストール

Node.jsやnpmなどの関連パッケージを以下のコマンドでインストールします。

$ sudo apt install nodejs
$ sudo apt install npm
$ sudo apt install libappindicator1

Electron本体をインストールします。

$ sudo npm install electron -g

これで準備完了です。

プロジェクトの作成

■2021/1/28 追記■　ここの情報は古かったようなので以下の記事を参照ください。

http://pineplanter.moo.jp/non-it-salaryman/2021/01/28/electron-revise/

プロジェクトを作成します。

まずはプロジェクトを置くディレクトリ内で以下のコマンドを打ちます。

$ npm init

いろいろ聞いてくるので、まず最初はすべて]Enter]を押してデフォルトのままセットしてもいいと思います。注意する点としてpackage nameをelectronにすると後でエラーが出ます。デフォルトはフォルダ名が引き継がれますが事故らないようelectronというpackage名は（フォルダ名も）やめておきましょう。

package.jsonというファイルが生成されました。

次に以下のコマンドでElectronパッケージを取り込みます。

$ npm install electron

以下のようにpackage-lock.jsonというファイルとnode_modulesフォルダが生成されます。

package.jsonの編集

生成されたpackage.jsonを１行追加します。7行目の"start": "electron index.js",を追加します。※これからindex.jsを作ることが前提。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^11.2.1"
  }
}

ソースコード

package.jsonで指定したindex.jsは以下のように書きます。

"use strict";

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

// 全てのウィンドウが閉じたら終了
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});
// 実行時イベント
app.on('ready', function() {
  // ウィンドウサイズ
  mainWindow = new BrowserWindow({width: 800, height: 600});
  //初期ウィンドウファイル
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  // 終了イベント
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

アプリのUI部分となるindex.htnl（index.jsで指定）は、まずはこんな感じで簡単なものにしておきます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron Test</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>