LubuntuでElectronを実行

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

うちにLubuntuを入れた古いデスクトップPCが生きていたとさ
そこでこんな記事を見つける
Ubuntu DesktopにElectron環境を構築する


Lubuntuにnode環境があるかどうかを判別

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

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

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

まずcurlを入れるところから始まる

手順書通りに、

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

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

$ sudo apt-get install curl

curlが入ったら

nodebrewのインストール
$ 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
========================================

なんか入ったっぽい。

.nodebrewの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/user/.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  
...
(いっぱい出てくるので中略)  
...
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.jsを使える状態にする
$ 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: user
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": "user",
  "license": "ISC"
}
Is this ok? (yes) yes

yes、とちゃんと打たないといけません。

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

Electronの本体のinstall

下記にコマンドと実行結果も残しておく。

$ npm install electron-prebuilt@0.37.8 --save-dev
> electron-prebuilt@0.37.8 postinstall /home/user/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

以上、初めてLubuntuでElectronでhello world!!

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

疲れた。

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

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

参考記事


【Electronを】hello worldするまで【Lubuntu14.04で】」への1件のフィードバック

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください