Edited at

【Electronを】hello worldするまで【Lubuntu14.04で】

More than 3 years have passed since last update.


うちにLubuntuを入れた古いデスクトップPCが生きていたとさ

そこでこんな記事を見つける

Ubuntu DesktopにElectron環境を構築する


何はともあれ手順通りにやる

$ node -v

プログラム 'node' は以下のパッケージで見つかりました:
* node
* nodejs-legacy

LubuntuにはそもそもNode.jsが入っていないことを確認

手順書通りに、

$ curl -L git.io/nodebrew | perl - setup

プログラム 'curl' はまだインストールされていません。 次のように入力することでインストールできます:
sudo apt-get install curl

はい、そもそもcurlが入っていません。入れます。

$ sudo apt-get install curl

入ったら



$ curl -L git.io/nodebrew | perl - setup

なんか入ったっぽい。

Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH

というメッセージ通りにPATHを通してやらなければならんらしい。

~/.profileの末尾に

export PATH=$HOME/.nodebrew/current/bin:$PATH

を追加する作業をやる。

echoしてpathが通ってるかも確認する。

そして

$ nodebrew ls-remote

v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6

v0.1.0 v0.1.1 v0.1.2 v0.1.3 v0.1.4 v0.1.5 v0.1.6 v0.1.7
v0.1.8 v0.1.9 v0.1.10 v0.1.11 v0.1.12 v0.1.13 v0.1.14 v0.1.15
v0.1.16 v0.1.17 v0.1.18 v0.1.19 v0.1.20 v0.1.21 v0.1.22 v0.1.23
v0.1.24 v0.1.25 v0.1.26 v0.1.27 v0.1.28 v0.1.29 v0.1.30 v0.1.31
v0.1.32 v0.1.33 v0.1.90 v0.1.91 v0.1.92 v0.1.93 v0.1.94 v0.1.95
v0.1.96 v0.1.97 v0.1.98 v0.1.99 v0.1.100 v0.1.101 v0.1.102 v0.1.103
v0.1.104

v0.2.0 v0.2.1 v0.2.2 v0.2.3 v0.2.4 v0.2.5 v0.2.6

v0.3.0 v0.3.1 v0.3.2 v0.3.3 v0.3.4 v0.3.5 v0.3.6 v0.3.7
v0.3.8

v0.4.0 v0.4.1 v0.4.2 v0.4.3 v0.4.4 v0.4.5 v0.4.6 v0.4.7
v0.4.8 v0.4.9 v0.4.10 v0.4.11 v0.4.12

v0.5.0 v0.5.1 v0.5.2 v0.5.3 v0.5.4 v0.5.5 v0.5.6 v0.5.7
v0.5.8 v0.5.9 v0.5.10

v0.6.0 v0.6.1 v0.6.2 v0.6.3 v0.6.4 v0.6.5 v0.6.6 v0.6.7
v0.6.8 v0.6.9 v0.6.10 v0.6.11 v0.6.12 v0.6.13 v0.6.14 v0.6.15
v0.6.16 v0.6.17 v0.6.18 v0.6.19 v0.6.20 v0.6.21

v0.7.0 v0.7.1 v0.7.2 v0.7.3 v0.7.4 v0.7.5 v0.7.6 v0.7.7
v0.7.8 v0.7.9 v0.7.10 v0.7.11 v0.7.12

v0.8.0 v0.8.1 v0.8.2 v0.8.3 v0.8.4 v0.8.5 v0.8.6 v0.8.7
v0.8.8 v0.8.9 v0.8.10 v0.8.11 v0.8.12 v0.8.13 v0.8.14 v0.8.15
v0.8.16 v0.8.17 v0.8.18 v0.8.19 v0.8.20 v0.8.21 v0.8.22 v0.8.23
v0.8.24 v0.8.25 v0.8.26 v0.8.27 v0.8.28

v0.9.0 v0.9.1 v0.9.2 v0.9.3 v0.9.4 v0.9.5 v0.9.6 v0.9.7
v0.9.8 v0.9.9 v0.9.10 v0.9.11 v0.9.12

v0.10.0 v0.10.1 v0.10.2 v0.10.3 v0.10.4 v0.10.5 v0.10.6 v0.10.7
v0.10.8 v0.10.9 v0.10.10 v0.10.11 v0.10.12 v0.10.13 v0.10.14 v0.10.15
v0.10.16 v0.10.17 v0.10.18 v0.10.19 v0.10.20 v0.10.21 v0.10.22 v0.10.23
v0.10.24 v0.10.25 v0.10.26 v0.10.27 v0.10.28 v0.10.29 v0.10.30 v0.10.31
v0.10.32 v0.10.33 v0.10.34 v0.10.35 v0.10.36 v0.10.37 v0.10.38 v0.10.39
v0.10.40 v0.10.41 v0.10.42 v0.10.43 v0.10.44 v0.10.45 v0.10.46

