Flask と Electron で作るデスクトップアプリ ①「導入編」

Python でデスクトップアプリを作る際、一つの選択肢とし今回 Flask＋Electron という構成を解説していきます。
デスクトップアプリを作る方法を知るだけでやりたいことを形にしやすいと思うので私の中ではWebより取っつきやすいのではとおすすめです。
第1章として、最初は最小構成で起動するまでを確認します。

開発環境

• Windows 11(Windows10でも可)
• Python 3.10
• Flask 2.1.2
• electron v19.0.6

環境構築

1．Electron

以下のリンクから Node.js をインストールし、npmコマンドを使えるようにする。
Node.jsのインストール

1.1. 作業ディレクトリで以下のコマンドを実行

ターミナル

npm init -y

1.2. 作成されたJSONファイル

main が実行する際に読み込むファイル名になる。そのため、フォルダ構成を変更した場合はこのパラメータを変更する。

package.json

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

1.3. Electron インストール

ターミナル

npm install -D electron

1.4. Electron の起動

npm にバンドルされている npx コマンドランナー を使った Electron の臨時実行し、以下の画像のように初期画面を表示してElectronがインストールされていることを確認。

ターミナル

npx electron

2. Python のインストール

こちらのリンクからPythonをインストール。
念のため、Python がインストールされているか以下のコマンドで確認しましょう。

ターミナル

python --version

3. Flask のインストール

Python の代表的なフレームワークの１つFlask。以下のコマンドを実行しインストール

ターミナル

pip install Flask

以下のコマンドを実行して、electron で flask を起動するのに必要なモジュールをインストール。

ターミナル

npm install --save request
npm install --save python-shell

4. 最小構成のアプリケーション起動

各公式ドキュメントをもとに最小構成でアプリを作成します。
構成は以下の通りです。

SampleApp
　┝ template
　│　└ index.html
　┝　app.py
　└　index.js

index.html

index.html

<h1>~~ Hello, World ~~</h1>

index.js

index.js

const {PythonShell} = require('python-shell');
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

app.on('ready', function() {
  PythonShell.run('./app.py');
  const openWindow = function() {
    mainWindow = new BrowserWindow({width: 800, height: 600 });
    mainWindow.loadURL('http://localhost:5000');
  };
  openWindow();
});

app.py

app.py

from flask import Flask, render_template

app = Flask(__name__, instance_relative_config=True)

@app.route("/", methods=("GET", "POST"))
def index():
    return render_template("index.html")

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

実行

上記のサンプルの構成を作り、実行することで以下のようにブラウザが起動すれば完成です。

ターミナル

npx electron .

まとめ

いかがでしたでしょうか？案外、簡単に作れそうと思いませんでしたか？
後は好きにコードを書いて実際に何か作ってみましょう。
次回はBootstrap5を使ってデザインを凝ってみようかと思います。
これから作成するElectron＋FlaskのソースコードはGithubに掲載していきますのそちらをクローンしてOKです。