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が100MBオーバーのサイズであることによる。
(ハッと思ってAdobe Bracketの中身を確認すると、名前は違うが、やはり100MB超えのFrameworkが入っていた)

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

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

環境の整備

  1. Node.jsのインストール
    ここから大部分のユーザーにおすすめのv6.11.3 LTS インストーラーパッケージをダウンロードしてインストールする。

  2. electronのインストール
    electron-prebuiltはdeprecated(非推奨)である。代わりにelectronをインストールしろと、ここに書いてあるので素直に従う。

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

                > sudo npm install -g electron --unsafe-perm=true
            

    sudo npm install -g electronだけでは、エラーになる。ここを参考に、–unsafe-perm=trueを追加する。

  3. electron-packagerのインストール
    electronがインストールされていない環境でも実行できるelectronアプリを作るためのnpmモジュールをインストールする。

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

                > sudo npm -g install electron-packager
            

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

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

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

                > mkdir sample
                > cd sample
            
  2. 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"
                  },
            
  3. 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();
                  }
                });
            
  4. ウインドウに表示する内容を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>
            
  5. 実行してみる
    package.jsonに書いた通り、ターミナルAppで以下を実行する。

                > npm run build
            

    または、以下でも良い。

                > electron .
            

    表示された!

    Hello World!

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

  1. ターミナルAppで以下を実行すれば良いとする記事も多いが筆者はできなかった。

                > electron-packager . sample --platform=darwin --arch=x64 --electronVersion=1.7.6
            

    ちなみにversionと書くのはdeprecatedでelectronVersionが正しいらしい。(electron-versionでも良い)

    できた!

    electron App

以上。

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

この投稿へのコメント

  1. 通りすがり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
        自分が覚えていた方が逆に邪道だったようですw

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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

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

トラックバック URL