v0.11.0 v0.11.1 v0.11.2 v0.11.3 v0.11.4 v0.11.5 v0.11.6 v0.11.7
v0.11.8 v0.11.9 v0.11.10 v0.11.11 v0.11.12 v0.11.13 v0.11.14 v0.11.15
v0.11.16

v0.12.0 v0.12.1 v0.12.2 v0.12.3 v0.12.4 v0.12.5 v0.12.6 v0.12.7
v0.12.8 v0.12.9 v0.12.10 v0.12.11 v0.12.12 v0.12.13 v0.12.14 v0.12.15

v4.0.0 v4.1.0 v4.1.1 v4.1.2 v4.2.0 v4.2.1 v4.2.2 v4.2.3
v4.2.4 v4.2.5 v4.2.6 v4.3.0 v4.3.1 v4.3.2 v4.4.0 v4.4.1
v4.4.2 v4.4.3 v4.4.4 v4.4.5 v4.4.6 v4.4.7 v4.5.0

v5.0.0 v5.1.0 v5.1.1 v5.2.0 v5.3.0 v5.4.0 v5.4.1 v5.5.0
v5.6.0 v5.7.0 v5.7.1 v5.8.0 v5.9.0 v5.9.1 v5.10.0 v5.10.1
v5.11.0 v5.11.1 v5.12.0

v6.0.0 v6.1.0 v6.2.0 v6.2.1 v6.2.2 v6.3.0 v6.3.1 v6.4.0

io@v1.0.0 io@v1.0.1 io@v1.0.2 io@v1.0.3 io@v1.0.4 io@v1.1.0 io@v1.2.0 io@v1.3.0
io@v1.4.1 io@v1.4.2 io@v1.4.3 io@v1.5.0 io@v1.5.1 io@v1.6.0 io@v1.6.1 io@v1.6.2
io@v1.6.3 io@v1.6.4 io@v1.7.1 io@v1.8.1 io@v1.8.2 io@v1.8.3 io@v1.8.4

io@v2.0.0 io@v2.0.1 io@v2.0.2 io@v2.1.0 io@v2.2.0 io@v2.2.1 io@v2.3.0 io@v2.3.1
io@v2.3.2 io@v2.3.3 io@v2.3.4 io@v2.4.0 io@v2.5.0

io@v3.0.0 io@v3.1.0 io@v3.2.0 io@v3.3.0 io@v3.3.1

最新はv6.4.0らしい。

qiitaの手順に従い

$ nodebrew install-binary v6.4.0

Fetching: https://nodejs.org/dist/v6.4.0/node-v6.4.0-linux-x86.tar.gz
######################################################################## 100.0%
Installed successfully

成功

でもまだこれではnodeが使える状態じゃない。


nodeを使えるようにする

$ nodebrew ls

v6.4.0

current: none

current:noneはまだnodeが使える状態じゃないらしい。



$ nodebrew use v6.4.0

use v6.4.0

shotaro@shotaro-lubuntu:~$ node -v

v6.4.0



これでやあああああっとnode.jsが使えるようになった。

ホームディレクトリには以前にdevディレクトリを掘ってあったのでそれを利用して更に環境を整えていく。


環境を整えます

ホームディレクトリには以前にdevディレクトリを掘ってあったのでそれを利用して更に環境を整えていく。

~/dev$ mkdir nodejs

~/dev$ ls
go nodejs

で、cd nodejs

(ここまで書いてて結構記録残しながら書くのだるいなと思えてきた)

~/dev/nodejs$ 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> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (nodejs) my1stelectronproject
version: (1.0.0) 0.0.0
description: this is 1st electron project.
entry point: (index.js)
test command:
git repository:
keywords:
author: shtr_t
license: (ISC)
About to write to /home/shtr_t/dev/nodejs/package.json:

{
"name": "my1stelectronproject",
"version": "0.0.0",
"description": "this is 1st electron project.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "shtr_t",
"license": "ISC"
}
Is this ok? (yes) yes

はい。

ここからようやくElectron環境の構築に入る。


Electronの本体のinstall

