うちに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でスクショを撮るのに苦労しましたｗｗｗｗ
疲れた。
このあとリリースビルドをする必要があるなど様々な手数が続きます。
詳しくはこちらを参考に。
Ubuntu DesktopにElectron環境を構築する