ぼくだってブログ書くねん

意識向上を目指した意識高い系ブログです。本業はなんちゃって電気設計業務です。

RPi+Flask+ElectronなGUIアプリケーションの導入

目的

ラズパイ+Electronなアプリケーション作りたい!
PyQtとか使わなくてもゴージャスなWeb技術を利用してアプリ作成したい!

ってことで始めました。

タイトル通りRPi+Flask+ElectronでHello Worldまで行います。

【前提条件】
* RaspberryPi 3
* 古いnode.js導入済み
* Flask導入済み

まとめ

大筋Qiita キカガクのelectron導入編でいける

引っかかったところ

古いnode.jsのアップデート

pi@raspberrypi:~ $ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
pi@raspberrypi:~ $ sudo apt-get install -y nodejs

ラズパイ用の魔法のElectronのインストールコマンド

pi@raspberrypi:~ $ sudo npm install -g electron --unsafe-perm=true --allow-root

でいけるはず

作業記録

Qiita キカガクのelectron導入編をめっちゃ参考にしてます。

まずはnode.jsのバージョン確認。

pi@raspberrypi:~ $ node -v
v8.11.1

さっそくQiitaに従ってコマンドを打つ

pi@raspberrypi:~ $ sudo npm intall -g electron-prebuild
(node:1442) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
npm ERR! Error: Not found : electron-prebuild
npm ERR! at RegClient.<anonymous> (/usr/share/npm/node_modules/npm-registry-client/lib/request.js:300:14)
npm ERR! at Request._callback (/usr/share/npm/node_modules/npm-registry-client/lib/request.js:238:65)
npm ERR! at Request.self.callback (/usr/lib/nodejs/request/index.js:148:22)
npm ERR! at emitTwo (events.js:126:13)
npm ERR! at Request.emit (events.js:214:7)
npm ERR! at Request.<anonymous> (/usr/lib/nodejs/request/index.js:896:14)
npm ERR! at emitOne (events.js:121:20)
npm ERR! at Request.emit (events.js:211:7)
npm ERR! at IncomingMessage.<anonymous> (/usr/lib/nodejs/request/index.js:847:12)
npm ERR! at emitNone (events.js:111:20)
npm ERR! If you need help, you may report this *entire* log,
npm ERR! including the npm and node versions, at:
npm ERR! <http://github.com/npm/npm/issues>

npm ERR! System Linux 4.14.44-v7+
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install" "-g" "electron-prebuild"
npm ERR! cwd /home/pi
npm ERR! node -v v8.11.1
npm ERR! npm -v 1.4.21
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/pi/npm-debug.log
npm ERR! not ok code 0

なんかめっちゃエラー出る。
npmでエラーでているからnode.jsが問題っぽい
とりあえず、node.jsのバージョンアップをしてみる。
参考:https://qiita.com/Yorinton/items/00ad34f3f902ed41c12f

pi@raspberrypi:~ $ sudo n stable

 install : node-v10.8.0
 mkdir : /usr/local/n/versions/node/10.8.0
 fetch : https://nodejs.org/dist/v10.8.0/node-v10.8.0-linux-armv7l.tar.gz
######################################################################## 100.0%
 installed : v10.8.0

最新版が入ったらしい。
念の為、node.jsのバージョン確認

pi@raspberrypi:~ $ node -v
v8.11.1

え、なんかアップデートされてない

まあいいや。
とりあえず、もっかいelectronを入れてみる

pi@raspberrypi:~ $ sudo npm install electron -g
/usr/local/bin/electron -> /usr/local/lib/node_modules/electron/cli.js

> electron@2.0.8 postinstall /usr/local/lib/node_modules/electron
> node install.js

/usr/local/lib/node_modules/electron/install.js:54
throw err
^

Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/electron/.electron'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron@2.0.8 postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron@2.0.8 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-08-28T01_06_02_716Z-debug.log

なんかちょっとインストールしかけてエラー発生

node.jsの公式サイトの支持に従って最新版っぽいv10系をラズパイにいれてみよう
参考:https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions

pi@raspberrypi:~ $ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
pi@raspberrypi:~ $ sudo apt-get install -y nodejs
pi@raspberrypi:~ $ node -v
v10.9.0

今度こそ入ったっぽい( ^)o(^ )

もっかい

sudo npm install electron -g

打つも、さっきと同じエラーか。。。
「Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/electron/.electron'」
でググったら素晴らしき先人がいました。
参考:https://qiita.com/spadeloves/items/664b25353f9e9620a65f

pi@raspberrypi:~ $ sudo npm install -g electron --unsafe-perm=true --allow-root
/usr/local/bin/electron -> /usr/local/lib/node_modules/electron/cli.js

> electron@2.0.8 postinstall /usr/local/lib/node_modules/electron
> node install.js

Downloading SHASUMS256.txt
[============================================>] 100.0% of 5.33 kB (5.33 kB/s)
+ electron@2.0.8
added 149 packages from 126 contributors in 101.279s

pi@raspberrypi:~ $ electron -v
v2.0.8

おし!Electron導入成功だ!
Flask環境は導入済みなので(ラズパイでも問題なく入ります)
Qiita キカガクのelectron導入編を進められます。

ちゃんとラズパイでもハローワールドができました!
f:id:nbk01409:20180829230842j:plain 今日は以上!