いがにんのぼやき

若手WEBエンジニアのブログ。IT、WEB、バンド、アニメ。

ElectronをWindowsのBash(WSL)で試してみて成功しなかった

毎度毎度の失敗談。
Electronを試してみたいと思って、可能ならばWindowのBashとして機能するWindows Subsystem for Linux上で実行したいと思って試してみた。
結局動かなかったけど。
詳しい方がいたら情報求む。
一応記録として残しておく。

まずは公式サイトのクイックスタートを試してみる

そもそもNode.jsが入っていなかったのでインストール

$ sudo apt-get install -y nodejs npm

Node.jsのバージョン管理ツールであるnを使ってみます。

$ sudo npm install -g n

実行する前にBashを一度閉じて再起動しておきます。
そうしないとエラーが発生しました。

$ sudo n stable

     install : node-v9.4.0
       mkdir : /usr/local/n/versions/node/9.4.0
       fetch : https://nodejs.org/dist/v9.4.0/node-v9.4.0-linux-x64.tar.gz
######################################################################## 100.0%
   installed : v9.4.0
$ node -v
v9.4.0
$ which node
/usr/local/bin/node
$ npm -v
5.6.0
$ which npm
/usr/local/bin/npm
$

apt-getでインストールしたNode.jsとnpmは削除しておく。

$ sudo apt-get purge nodejs npm

Electronのサンプルアプリをcloneして実行してみる。

$  git clone https://github.com/electron/electron-quick-start
$ npm install && npm start

> electron@1.7.12 postinstall /mnt/d/Programming/JavaScript/electron-quick-start/node_modules/electron
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
added 152 packages in 43.837s

> electron-quick-start@1.0.0 start /mnt/d/Programming/JavaScript/electron-quick-start
> electron .

/mnt/d/Programming/JavaScript/electron-quick-start/node_modules/electron/dist/electron: error while loading shared libraries: libgtk-x11-2.0.so.0: cannot open shared object file: No such file or directory
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! electron-quick-start@1.0.0 start: `electron .`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the electron-quick-start@1.0.0 start 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!     /home/iganin/.npm/_logs/2018-02-10T14_29_04_074Z-debug.log

エラーが発生して実行が出来なかった。
ここからは延々と依存関係にあるパッケージをインストールしていくだけで、結局成功していないので注意

libgtk-x11-2.0.so.0: cannot open shared object file: No such file or directoryとあるのでインストールしてみるとエラーが変わった。

$ sudo apt-get install libgtkextra-dev

こんな感じで一つ一つ毎回エラーが変わって依存パッケージがないと出るのでそれが消えるまでインストールしていった。

存在しないと言われるファイル インストールしたパッケージ名
libX11-xcb.so.1 libx11-xcb-dev
libXtst.so.6 libxtst6
libXss.so.1 libxss1
libgconf-2.so.4 libgconf-2-4
libnss3.so libnss3-dev
libasound.so.2 libasound2

一部参考

github.com

上記をインストールしていったらエラーが出るがエラー詳細が出なくなり困った。

$ npm start

> electron-quick-start@1.0.0 start /mnt/d/Programming/JavaScript/electron-quick-start
> electron .

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron-quick-start@1.0.0 start: `electron .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron-quick-start@1.0.0 start 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!     /home/iganin/.npm/_logs/2018-02-10T14_59_57_523Z-debug.log

もうお手上げ状態。
下記のような記事を挙げている人がいて、上記のエラーと同等かは分からないが動作するようになっているらしい。

grugrut.hatenablog.jp

一度グローバルにElectronを入れてみる

一度グローバルにElectronコマンドをインストールしてそちらを叩けるか試してみた。

sudo npm install -g electron
$ sudo npm install -g electron
[sudo] password for iganin:
/usr/local/bin/electron -> /usr/local/lib/node_modules/electron/cli.js

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

/usr/local/lib/node_modules/electron/install.js:47
  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@1.8.2 postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron@1.8.2 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!     /home/iganin/.npm/_logs/2018-02-10T15_29_31_278Z-debug.log

エラーが発生した

sudo npm install -g electron --unsafe-perm=true --allow-root

これでインストールは出来た。
けどコマンドを実行しても何も表示されないという状況で謎。

結局

Windowsは難しい。
今度はWindows自体(Powershellとか)で実行できないか試してみようと思う。
WSLの問題なのかElectronの問題なのか・・・。
Windows関係、毎回失敗を繰り返しすぎて心が強くなっていくのを感じる。