はじめに

  • Electron が面白そうなのでやってみたい!
  • 開発環境はいつもは Windows を使っているけれど、Linux も使えるようになりたい(現スキル:初心者に毛が生えた程度)

環境

  • Windows Subsystem for Linux (Ubuntu 16.04.4 LTS)

やったこと

Ubuntu のパッケージマネージャには aptapt-get というのがあるみたいだけど、apt の方が新しいらしいのでこっちを使う。
とりあえず更新してみる。

apt パッケージ一覧更新

$ sudo apt update

apt パッケージ更新

$ sudo apt upgrade

node.js インストール

$ sudo apt install nodejs

npm インストール

$ sudo apt install npm

electron インストール

$ npm install electron

ファッ!?

> electron@1.8.3 postinstall /mnt/c/node_modules/electron
> node install.js

postinstall:extract-zip   ▀ ╢██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████░░░░░░░░░░░░░░░sh: 1: node: not found
postinstall:extract-zip   ▀ ╢██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████░░░░░░░░░░░░░░░postinstall → rollbackFai ▌ ╢██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████░░░░░░░░░░░░░░ postinstall → rollbackFai ▀ ╢██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████░░░░░░░░░░░░░░ runTopLevelLifecycles     ▌ ╢███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████░░░░ /mnt/c
└── gulp@3.9.1

runTopLevelLifecycles     ▌ ╢███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████░░░░ npm WARN enoent ENOENT: no such file or directory, open '/mnt/c/package.json'
runTopLevelLifecycles     ▀ ╢███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████░░░░ npm WARN c No description
runTopLevelLifecycles     ▐ ╢███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████░░░░ npm WARN c No repository field.
runTopLevelLifecycles     ▄ ╢███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████░░░░ npm WARN c No README data
runTopLevelLifecycles     ▌ ╢███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████░░░░ npm WARN c No license field.
runTopLevelLifecycles     ▀ ╢███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████░░░░ npm ERR! Linux 4.4.0-43-Microsoft
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "electron"
npm ERR! node v4.2.6
npm ERR! npm  v3.5.2
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

npm ERR! electron@1.8.3 postinstall: `node install.js`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the electron@1.8.3 postinstall script 'node install.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the electron package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node install.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs electron
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls electron
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /mnt/c/work/electron/npm-debug.log

どうやら node コマンドがないらしい・・・
nodejs ではなく nodejs-legacy の方をインストールした方がよかったみたいだ。

更に調査の過程で nvm なるものを知った。イマドキはこれを使ったほうがいいらしいのでやってみる。
GitHub - creationix/nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions

その前に nodejs npm を一旦アンインストール。

$ sudo apt remove nodejs
$ sudo apt remove npm

改めて nvm をインストール。これは apt じゃないんやね。

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

インストールできたら、一旦シェルを再起動する。
確認。

$ nvm -v

インストール可能なバージョン一覧をみる。

$ nvm ls-remote

適当なバージョンをインストール。

$ nvm install 8.10.0

OK!

$ node -v
v8.10.0

npm も一緒にインストールされた。

$ npm -v
5.6.0

プロジェクトディレクトリを作成。
Windows でディレクトリ作成してシンボリックリンクを作ることにする。
Windows の C ドライブは /mnt/c/ にマウントされているようなので、シンボリックリンクを作る。

$ ln -s /mnt/c/work/electron

中に移動し、いよいよ Electron をインストール。

$ npm install --save-dev electron

--save-devpackage.jsondevDependencies に依存関係を追加するため。開発時にだけ必要となる依存関係はここに記述するらしい。(オプションを付けないとただの dependencies に追加されるっぽい。そっちはユーザーとして使う時に必要な依存関係。)

結果、一応インストールはできたっぽい。いくつか警告出とるけど・・・

> electron@1.8.3 postinstall /mnt/c/node_modules/electron
> node install.js

Downloading SHASUMS256.txt
[============================================>] 100.0% of 3.43 kB (3.43 kB/s)
npm WARN saveError ENOENT: no such file or directory, open '/mnt/c/package.json'
npm WARN saveError EACCES: permission denied, open '/mnt/c/package-lock.json.1559205453'
npm WARN enoent ENOENT: no such file or directory, open '/mnt/c/package.json'
npm WARN c No description
npm WARN c No repository field.
npm WARN c No README data
npm WARN c No license field.

