はじめに

ElectronとPython（Flask）を使ったデスクトップアプリのパッケージングにとても苦労したので、同じように困っている人の役に立てばいいなと思っています。

完成したアプリ

開発環境

Windows 10

環境構築

インストールにnpmを使用します。
npmにはNode.jsが必要となりますので事前にインストールしてください。
Node.jsダウンロード画面

Electron

package.jsonの作成

作業ディレクトリを作成し，そこでnpm initします。
-yオプションをつけることで初期値で package.json が生成されます。

> mkdir sample_app
> cd my_electron
> npm init -y

package.json

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

Electronのインストール

-Dオプションは--save-devの省略で、モジュールが現在のプロジェクトにインストールされます。
プロジェクト毎に異なるバージョンをインストールすることができます。

> npm i -D electron
> npx electron -v
  v6.0.1

Welcomeウィンドウの表示

Electronのインストールが完了したらWelcomeウィンドウを表示してみます。
npxは現在のプロジェクトにインストールしたElectronにパスが通ります。

> npx electron

Welcomeウィンドウが表示されます。

Flask

Python3のインストール

Flaskを使用するためにPython3をインストールしてください。
Python3のダウンロード画面
 Python3の導入方法

Flaskのインストール

今回はPythonの軽量なWebフレームワークであるFlaskを使用します。

> pip install Flask
> flask --version
  Flask 1.1.1

必要なモジュールのインストール

--saveオプションをつけることで、パッケージにした際にも呼び出すことができます。

> npm install --save request
> npm install --save request-promise
> npm install --save python-shell

必要なファイルの作成

以下のディレクトリ・ファイルを作成して、画像のようなディレクトリ構造にしてください。
├ templates
│ └ index.html
├ app.py
└ index.js

index.html

フロントの画面を作成します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <h1>Hello, World!</h1>
    <button class="btn btn-primary">button</button>
    <p id="text">text</p>
</div>
</body>
</html>

app.py

from __future__ import print_function
import time
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")

def hello():
    return render_template("index.html")

if __name__ == "__main__":
    print('on hello')
    app.run(host="127.0.0.1", port=5000)

index.js

// Electron側の初期設定
const {PythonShell} = require('python-shell');
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

// アプリを閉じた時にquit
app.on('window-all-closed', function() {
  app.quit();
});

// アプリ起動後の処理
app.on('ready', function() {
  PythonShell.run('./app.py', null, function (err, result) {  // exe:'./resources/app/app.py'    edit: './app.py'
    if (err) throw err;
    console.log(result);
  });
  const rq = require('request-promise');
  const mainAddr = 'http://localhost:5000';

  const openWindow = function() {
    mainWindow = new BrowserWindow({width: 400, height: 300 });
    mainWindow.loadURL(mainAddr);

    // 開発ツールを有効化
    // mainWindow.webContents.openDevTools();

    // 終了処理
    mainWindow.on('closed', function() {

      // キャッシュを削除
      electron.session.defaultSession.clearCache(() => {})
      mainWindow = null;
    });
  };

  const startUp = function() {
    rq(mainAddr)
      .then(function(htmlString) {
        console.log('server started');
        openWindow();
      })
      .catch(function(err) {
        startUp();
      });
  };

  startUp();
});

実際に動かしてみる

> npx electron .

うまく動作しました。
これでほぼ完成ですが、どうせならCSSやJavaScriptも読み込んでみましょう。

CSSやJavaScriptの使用

ディレクトリ・ファイルの追加

以下のディレクトリ・ファイルを作成して、画像のようなディレクトリ構造にしてください。
static
├ css
│ └ style.css
└ js
　└ script.js

style.css

h1 {
   color: #B00020;
}

script.js

function sample() {
    document.getElementById('text').textContent = 'clicked!';
}

CSSやJavaScriptの読み込み

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/style.css"> <!-- ★追加 -->
    <script type="text/javascript" src="/static/js/script.js"></script> <!-- ★追加 -->
</head>
<body>
<div class="container">
    <h1>Hello, World!</h1>
    <button class="btn btn-primary" onclick="sample()">button</button> <!-- ★更新 -->
    <p id="text">text</p>
</div>
</body>
</html>

実際に動かしてみる

> npx electron .

うまくCSSが読み込まれているため、文字の色が変わっています。
また、JavaScriptも読み込まれているため、ボタンをクリックするとテキストが変わります。

残すはパッケージングだけです！
あと少しで完成です！頑張りましょう！

パッケージング

electron-packagerのインストール

> npm i -D electron-packager

index.jsの更新

実行する前にデスクトップアプリ用に更新する箇所があります。
パッケージングしたあとのディレクトリ構造に合わせます。

index.js

...
// アプリ起動後の処理
app.on('ready', function() {
  PythonShell.run('./resources/app/app.py', null, function (err, result) {  // ★更新 exe:'./resources/app/app.py'    edit: './app.py'
    if (err) throw err;
    console.log(result);
  });
...

electron-packagerの実行

> npx electron-packager . sample_app --platform=win32 --arch=x64 --overwrite

sample_appディレクトリの配下にパッケージングされたディレクトリが作成されます。
sample_app.exeでアプリが起動します。

sample_app
└ sample_app-win32-x64
　└ sample_app.exe

うまく動作しました。
これで完成です！

お疲れ様でした！

他の人が実行するときの注意点

PCにPython3とFlaskがインストールされていなければエラーとなり起動しません。
他の人が実行するには、Python3とFlaskをインストールしてもらってください。
Python3のダウンロード画面
 Python3の導入方法

Flaskのインストール

> pip install Flask

おわりに

初めてWebに記事を投稿しました。
パッケージングするのにとても苦労したので、この記事が他の人の役に立てば嬉しいです。

以下の記事を参考にさせていただきました。ありがとうございます。
日頃お世話になっているElectronのアプリ開発に入門してみる
 Pythonでデスクトップアプリを作る with Electron