app

Electronは、Web技術でデスクトップアプリケーションをつくることができるフレームワーク

Electron | Build cross platform desktop apps with JavaScript, HTML, and CSS.

appオブジェクトは、アプリケーションライフサイクルを管理する。

app | Electron

とりあえずElectronを試してみる。

まず、アプリのディレクトリを作ったら、npm initでpackage.jsonをつくる。

$ pwd
/home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (app_) app_
version: (1.0.0) 1.0.0
description: electron sample
entry point: (index.js) main.js
test command: start
git repository: -
keywords: -
author: B.G
license: (ISC) MIT
About to write to
/home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_/package.json:

{
  "name": "app_",
  "version": "1.0.0",
  "description": "electron sample",
  "main": "main.js",
  "scripts": {
    "test": "start"
  },
  "repository": {
    "type": "git",
    "url": "-"
  },
  "keywords": [
    "-"
  ],
  "author": "B.G",
  "license": "MIT"
}


Is this OK? (yes) yes
$

まだ少し修正する部分が残ってるので、それは後で編集する。
index.jsではなく、main.jsにしている。
main.jsは、

app.onでイベントごとに、どういう処理をするかを定義している。
'ready'で、ウィンドウ作成とか、index.htmlを読み込むとか。

index.htmlは、

process.versions.electronはElectronのバージョンを指す。
これをdocument.writeで出力。
あとは"ABCDE"と書いてあるHTMLページ。

package.jsonは、

"scripts"のところの、"start"に"electron ."を指定する。
これで、npmから起動できる。

いよいよ、Electronをインストールする。
npm install electronで、

$ ls
package.json
$ vi main.js
$ vi index.html
$ ls
index.html  main.js  package.json
$ vi package.json
$ npm install electron

> electron@4.0.6 postinstall /home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_/node_modules/electron
> node install.js

Downloading tmp-3567-1-SHASUMS256.txt-4.0.6
[============================================>] 100.0% of 4.74 kB (4.74 kB/s)
npm notice created a lockfile as package-lock.json. You should commit this file.
+ electron@4.0.6
added 145 packages from 140 contributors and audited 201 packages in 72.441s
found 0 vulnerabilities



   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │       New minor version of npm available! 6.4.1 → 6.8.0       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.8.0   │
   │               Run npm install -g npm to update!               │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯

$

Expressと同様、ローカルインストールの方が安全なのでいいとおもう。

これで、npm startで実行しようとしたら、

$ npm start

> app_@1.0.0 start /home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_
> electron .

/home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_/node_modules/electron/dist/electron:
error while loading shared libraries: libXss.so.1: cannot open shared
object file: No such file or directory
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! app_@1.0.0 start: `electron .`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the app_@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/bg1/.npm/_logs/2019-03-04T14_18_14_340Z-debug.log
$

謎のエラー・・・。
macだと、すんなり実行できたのだが・・・。
色々調べると、

Fails to run, libXss.so.1 missing on Fedora 25 · Issue #835 · balena-io/etcher · GitHub

ということらしいので、libXScrnSaver-develを入れてみる。

$ sudo dnf install libXScrnSaver-devel
メタデータの期限切れの最終確認: x:xx:xx 時間前の xxxx年xx月xx日 xx時xx分xx秒 に実施しました。
依存関係が解決しました。
===================================================================================================================================================
 パッケージ                                 アーキテクチャー             バージョン
                       リポジトリ                   サイズ
===================================================================================================================================================
インストール:
 libXScrnSaver-devel                        x86_64
  1.2.3-2.fc29                           fedora
17 k
依存関係をインストール中:
 libX11-devel                               x86_64
  1.6.6-1.fc29                           fedora
974 k
 libXScrnSaver                              x86_64
  1.2.3-2.fc29                           fedora
24 k
 libXau-devel                               x86_64
  1.0.8-14.fc29                          fedora
14 k
 libXext-devel                              x86_64
  1.3.3-10.fc29                          fedora
73 k
 libxcb-devel                               x86_64
  1.13.1-1.fc29                          fedora
1.1 M
 xorg-x11-proto-devel                       noarch
  2018.4-2.fc29                          fedora
280 k

トランザクションの概要
===================================================================================================================================================
インストール  7 パッケージ

ダウンロードサイズの合計: 2.4 M
インストール済みのサイズ: 5.5 M
これでよろしいですか? [y/N]: y
パッケージのダウンロード中です:
(1/7): libXScrnSaver-devel-1.2.3-2.fc29.x86_64.rpm
                                            7.9 kB/s |  17 kB
