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

# うちにLubuntuを入れた古いデスクトップPCが生きていたとさ
そこでこんな記事を見つける
[Ubuntu DesktopにElectron環境を構築する](http://qiita.com/takanemu/items/47ff47fa19174438677d)


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

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

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

手順書通りに、

```shell-session
$ curl -L git.io/nodebrew | perl - setup
プログラム 'curl' はまだインストールされていません。 次のように入力することでインストールできます:
sudo apt-get install curl
```

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

```shell-session
$ 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.
```

![スクショ](http://i2.wp.com/takelab.sub.jp/wp-content/uploads/Screenshot-from-2016-08-17-212712.png?resize=700%2C438)

hello world!!

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

疲れた。

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

詳しくはこちらを参考に。
[Ubuntu DesktopにElectron環境を構築する](http://qiita.com/takanemu/items/47ff47fa19174438677d)