Electron & React & Redux & TypeScript アプリ作成ワークショップ9日目(最終回)

12435 ワード
electron-builder Electron Electron テキストリンク

概要

前回までに、アプリの作成は完了しました。

今回は、プロダクトとしてパッケージング（Windowsだと .exe 、macOSだと.dmg や .pkg ファイルの作成）およびインストーラーの作成を行います。

アイコンの準備

アイコンを設定しなくてもパッケージングはできるのですが、プロダクトとしてアプリ作成するには、必ず必要になる作業でしょう。

Windows用としては、.ico ファイル、macOS用としては、.icns ファイルが必要になります。

それぞれ、もととなる画像の種類は、大きさに合わせて数種類作成する必要があります。

画像ファイルからの変換については、下記を参照してください。

今回は、作成したファイルを、プロジェクトフォルダに 'icon' フォルダを作って置いておきます。

electron-builder の導入

パケージするツールとして、 electron-packager もありますが、electron-builder を利用すると、パッケージとインストーラーの作成までできるので楽だと思います。

> npm install --save-dev electron-builder

main.js の修正

main.js では index.html を読み込みますが、これはするパスとなるように下記のように修正します。

(原因はわかりませんが、私の環境では、このようにする必要がありました)

function createWindow() {
    // ブラウザウィンドウの作成
    win = new BrowserWindow({
        width: 800,
        height: 600
    })
    // index.html をロードする
    // --> 変更
    const path = require('path');
    win.loadFile(path.join(__dirname, './index.html'));
    //win.loadFile('index.html')
    // <-- 変更
    // 起動オプションに、 "--debug"があれば開発者ツールを起動する
    if (process.argv.find((arg) => arg === '--debug')) {
        win.webContents.openDevTools()
    }
    // ブラウザウィンドウを閉じたときのイベントハンドラ
    win.on('closed', () => {
        // 閉じたウィンドウオブジェクトにはアクセスできない
        win = null
    })
}

パッケージの定義を作成する

package.json 内に electron-builder の設定を記述します。

{
・・・
  "scripts": {
    "build": "webpack",
    "start": "electron ./ --debug",
    "package:mac": "webpack && electron-builder --mac --x64",
    "package:windows": "webpack && electron-builder --win --x64",
    "package:linux": "webpack && electron-builder --linux --x64"
  },
・・・
  "build": {
    "productName": "TODO",
    "appId": "todo.exsample.com",
    "directories": {
      "output": "./product"
    },
    "files": [
      "./dist/**/*.js",
      "./index.html",
      "./main.js",
      "./icon/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "./icon/todo.icns",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "icon": "./icon/todo.ico",
      "target": "msi"
    }
  }
}

各プロパティの詳細やここに書かれていないプロパティは、公式のページを参照してください。

directories / output でパッケージおよびインストーラーの出力先を指定します。

files では、アプリの動作に必要なファイルを指定します。 "*/" という書き方は、フォルダの深さに関係なく、ファイルすべて、という意味です。

mac, win でそれぞれのパッケージの設定を行っています。

script で作成のためのコマンドを定義しています。

作成してみる

windows であれば、下記を実行すると、product フォルダにインストーラーができるはずです。

> npm run package:windows

インストーラーで、レジストリの処理やファイルのコピーなど、様々な処理を行いたい場合は、Inno Setup などで作成すると良いです。

electron-builder で作成された win-unpacked フォルダ内のファイル一式としてインストーラーに含めると良いでしょう。起動する exe もここにあります。

まとめ

Electronアプリの開発については、ひとまずおしまいです。

Reactや Reduxの話が多く、Electronについての話が少なかったかなと思います。

できれば、メインプロセス、レンダープロセス、その間のプロセス間通信とかも書きたかったのですが、これは別の機会にしたいかなと思います。