UbuntuにElectronアプリを作ってみる(環境構築)

はじめに

最近流行りのElectronを使いたくて、自宅のUbuntuに導入したので防備録を公開。

構築環境
Ubuntu 16.04 LTS

nodo.jsのインストール

最初nodo.jsをインストールしようとした。いろいろ調べた結果 apt-getを利用するとnodo.jsのバージョンがv4になってしまう。たぶんubuntuの安定版がv4であるためであると考えられるが、少し古いためv6系を使いたい。

よって今回はnodebrewを利用してインストールすることにした。 参考にしたサイト

$ curl -L git.io/nodebrew | perl - setup  

次にnodo.jsをインストールします。 今回はv6.9.4をインストールします。

nodebrew install-binary v6.9.4

バージョンの確認

$ nodebrew ls

v6.9.4

current: none

current:noneでは使えないため

$ nodebrew use v6.9.4

これで使えるはずだったのですがnodeコマンドでバージョンを確認すると

$ node -v
bash: /usr/bin/node: そのようなファイルやディレクトリはありません

apt-getでインストールする場合と違いこちらはパスを通す必要があるようです。

とりあえずnodeがどこにあるかを調べる。

確認すると

$ which node
/home/bam60o/.nodebrew/current/bin/node

公式に乗っている通りパスを通す必要がある
ここらへんの参考にしたサイト

$ emacs ~/.profile
#追加
export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source ~/.profile

これでnodeコマンドが使えるようになった。

$ node -v
v6.9.4

アプリ開発の準備

　 プロジェクト作成用のディレクトリを作成し移動

$ mkdir electron_first_app
$ cd electron_first_app

npmを利用しpackage.jsonという設定ファイルにプロジェクトの設定を設定する。

$ npm init

順次質問されるため設定を応える

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (electron_first_app) 
version: (1.0.0) 
description: My first Electron app
entry point: (index.js) main.js
test command: 
git repository: 
keywords: 
author: bam6o0
license: (ISC) MIT
About to write to /home/bam60o/dev/electron_first_app/package.json:

{
  "name": "electron_first_app",
  "version": "1.0.0",
  "description": "My first Electron app",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "bam6o0",
  "license": "MIT"
}

　Electronのインストール

npm -g install electron

このとき

> electron@1.6.6 postinstall /home/bam60o/.nodebrew/node/v6.9.4/lib/node_modules/electron
> node install.js

で少しの間コマンドが静止するがインストール中なので気長に待つこと！！

リリース用のパッケージを作成するelectron-packagerをインストールします

npm -g install electron-packager

以上でインストール完了

試しに起動してみると

./node_modules/.bin/electron

 throw new Error('Electron failed to install correctly, please delete node_modules/' + path.basename(__dirname) + ' and try installing again')

というエラーが発生した…
原因はよくわからなかったが参考サイト通りにやってみた。

npm install electron --verbose

これでもう一度試すと

./node_modules/.bin/electron

以上でElectronの開発環境を構築できました。