$ npm install electron-prebuilt@0.37.8 --save-dev

> electron-prebuilt@0.37.8 postinstall /home/shtr_t/dev/nodejs/node_modules/electron-prebuilt
> node install.js

Downloading electron-v0.37.8-linux-ia32.zip
[============================================>] 100.0% of 40.11 MB (4.22 MB/s)
my1stelectronproject@0.0.0 /home/shtr_t/dev/nodejs
└─┬ electron-prebuilt@0.37.8
├─┬ electron-download@2.1.2
│ ├─┬ debug@2.2.0
│ │ └── ms@0.7.1
│ ├── home-path@1.0.3
│ ├── minimist@1.2.0
│ ├─┬ mkdirp@0.5.1
│ │ └── minimist@0.0.8
│ ├─┬ mv@2.1.1
│ │ ├── ncp@2.0.0
│ │ └─┬ rimraf@2.4.5
│ │ └─┬ glob@6.0.4
│ │ ├─┬ inflight@1.0.5
│ │ │ └── wrappy@1.0.2
│ │ ├─┬ minimatch@3.0.3
│ │ │ └─┬ brace-expansion@1.1.6
│ │ │ ├── balanced-match@0.4.2
│ │ │ └── concat-map@0.0.1
│ │ ├── once@1.3.3
│ │ └── path-is-absolute@1.0.0
│ ├─┬ nugget@1.6.2
│ │ ├─┬ pretty-bytes@1.0.4
│ │ │ ├── get-stdin@4.0.1
│ │ │ └─┬ meow@3.7.0
│ │ │ ├─┬ camelcase-keys@2.1.0
│ │ │ │ └── camelcase@2.1.1
│ │ │ ├── decamelize@1.2.0
│ │ │ ├─┬ loud-rejection@1.6.0
│ │ │ │ ├─┬ currently-unhandled@0.4.1
│ │ │ │ │ └── array-find-index@1.0.1
│ │ │ │ └── signal-exit@3.0.0
│ │ │ ├── map-obj@1.0.1
│ │ │ ├─┬ normalize-package-data@2.3.5
│ │ │ │ ├── hosted-git-info@2.1.5
│ │ │ │ ├─┬ is-builtin-module@1.0.0
│ │ │ │ │ └── builtin-modules@1.1.1
│ │ │ │ ├── semver@5.3.0
│ │ │ │ └─┬ validate-npm-package-license@3.0.1
│ │ │ │ ├─┬ spdx-correct@1.0.2
│ │ │ │ │ └── spdx-license-ids@1.2.2
│ │ │ │ └─┬ spdx-expression-parse@1.0.2
│ │ │ │ └── spdx-exceptions@1.0.5
│ │ │ ├── object-assign@4.1.0
│ │ │ ├─┬ read-pkg-up@1.0.1
│ │ │ │ ├─┬ find-up@1.1.2
│ │ │ │ │ └── path-exists@2.1.0
│ │ │ │ └─┬ read-pkg@1.1.0
│ │ │ │ ├─┬ load-json-file@1.1.0
│ │ │ │ │ ├── graceful-fs@4.1.5
│ │ │ │ │ ├─┬ parse-json@2.2.0
│ │ │ │ │ │ └─┬ error-ex@1.3.0
│ │ │ │ │ │ └── is-arrayish@0.2.1
│ │ │ │ │ ├── pify@2.3.0
│ │ │ │ │ └─┬ strip-bom@2.0.0
│ │ │ │ │ └── is-utf8@0.2.1
│ │ │ │ └── path-type@1.1.0
│ │ │ ├─┬ redent@1.0.0
│ │ │ │ ├─┬ indent-string@2.1.0
│ │ │ │ │ └─┬ repeating@2.0.1
│ │ │ │ │ └─┬ is-finite@1.0.1
│ │ │ │ │ └── number-is-nan@1.0.0
│ │ │ │ └── strip-indent@1.0.1
│ │ │ └── trim-newlines@1.0.0
│ │ ├─┬ progress-stream@1.2.0
│ │ │ ├── speedometer@0.1.4
│ │ │ └─┬ through2@0.2.3
│ │ │ ├─┬ readable-stream@1.1.14
│ │ │ │ └── isarray@0.0.1
│ │ │ └─┬ xtend@2.1.2
│ │ │ └── object-keys@0.4.0
│ │ ├─┬ request@2.74.0
│ │ │ ├── aws-sign2@0.6.0
│ │ │ ├── aws4@1.4.1
│ │ │ ├─┬ bl@1.1.2
│ │ │ │ └─┬ readable-stream@2.0.6
│ │ │ │ └── isarray@1.0.0
│ │ │ ├── caseless@0.11.0
│ │ │ ├─┬ combined-stream@1.0.5
│ │ │ │ └── delayed-stream@1.0.0
│ │ │ ├── extend@3.0.0
│ │ │ ├── forever-agent@0.6.1
│ │ │ ├─┬ form-data@1.0.0-rc4
│ │ │ │ └── async@1.5.2
│ │ │ ├─┬ har-validator@2.0.6
│ │ │ │ ├─┬ chalk@1.1.3
│ │ │ │ │ ├── ansi-styles@2.2.1
│ │ │ │ │ ├── escape-string-regexp@1.0.5
│ │ │ │ │ ├─┬ has-ansi@2.0.0
│ │ │ │ │ │ └── ansi-regex@2.0.0
│ │ │ │ │ ├── strip-ansi@3.0.1
│ │ │ │ │ └── supports-color@2.0.0
│ │ │ │ ├─┬ commander@2.9.0
│ │ │ │ │ └── graceful-readlink@1.0.1
│ │ │ │ ├─┬ is-my-json-valid@2.13.1
│ │ │ │ │ ├── generate-function@2.0.0
│ │ │ │ │ ├─┬ generate-object-property@1.2.0
│ │ │ │ │ │ └── is-property@1.0.2
│ │ │ │ │ ├── jsonpointer@2.0.0
│ │ │ │ │ └── xtend@4.0.1
│ │ │ │ └─┬ pinkie-promise@2.0.1
│ │ │ │ └── pinkie@2.0.4
│ │ │ ├─┬ hawk@3.1.3
│ │ │ │ ├── boom@2.10.1
│ │ │ │ ├── cryptiles@2.0.5
│ │ │ │ ├── hoek@2.16.3
│ │ │ │ └── sntp@1.0.9
│ │ │ ├─┬ http-signature@1.1.1
│ │ │ │ ├── assert-plus@0.2.0
│ │ │ │ ├─┬ jsprim@1.3.0
│ │ │ │ │ ├── extsprintf@1.0.2
│ │ │ │ │ ├── json-schema@0.2.2
│ │ │ │ │ └── verror@1.3.6
│ │ │ │ └─┬ sshpk@1.9.2
│ │ │ │ ├── asn1@0.2.3
│ │ │ │ ├── assert-plus@1.0.0
│ │ │ │ ├─┬ dashdash@1.14.0
│ │ │ │ │ └── assert-plus@1.0.0
│ │ │ │ ├── ecc-jsbn@0.1.1
│ │ │ │ ├─┬ getpass@0.1.6
│ │ │ │ │ └── assert-plus@1.0.0
│ │ │ │ ├── jodid25519@1.0.2
│ │ │ │ ├── jsbn@0.1.0
│ │ │ │ └── tweetnacl@0.13.3
│ │ │ ├── is-typedarray@1.0.0
│ │ │ ├── isstream@0.1.2
│ │ │ ├── json-stringify-safe@5.0.1
│ │ │ ├─┬ mime-types@2.1.11
│ │ │ │ └── mime-db@1.23.0
│ │ │ ├── node-uuid@1.4.7
│ │ │ ├── oauth-sign@0.8.2
│ │ │ ├── qs@6.2.1
│ │ │ ├── stringstream@0.0.5
│ │ │ ├── tough-cookie@2.3.1
│ │ │ └── tunnel-agent@0.4.3
│ │ ├── single-line-log@0.4.1
│ │ └── throttleit@0.0.2
│ ├── path-exists@1.0.0
│ └─┬ rc@1.1.6
│ ├── deep-extend@0.4.1
│ ├── ini@1.3.4
│ └── strip-json-comments@1.0.4
└─┬ extract-zip@1.5.0
├─┬ concat-stream@1.5.0
│ ├── inherits@2.0.1
│ ├─┬ readable-stream@2.0.6
│ │ ├── core-util-is@1.0.2
│ │ ├── isarray@1.0.0
│ │ ├── process-nextick-args@1.0.7
│ │ ├── string_decoder@0.10.31
│ │ └── util-deprecate@1.0.2
│ └── typedarray@0.0.6
├── debug@0.7.4
├─┬ mkdirp@0.5.0
│ └── minimist@0.0.8
└─┬ yauzl@2.4.1
└─┬ fd-slicer@1.0.1
└── pend@1.2.0