00:02
(2/7): libX11-devel-1.6.6-1.fc29.x86_64.rpm
                                            404 kB/s | 974 kB
00:02
(3/7): libXScrnSaver-1.2.3-2.fc29.x86_64.rpm
                                            9.7 kB/s |  24 kB
00:02
(4/7): libXau-devel-1.0.8-14.fc29.x86_64.rpm
                                             22 kB/s |  14 kB
00:00
(5/7): libXext-devel-1.3.3-10.fc29.x86_64.rpm
                                            130 kB/s |  73 kB
00:00
(6/7): libxcb-devel-1.13.1-1.fc29.x86_64.rpm
                                            879 kB/s | 1.1 MB
00:01
(7/7): xorg-x11-proto-devel-2018.4-2.fc29.noarch.rpm
                                            307 kB/s | 280 kB
00:00
---------------------------------------------------------------------------------------------------------------------------------------------------
合計
                                          548 kB/s | 2.4 MB     00:04
トランザクションの確認を実行中
トランザクションの確認に成功しました。
トランザクションのテストを実行中
トランザクションのテストに成功しました。
トランザクションを実行中
  準備             :

1/1
Installed: xorg-x11-proto-devel-2018.4-2.fc29.noarch
  インストール中   : xorg-x11-proto-devel-2018.4-2.fc29.noarch
                                                                 1/7
Installed: xorg-x11-proto-devel-2018.4-2.fc29.noarch
Installed: libXau-devel-1.0.8-14.fc29.x86_64
  インストール中   : libXau-devel-1.0.8-14.fc29.x86_64
                                                                 2/7
Installed: libXau-devel-1.0.8-14.fc29.x86_64
Installed: libxcb-devel-1.13.1-1.fc29.x86_64
  インストール中   : libxcb-devel-1.13.1-1.fc29.x86_64
                                                                 3/7
Installed: libxcb-devel-1.13.1-1.fc29.x86_64
Installed: libX11-devel-1.6.6-1.fc29.x86_64
  インストール中   : libX11-devel-1.6.6-1.fc29.x86_64
                                                                 4/7
Installed: libX11-devel-1.6.6-1.fc29.x86_64
Installed: libXext-devel-1.3.3-10.fc29.x86_64
  インストール中   : libXext-devel-1.3.3-10.fc29.x86_64
                                                                 5/7
Installed: libXext-devel-1.3.3-10.fc29.x86_64
Installed: libXScrnSaver-1.2.3-2.fc29.x86_64
  インストール中   : libXScrnSaver-1.2.3-2.fc29.x86_64
                                                                 6/7
Installed: libXScrnSaver-1.2.3-2.fc29.x86_64
Installed: libXScrnSaver-devel-1.2.3-2.fc29.x86_64
  インストール中   : libXScrnSaver-devel-1.2.3-2.fc29.x86_64
                                                                 7/7
Installed: libXScrnSaver-devel-1.2.3-2.fc29.x86_64
  scriptletの実行中: libXScrnSaver-devel-1.2.3-2.fc29.x86_64

7/7
  検証             : libX11-devel-1.6.6-1.fc29.x86_64

1/7
  検証             : libXScrnSaver-1.2.3-2.fc29.x86_64

2/7
  検証             : libXScrnSaver-devel-1.2.3-2.fc29.x86_64

3/7
  検証             : libXau-devel-1.0.8-14.fc29.x86_64

4/7
  検証             : libXext-devel-1.3.3-10.fc29.x86_64

5/7
  検証             : libxcb-devel-1.13.1-1.fc29.x86_64

6/7
  検証             : xorg-x11-proto-devel-2018.4-2.fc29.noarch

7/7

インストール済み:
  libXScrnSaver-devel-1.2.3-2.fc29.x86_64
libX11-devel-1.6.6-1.fc29.x86_64
libXScrnSaver-1.2.3-2.fc29.x86_64
  libXau-devel-1.0.8-14.fc29.x86_64
libXext-devel-1.3.3-10.fc29.x86_64
libxcb-devel-1.13.1-1.fc29.x86_64
  xorg-x11-proto-devel-2018.4-2.fc29.noarch

完了しました!
$

ということで、改めて実行。

$ npm start

> app_@1.0.0 start /home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_
> electron .

これで待ち受け状態となり、

Electron
Electron

このように表示される。

Sample/electron/app/app/src/app_ at master · bg1bgst333/Sample · GitHub