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 が実行する際に読み込むファイル名になる。そのため、フォルダ構成を変更した場合はこのパラメータを変更する。
{
"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
<h1>~~ Hello, World ~~</h1>
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
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です。