npm WARN my1stelectronproject@0.0.0 No repository field.

最後に警告が出たのはあとで調べるとして、多分大丈夫なので進む。

リリース用のアプリケーションを出力するelectron-packagerをインストール

~/dev/nodejs$ npm install electron-packager@7.0.1 --save-dev

my1stelectronproject@0.0.0 /home/shtr_t/dev/nodejs
└─┬ electron-packager@7.0.1
├─┬ asar@0.11.0
│ ├── chromium-pickle-js@0.1.0
│ ├── cuint@0.2.1
│ └─┬ mksnapshot@0.3.0
│ ├─┬ decompress-zip@0.3.0
│ │ ├─┬ binary@0.3.0
│ │ │ ├── buffers@0.1.1
│ │ │ └─┬ chainsaw@0.1.0
│ │ │ └── traverse@0.3.9
│ │ ├── mkpath@0.1.0
│ │ ├─┬ nopt@3.0.6
│ │ │ └── abbrev@1.0.9
│ │ ├── q@1.4.1
│ │ └─┬ touch@0.0.3
│ │ └── nopt@1.0.10
│ └─┬ request@2.55.0
│ ├── aws-sign2@0.5.0
│ ├─┬ bl@0.9.5
│ │ └── readable-stream@1.0.34
│ ├── caseless@0.9.0
│ ├─┬ combined-stream@0.0.7
│ │ └── delayed-stream@0.0.5
│ ├─┬ form-data@0.2.0
│ │ └── async@0.9.2
│ ├─┬ har-validator@1.8.0
│ │ └── bluebird@2.10.2
│ ├── hawk@2.3.1
│ ├─┬ http-signature@0.10.1
│ │ ├── asn1@0.1.11
│ │ ├── assert-plus@0.1.5
│ │ └── ctype@0.5.3
│ ├─┬ mime-types@2.0.14
│ │ └── mime-db@1.12.0
│ ├── oauth-sign@0.6.0
│ └── qs@2.4.2
├── electron-osx-sign@0.3.1
├─┬ fs-extra@0.26.7
│ ├── jsonfile@2.3.1
│ └── klaw@1.3.0
├─┬ get-package-info@0.0.2
│ ├── bluebird@3.4.1
│ └── lodash.get@4.4.2
├─┬ plist@1.2.0
│ ├── base64-js@0.0.8
│ ├─┬ xmlbuilder@4.0.0
│ │ └── lodash@3.10.1
│ └── xmldom@0.1.22
├── rcedit@0.5.1
├── resolve@1.1.7
└── run-series@1.1.4

