開発

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 | bashCode language: JavaScript (javascript)

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は非推奨)Code language: PHP (php)

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

{
  "name": "test",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "dependencies": {
    "electron-prebuilt": "^1.4.8",
  }
}Code language: JSON / JSON with Comments (json)

取り敢えず動作確認出来れば良いので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.8Code language: PHP (php)

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

$ sudo apt-get install wine1.6Code language: JavaScript (javascript)

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

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

VNC をインストールする。

$ sudo apt-get install vnc4serverCode language: JavaScript (javascript)

諸処の設定をして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 directoryCode language: PHP (php)

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

$ sudo aptitude search libgtk
$ sudo apt-get install libgtk2.0-0Code language: JavaScript (javascript)

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

$ sudo apt-get install libxss1
$ sudo apt-get install libgconf-2-4
$ sudo apt-get install libnss3Code language: JavaScript (javascript)

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

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

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

参考にしたサイト

管理人

Recent Posts

情報セキュリティマネジメント試験取得への道

スキルアップを図るべく情報セキ…

2か月 ago

ファイナンシャルプランナー3級試験取得への道

スキルアップを図るべくファイナ…

2か月 ago

[rust] New Type Patternを使ってみる

DDDの考えを取り入れることで…

5か月 ago

RustでDDDの要素を取り入れてみる

前回SOLID原則というものを…

5か月 ago

期間限定!書籍無料キャンペーン2025

「mdBookではじめるKin…

5か月 ago