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

うちに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
% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
Dload  Upload   Total   Spent    Left  Speed
0     0    0     0    0     0      0      0 --:--:--  0:00:02 --:--:--     0
0     0    0     0    0     0      0      0 --:--:--  0:00:06 --:--:--     0
0     0    0     0    0     0      0      0 --:--:--  0:00:07 --:--:--     0
100 24340  100 24340    0     0   2470      0  0:00:09  0:00:09 --:--:--  9767
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew
========================================
Export a path to nodebrew:
export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

なんか入ったっぽい。

Export a path to nodebrew:

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

というメッセージ通りにPATHを通してやらなければならんらしい。
~/.profileの末尾に

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

を追加する作業をやる。

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

$ vi ~/.profile
$ source ~/.profile 
$ echo $PATH
/home/shtr_t/.nodebrew/current/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games

ほい。

そして

$ 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が使える状態じゃない。

$ 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$ 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の実装に入る
まず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.

Screenshot from 2016-08-17 21:27:12

hello world!!

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

疲れた。

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

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

http://qiita.com/takanemu/items/47ff47fa19174438677d

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です