Electron開発環境をLinux Mint上に構築する

ここ最近、Electronに興味が湧いてきたので、Electron開発環境をLinux Mint上に構築してみました。

Electronとは、JavaScriptでデスクトップアプリケーションを作成するためのフレームワークで、以前は"AtomShell"という名称でした。

GitHub、JavaScriptでデスクトップアプリが作れるライブラリAtom Shellを、Electronに改称
- http://codezine.jp/article/detail/8678

以降の手順はLinux Mint環境で実施・確認したものです。他のLinuxディストリビューションでは手順が一部異なるかもしれません。

Node.jsのインストール

まずはNode.jsをインストールします。
必要なパッケージはnodejsとnpmの2つで、該当するパッケージ名を検索してみます。

$ apt-cache search nodejs | grep ^nodejs
nodejs - evented I/O for V8 javascript
nodejs-dev - evented I/O for V8 javascript (development files)
nodejs-legacy - evented I/O for V8 javascript (legacy symlink)
nodejs-dbg - evented I/O for V8 javascript (debug)
$ apt-cache search npm | grep ^npm
npm - package manager for Node.js

以下の手順でNode.jsとnpmをインストールします。

$ sudo apt-get install nodejs
$ sudo apt-get install npm

Electronのインストール

これでnpmからElectronをインストールできる...はずなのですが、一箇所ハマり所があります。npmはNode.jsのコマンド名が"node"であるとみなして一連の処理を実行しますが、Linux MintでのNode.jsコマンドは"nodejs"という名前でインストールしているため、そのままだとElectronインストール時に以下のエラーが発生します。

$ npm install electron-prebuilt -g
...中略...
sh: 1: node: not found
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

npm ERR! weird error 127
npm ERR! not ok code 0

そのため、"node"というコマンド名が利用できるよう、シンボリックリンクを手動で作成します。

$ which node nodejs
/usr/bin/nodejs
$ cd /usr/bin
$ sudo ln -s nodejs node
$ file node
node: symbolic link to `nodejs'

あとはElectronのドキュメントにあるように、以下のコマンドでインストールできます。

$ npm install electron-prebuilt -g
$ npm install electron-prebuilt --save-dev

簡単なサンプルを動かしてみる

Electronの"Quick Start"にあるサンプルでもよいのですが、ここは自分で作成した簡単なサンプルを動かしてみます。

furandon-pig/electron_sample

以下の手順でサンプルを実行します。

$ git clone https://github.com/furandon-pig/electron_sample.git
$ cd electron_sample
$ electron hello/

実行画面は以下のようになります。

Linux Mint環境でElectronを動かす際の注意点

Linux Mint環境でElectronを試して見る際に、日本語の表示が化けてしまい、少しハマってしまいました。以下の方法で回避できるようです。

headタグ中に<meta charset="UTF-8">を記述しておく
styleタグでbodyのフォントを以下のように指定する

<style>
  body {
    font-family: 'Takao Pゴシック','Open Sans',Helvetica,Arial,sans-serif;
  }
</style>

まとめ

Linux MintでElectronを動かしてみました。Electronのサンプルプログラムはまだ少ない感じなので、公式のドキュメントを参照しつつサンプルを増やしていこうと思います。