+ electron@1.8.3
added 138 packages in 161.151s

/mnt/c/ 直下に package.json とか package-lock.json とか作成しようとしてできなかったと言ってる・・・
なにかがおかしい。/mnt/c/ がプロジェクトのディレクトリと認識されている?
そういえば Windows の方には Windows 版 Node.js をインストールしていた。なにかで競合している?
また、プロジェクトのディレクトリ名が electron で、インストールしようとしているのも electron なので、重複しててマズい感じもする。

ちょっと一旦リセットして別のディレクトリでやる。
別ディレクトリ electron-camp を作成して(シンボリックリンクではなく直接)移動し、

npm を初期化。(そういえばさっきは初期化してなかった・・・)

$ npm init

今度こそ Electron インストール。

$ npm install --save-dev electron

description がない等の警告はあるが、他は問題なさそう。

> electron@1.8.3 postinstall /mnt/c/work/electron-camp/node_modules/electron
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN electron-camp@1.0.0 No description
npm WARN electron-camp@1.0.0 No repository field.

+ electron@1.8.3
added 153 packages in 11.591s

Windows 側で確認したらちゃんとファイルもできていた。

作業しやすくするため、ホームディレクトリに戻ってシンボリックリンク作成しておく。

$ ln -s /mnt/c/work/electron-camp/

これで準備完了!

ここからのコーディングは Windows 側でやれる。
どんなコードを書けばいいのかな?今更公式ドキュメントを読む。
Writing Your First Electron App | Electron

こういう階層構造にすればいいのか。

your-app/
  ├── package.json
  ├── main.js
  └── index.html

自分の環境では package.jsonmainindex.js と入れてしまったので main.js に変更しておき、main.js index.html を作成。(そのままでもいいけど一応公式に合わせていくスタイル)
公式ドキュメントを写経して・・・

実行!

$ npm start

> electron-camp@0.1.0 start /mnt/c/work/electron-camp
> electron .

/mnt/c/work/electron-camp/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-camp@0.1.0 start: `electron .`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the electron-camp@0.1.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/s-watase/.npm/_logs/2018-03-15T07_22_27_694Z-debug.log

!?

error while loading shared libraries: libgtk-x11-2.0.so.0: cannot open shared object file: No such file or directory

これが原因か・・・?
いや・・・
そもそも、動作テストで Electron のアプリが起動すること=ウィンドウが表示されることを確認したいわけだが・・・

CUI なのにウィンドウ表示できるわけないじゃん!!
調べたら libgtk とか x11 とか GUI 関連っぽいし、やっぱりそれが原因か。

というわけで、スクリプトから起動するんじゃなくて一旦 Windows アプリとしてパッケージングする必要がある。
electron-packager というのが使えそう。
最新版で学ぶElectron入門 - HTML5でPCアプリを開発する利点と手順 - ICS MEDIA

インストールして、

$ npm i -D electron-packager

Windows 用の実行ファイルを作る。

$ npx electron-packager . electron-camp --platform=win32 --arch=x64 --overwrite
Downloading tmp-9394-1-SHASUMS256.txt-1.8.3
[============================================>] 100.0% of 3.43 kB (3.43 kB/s)
Packaging app for platform win32 x64 using electron v1.8.3
Could not find "wine" on your system.

Wine is required to use the appCopyright, appVersion, buildVersion, icon, and
win32metadata parameters for Windows targets.

Make sure that the "wine" executable is in your PATH.

See https://github.com/electron-userland/electron-packager#building-windows-apps-from-non-windows-platforms for details.

今度は何!!

wine がないとな・・・Linux で Windows アプリを動かすためのライブラリみたい。
インストールを試みる。

$ sudo apt install wine
Reading package lists... Done
Building dependency tree
Reading state information... Done
Some packages could not be installed. This may mean that you have
requested an impossible situation or if you are using the unstable
distribution that some required packages have not yet been created
or been moved out of Incoming.
The following information may help to resolve the situation:

The following packages have unmet dependencies:
 wine : Depends: wine1.6 but it is not going to be installed
E: Unable to correct problems, you have held broken packages.

う~ん・・・分からん。だいぶハマってきた・・・
WSL を使うのはちょっとハードル高かったか?
素直に Windows 環境でやってみるか・・・

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.