Electron開発環境を整える 01

まともにパッケージ追加などできるようになったのでいよいよElectronで開発していくための環境を作っていきます。
色々試行錯誤で進めているので手戻りあるかも。
ゴールとしてはUbuntu 14.04.1 でHello world的なことができるまで作りたい。
ついでにパッケージにしてWindowsで動作確認できればなおよし。

まずはNode.js をインストール。直接入れるよりバージョンマネージャーで入れたほうが良いのでnvm をインストール。

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

electron の最新版1.4.8（執筆時点）はNode.js 6.5.0 を使用しているようなので同じバージョンでインストールしておく。

$ nvm install v6.5.0
$ nvm ls

Node.js のパッケージマネージャーは yarn というのがイケてるようなのでこちらをインストール。

$ npm install -g yarn

テスト用のディレクトリを作ってそちらにサンプルを作ってみる。まずは初期化。

$ mkdir test
$ cd test
$ yarn init
$ yanr add electron-prebuilt # （今後はelectronに統一されるのでelectron-prebuiltは非推奨）

package.json が作成されるのでmain.js に変更する。

{
  "name": "test",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "dependencies": {
    "electron-prebuilt": "^1.4.8",
  }
}

取り敢えず動作確認出来れば良いのでelectronのQuick Startからコピペしてmain.jsとindex.htmlを作成。
Ubuntu上にはデスクトップ環境がないので動作確認はパッケージ化してWindowsで行うことにする。

$ yarn global add electron-packager
$ electron-packager ./test/ test --platform=win32 --arch=x64 --varsion=1.4.8

しばらくするとクロスプラットフォームでexe化するには wine がインストールされていないとダメというメッセージ。
公式を見るとwine 1.6以上が必要らしいので

$ sudo apt-get install wine1.6

再びパッケージにトライ。electronの時もそうだったが意外と時間がかかる。取り敢えずできたexeを実行してみる。が何故かエラー。

うーむ、結構時間がかかるので今後のことも考えて
Ubuntu上でelectronを起動できるようにすることとする。

VNC をインストールする。

$ sudo apt-get install vnc4server

諸処の設定をしてVNCの画面が出るところまでOK。
ただ、このパッケージだと色々問題があるみたいなので後でtightvncserver にしておく予定。（追記：結局MobaXtermで作業することにした）
electronを起動してみるとライブラリが足りないとのこと。

$ electron -help
/******/node_modules/electron-prebuilt/dist/electron: error while loading shared libraries: libgtk-x11-2.0.so.0: cannot open shared object file: No such file or directory

ライブラリが入っているパッケージを探してインストール。

$ sudo aptitude search libgtk
$ sudo apt-get install libgtk2.0-0

上記を繰り返してエラーがでなくなるまでやる。結局下記も必要だった。

$ sudo apt-get install libxss1
$ sudo apt-get install libgconf-2-4
$ sudo apt-get install libnss3

これで起動してみると動いた。

うーむ、Windows上で動かないのは何故か。調べてみるとパッケージができたフォルダのresources/appにあるmain.jsが途中までしかない。行が切れてしまっている。どうやらコピーに失敗しているようだ。

何度ビルドしても変わらないのでキャッシュかこの前のディスク拡張が影響しているのか定かではないが正しく書き込みができていない。別のフォルダにパッケージを作成してみると今度はWindowsでも動作確認できた。

Electron開発環境を整える 01

参考にしたサイト

Related Posts