Electronの配布パッケージの作成

Electronの配布パッケージの作成

Firebase のストレージとデータベース（Cloud Firestore）を利用してブログサービスを開発する例を紹介しています。 基本的な機能の実装とそれに関連した部分は概ね紹介してきました。今回は、ブログサービスの管理アプリを作成するフレームワークとして、 Electron を使って管理用のデスクトップアプリを作るという方針で進めています。 Electron を利用すると、Windows、Linux、MacOS のアプリが簡単に作成できます。この記事では、各 OS 用の配布パッケージの作成例を紹介します。

Electron の実態は Web ブラウザ！

既に紹介していますが、Electron の実態は Web ブラウザです。アプリ専用のウインドウにするために、URL を指定する部分などは取り除かれていますが、基本的な物は Web ブラウザ（Chronium）です。つまり、中身は通常の Web アプリと同じなので、React や Vue のフレームワークを利用して作成したアプリをデスクトップのアプリとして仕上げる事ができるという仕組みです。

オープンソースの Web ブラウザの Chornium は各 OS（Windows/Linux/MacOS）をサポートしているので、各 OS 用のモジュールをダウンロードして最終的な配布用のパッケージを作成しています。これが、簡単に各 OS で動作するデスクトップアプリが作れる理由です。

従って、React や Vue で作成した公開用のイメージをローカルの Web サーバーで動作させて、その URL を Chronium のブラウザで表示させるというのが中身がやっている事です。

Vue の拡張機能でできる事は？

既に、フロントエンドのフレームワークの Vue の拡張機能を利用して、Electron の開発環境の設定を行う方法を紹介しています。これで、基本的な Electron の開発は可能で、実際にデスクトップのウインドウとして検証できるので開発を進める事ができます。

Vue の拡張機能をインストールして作成される「package.json」は概ね以下のようなファイルになります。パッケージの依存関係は、作成するアプリによって変わってくるので、以下の例からは省いてあります

{

  "name": "web-fb-admin-vue",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint",

    "electron:build": "vue-cli-service electron:build",

    "electron:serve": "vue-cli-service electron:serve",

    "postinstall": "electron-builder install-app-deps",

    "postuninstall": "electron-builder install-app-deps"

  },

  "main": "background.js",

  "dependencies": {

    ......

  },

  "devDependencies": {

    .......

  },

  "eslintConfig": {

    "root": true,

    "env": {

      "node": true

    },

    "extends": [

      "plugin:vue/essential",

      "eslint:recommended",

      "＠vue/typescript/recommended",

      "＠vue/prettier",

      "＠vue/prettier/＠typescript-eslint"

    ],

    "parserOptions": {

      "ecmaVersion": 2020

    },

    "rules": {}

  },

  "browserslist": [

    "> 1%",

    "last 2 versions",

    "not dead"

  ]

}

拡張機能をインストールした際に追加される npm のスクリプトに以下の記述があります。

"scripts":{

    ....

    "electron:build": "vue-cli-service electron:build",

    "electron:serve": "vue-cli-service electron:serve",

    ....

}

「electron:serve」は既に別の記事で紹介していますが、開発用（動作確認用）のアプリを起動するコマンドです。 今回は、Vue をフロントエンド開発のフレームワークとして利用しているので、まずは、Vue の公開用のイメージを作成した上で、Electron の中で動くような処理を行なっています。この機能はあくまで開発用の機能なので、実際にアプリとして配布するには向いていません。

実際に配布可能なパッケージを作成するには、「electron:build」を実行します。このコマンドで配布可能なパッケージを作成してくれます。

つまり、Vue を利用して開発する場合、Electron の拡張機能を追加すれば、開発用のアプリの実行から、配布用のパッケージの作成まで特別な設定をしなくても、できる様になります。簡単ですね！

開発用の PC と別の OS のアプリを作るには？

配布用のパッケージの作成まで Vue の拡張機能で面倒を見てくれるので、便利ですが一つだけ問題があります。 実は、この配布用のパッケージは、開発用の PC と同じ OS 向けのパッケージになります。

つまり、Windows で開発している場合には、Winodwos 用のパッケージ、Linux で開発している場合は、Linux 用のパッケージ、MacOS で開発している場合には、MacOS 用のパッケージが作成されるようになっています。

自分アプリを利用する場合には、これで全く問題はないかと思いますが、実際に作成したアプリを配布する場合には、他の OS もサポートしたいというケースはかなりあるかと思います。実は、別の OS 向けのパッケージを作成する場合には、別にスクリプトを設定する必要があります。

他の OS 用のパッケージ作成にはオプションの指定が必要

実際に、他の OS 用の配布パッケージを作成するには、個別にターゲットの OS を指定する必要があります。 例えば、MacOS 上で Windows のインストールパッケージ(nsis)を作成するには以下のように指定します。

$ npm run electron:build -- --win nsis

Linux のパッケージを作成するには、

$ npm run electron:build -- --linux

のように指定します。

ちなみに、Mac OS のパッケージの作成には Mac を使う必要があります。Windows や Linux 上では基本的に Mac OS のパッケージを作成しようとすると途中でエラーになります。つまり、Windows や Linux の PC 上で作成できるのは、Windows 用と Linux 用のみということになります。

まとめ

Vue のフレームワークを利用して、Electron のアプリは、Vue の拡張機能を追加することで簡単にできます。 MacOS 用のイメージの作成には、MacOS 上で行う必要がありますが、Windows 用と Linux 用のパッケージは、どの OS からでも作成できます。 一つの、ソースコードで主要な OS で動作するデスクトップアプリが開発できるのは大きな魅力です。