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.9.4 LTS インストーラーパッケージをダウンロードしてインストールする。
  2. electronのインストール
    electron-prebuiltはdeprecated(非推奨)である。代わりにelectronをインストールしろと、ここに書いてあるので素直に従う。
    ターミナルAppで以下を実行する。

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

                sudo npm -g install electron-packager
            

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

  1. アプリ用ディレクトリの作成。
    ターミナルAppで以下を実行する。

                mkdir sample
                cd sample
            
  2. package.jsonの作成と修正。
    ターミナルAppで以下を実行する。

                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.4.14
            

    ちなみにversionと書くのはdeprecatedでelectronVersionが正しいらしい。
    だが、それを修正しても

                Unable to determine Electron version. Please specify an Electron version
            

    というエラーが出て先に進めなかった。

  2. 他の記事を漁ったら、次のようにrelrease.jsを作れば良いらしい事が分かった。

                var packager = require('electron-packager');  
                var config = require('./package.json');
    
                packager({  
                  dir: './',          // 対象
                  out: './dist',      // 出力先
                  name: config.name,  // 名前
                  platform: 'darwin', // or win32
                  arch: 'x64',        // 64bit
                  electronVersion: '1.4.14',  // electron のバージョン
                  icon: './app.icns', // アイコン
    
                  'app-bundle-id': 'jp.miyamura.sample', // ドメイン
                  'app-version': config.version,          // バージョン
    
                  overwrite: true,  // 上書き
                  asar: true,       // アーカイブ
                  prune: true,
                  // 無視ファイル
                  ignore: "node_modules/(electron-packager|electron-prebuilt|\.bin)|release\.js",
                }, function done (err, appPath) {
                  if(err) {
                    throw new Error(err);
                  }
                  console.log('Done!!');
                });
            
  3. ターミナルAppで以下を実行する

                npm run release
            

    次のエラーが出て失敗する

                Error: Cannot find module 'electron-packager'
            
  4. これは、こちらの記事にある通り、「NODE_PATHにグローバルモジュールのPATHを記述」すれば解決するらしい。

    グローバルモジュールのPATHを調べるため、ターミナルAppで以下を実行する

                npm root -g
                /usr/local/lib/node_modules
            
  5. NODE_PATHにグローバルモジュールのPATHを記述する。ターミナルAppで以下を実行する

                export NODE_PATH=/usr/local/lib/node_modules
            
  6. 祈りを込めて、ターミナルAppで以下を実行する

            npm run release
            

    できた!

    electron App

以上。

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

この投稿へのコメント

コメントはありません。

コメントを残す

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

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

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

トラックバック URL