はじめに
Pythonでデスクトップアプリを作る選択肢は様々あります（Tkinter, Pyside, Fletなど）。
ただ、Web技術を使うとなると、Electron と Flask をうまく繋ぎこむ必要があります。
と思っていたのですが、偶然にも Pywebview というライブラリを ChatGPT におすすめされ、調べてみると、「これぞ求めていたものだ！」と感動しました。
Pywebview は簡単にいうと、Electron の Python 版みたいなものです（詳しいことはちゃんと理解していません…🙂）。HTML や React などで作ったフロントエンドをブラウザエンジン（Webkitなど）で表示させて、デスクトップアプリとして使うみたいな感じだと思います。
Vite + React でフロントエンドを組みたい
公式のボイラープレートだと、parcel や create-react-app で作った React アプリしかありません。Vite は爆速だし、個人的に最近よく使っているので、Vite + React で Pywebview アプリを作れるボイラープレートを作りました。
今回は、ボイラープレートを使って、アプリを作ってみるところまでご紹介します。
環境
- MacBook Air M1 2020 (Sonoma 14.4.1)
- Python 3.10.7
- Node 21.1.0
セットアップ
まずは、ボイラープレートのレポジトリにアクセスし、「Use this template > Create a new repository」します。
お好きなレポジトリ名をつけて Create repository します。
作成したリポジトリをローカルにクローンします。
git clone https://github.com/ユーザー名/リポジトリ名.git
READMEのとおりに諸々のインストールをします。
npm run init
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt
npm run init
python -m venv venv
.\venv\Scripts\activate
pip install -r requirements.txt
Linux対応はしていませんが、元のボイラープレートの package.json を参考にすると利用できるかもしれません
動作確認
フロントエンドのみ
フロントエンドのみを走らせるには、下記を実行します。
npm run dev
ブラウザで http://localhost:5173 にアクセスすると、こんな画面が見えます。
フロントだけなので、Saveボタンは動作しません。
フロントエンドとバックエンド
フロントエンドをビルドして、バックエンドを走らせるには、下記を実行します。
npm run start
こんな感じのウィンドウが表示されるはずです。
バックエンドが動いているので、カウントが表示されるのと、Saveボタンでテキストを保存することができます。
デスクトップアプリとしてビルド
ビルドするには下記を実行します。
npm run build
dist フォルダ内にアプリが生成されているはずです。
Windowsの場合、Windows Defender などのセキュリティソフトウェアで、アプリの生成がブロックされることがあります。回避方法はあるみたいですが、僕は面倒なのでWindowsの設定を少し変更しました。
ダブルクリックするとアプリが起動します。
機能の追加
最後に、「Numpyで生成された乱数配列を表示するボタン」を実装します。
バックエンドを編集
numpy を pip install します。
pip install numpy
backend/index.py の class Api を編集します。
class Api:
+ def rand_arr(self):
+ return np.random.rand(10).tolist()
+
def fullscreen(self):
...
フロントエンドを編集
frontend/src/components/Editor/Editor.tsx で button を追加します。
クリックすると、rand_arrを実行し、生成された乱数配列をテキストボックスに出力するようにonClickを書き換えています。
return (
<div className="editor-container">
<textarea
className="textarea"
value={content}
onChange={(e) => {
saveContent(e.target.value);
}}
/>
<br />
+ <button
+ className="button"
+ onClick={() => {
+ // @ts-expect-error: We are using a custom API
+ window.pywebview.api.rand_arr().then((arr: number[]) => {
+ const randArrSttr = arr.join(", ");
+ saveContent(randArrSttr);
+ });
+ }}
+ >
+ Generate Rand Arr
+ </button>
<button
className="button"
onClick={() => {
window.pywebview.api.save_content(content);
}}
>
Save
</button>
</div>
);
実行
あとは実行してみるだけです！
npm run start
こんな感じで、ボタンを押すと乱数が生成されるはずです（Saveを押せばそのまま保存できます）。
終わりに
今回は、私が作成したボイラープレートを使って、 Pywebview + Vite + React のデスクトップアプリを作る方法を説明しました。思ったよりも簡単ではなかったでしょうか？
ReactはUIフレームワークやアニメーションフレームワークが豊富なので、ぜひかっこいいアプリを作ってみてください！
また、今回説明に利用したリポジトリはこちらです。必要に応じて参考にしてください。