npm WARN my1stelectronproject@0.0.0 No repository field.

また警告でたけど無視。

scriptsの部分にbuildコマンドを記述しなければならない。

scriptsの項目に

“build”:”node_modules/.bin/electron .”,

を追記する

~/dev/nodejs$ vi package.json

{
"name": "my1stelectronproject",
"version": "0.0.0",
"description": "this is 1st electron project.",
"main": "index.js",
"scripts": {
"build":"node_modules/.bin/electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "shtr_t",
"license": "ISC",
"devDependencies": {
"electron-packager": "^7.0.1",
"electron-prebuilt": "^0.37.8"
}
}


やっとElectronする

やーっとelectronの実装に入る

まずindex.htmlを。

~/dev/nodejs$ vi index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DemoApp</title>
<meta name="description" content="">
<meta name="keywords" content=""/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="app" ng-controller="RootCtrl as root">
<h1>hello world</h1>
</body>
</html>

~/dev/nodejs$ vi index.js

var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();
var mainWindow = null;
app.on('window-all-closed', function () {
//if (process.platform != 'darwin')
app.quit();
});
app.on('ready', function () {
// ブラウザ(Chromium)の起動, 初期画面のロード
mainWindow = new BrowserWindow({
width: 1000,
height: 600
});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.on('closed', function () {
mainWindow = null;
});
});

うへぇここま45分(この記事書きながらだから)

で,ようやっと実行!!

~/dev/nodejs$ npm run build

> my1stelectronproject@0.0.0 build /home/shtr_t/dev/nodejs
> electron .

(electron) companyName is now a required option to crashReporter.start
(electron) loadUrl is deprecated. Use loadURL instead.

hello world!!

最後ubuntuでスクショを撮るのに苦労しましたwwww

疲れた。

このあとリリースビルドをする必要があるなど様々な手数が続きます。

詳しくはこちらを参考に。

Ubuntu DesktopにElectron環境を構築する