electronを使ってみた

2017.09.19追記
記事執筆時点（1.4.14）では、「情報が古かったり、欠損していると思われる点が」あったが、現バージョン（1.7.6）では、何も工夫らしい工夫なくできる。
以前必要だった工夫も残すか迷ったが、コードに取り消し線を引くのは手間なため、バッサリと切り落とすことにした。ゆえに、本記事は極めて一般的なelectron入門書の質の悪いコピーである。

ここしばらくrubyを勉強していた。「恋するプログラム」という本を一冊読んだ後、rubyでGUI（Grapic User Interface）を使う方法はないか調べていたが、OS標準のrubyで使えるものがないことが分かった。（ruby-qmlは有望だがruby 2.1以上が必要）

そうこうするうちに、electronというものがあるのを知った。JavaScript, HTMLそれにCSSを使ってmacOS、Windows、それにlinuxで使えるアプリが作れるという触れ込みの代物だ。

最初に断っておくと、出来上がるアプリは、お決まりの「Hello World」を表示するだけモノでも110MBを超えるサイズになる。これはelectronのFrameworkが１００MBオーバーのサイズであることによる。
（ハッと思ってAdobe Bracketの中身を確認すると、名前は違うが、やはり１００MB超えのFrameworkが入っていた）

アプリのサイズを気にしない向きには良いかも知れないが、安くなったとは言え、まだSSDの価格が気になる昨今、このサイズは現実的なのか一考の余地があろう。

前置きが長くなった。以下でelectronを使って「Hello World」を表示するアプリを作るまでの流れを説明する。既にこの手の解説記事は多いが、情報が古かったり、欠損していると思われる点があるため、敢えて筆を起こすことにした。

環境の整備

Node.jsのインストール
ここから大部分のユーザーにおすすめのv6.11.3 LTS インストーラーパッケージをダウンロードしてインストールする。
electronのインストール
electron-prebuiltはdeprecated（非推奨）である。代わりにelectronをインストールしろと、ここに書いてあるので素直に従う。

ターミナルAppで以下を実行する。
```
> sudo npm install -g electron --unsafe-perm=true
```
sudo npm install -g electronだけでは、エラーになる。ここを参考に、–unsafe-perm=trueを追加する。
electron-packagerのインストール
electronがインストールされていない環境でも実行できるelectronアプリを作るためのnpmモジュールをインストールする。

ターミナルAppで以下を実行する。
```
> sudo npm -g install electron-packager
```

サンプルアプリケーションの作成

アプリ用ディレクトリの作成。

ターミナルAppで以下を実行する。
```
> mkdir sample
> cd sample
```

package.jsonの作成と修正。

ターミナルAppで以下を実行する。

> sudo npm init -y

上記コマンドにより、以下のpackage.jsonが作成される

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

修正するのは、scriptsの部分である。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

以下のように、buildとreleaseの項を追加する。”test”行の最後に,を忘れずに！

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules/.bin/electron .",
    "release": "node release.js"
  },

package.jsonのmainの値に従ってindex.jsを作成

// electronモジュールを読み込み
const electron = require('electron');
const {app} = electron;
const {BrowserWindow} = electron; //ウィンドウを表す[BrowserWindow]はelectronモジュールに含まれている

// 新しいウィンドウ(Webページ)を生成
let win;
function createWindow() {
  // BrowserWindowインスタンスを生成
  win = new BrowserWindow({width: 800, height: 600});
  // index.htmlを表示
  win.loadURL(`file://${__dirname}/index.html`);
  // デバッグするためのDevToolsを表示
  win.webContents.openDevTools();
  // ウィンドウを閉じたら参照を破棄
  win.on('closed', () => {   // ()は　function ()と書いていい
    win = null;
  });
}
// アプリの準備が整ったらウィンドウを表示
app.on('ready', createWindow);
// 全てのウィンドウを閉じたらアプリを終了
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

ウインドウに表示する内容をindex.htmlに書く

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

実行してみる
package.jsonに書いた通り、ターミナルAppで以下を実行する。
```
> npm run build
```
または、以下でも良い。
```
> electron .
```
表示された！

パッケージング
各プラットフォームでelectronなしでも実行できるアプリケーションパッケージを作る

ターミナルAppで以下を実行すれば良いとする記事も多いが筆者はできなかった。
```
> electron-packager . sample --platform=darwin --arch=x64 --electronVersion=1.7.6
```
ちなみにversionと書くのはdeprecatedでelectronVersionが正しいらしい。（electron-versionでも良い）

できた！

以上。

参考：
Electronの手習い〜Electron環境からパッケージ化まで〜
とりあえず試してみたいって方のための Electron 入門
 Electronの使い方（自分流）

この投稿へのコメント

通りすがりA said on 2017年9月18日 at 11:45 PM

パッケージングのエラーの部分

–electronVersion=x.x.xx　ではなく　–electron-version=x.x.xx

ではないでしょうか？

返信
- xanadu6291 said on 2017年9月19日 at 1:18 AM
  
  確認したところ、ご指摘のelectron-versionでも、electronVersionでもどちらでも良いようです。
  
  返信
  - 通りすがりA said on 2017年9月19日 at 10:22 AM
    
    あ、そうなんですね。勘違いでしたごめんなさいm(_ _)m
    自分が覚えていた方が逆に邪道だったようですｗ
    
    返信

コメントを残すコメントをキャンセル

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

関連記事

macOSアップデート直後の英語表記画面を治す

ちゃんとコピーできたか確認する方法

macOSで、Apache Webサーバーをソースからビルドして運用する

この投稿へのコメント

コメントを残す コメントをキャンセル

この投稿へのトラックバック

コメントを残すコメントをキャンセル