名称未設定_1

PythonのEelを使って超絶簡単にGUIを実装

あさみん

GUI作りたい！でもHTMLぐらいしか知識ない！って人にオススメしたいPythonライブラリ「Eel」。

これを使えば、HTML・CSSなコーディング作業だけで中々なGUIを実装できる。

インストール

公式より、

pip install eel

pipしましょう。

使い方

ディレクトリ構成：

python/
　├ main.py
　└ assets/
　 　└ main.html

main.py

import eel
eel.init("assets") #HTMLのフォルダ
eel.start("main.html") #スタートページのファイル名

main.html

<!DOCTYPE html>
<html>
<head>
<title>Eel Examples</title>
</head>
<body>
    <p>Ello! from Python</p>
</body>
</html>

これでmain.pyを実行すると、

のように表示されます。

PythonからJavaScriptへ値を渡す

もちろんのことですが、PythonからJSの関数を呼んだり、その逆も可能です。

今回は簡単なPython→JSへの値の受け渡しをします。

ディレクトリ構成

python/
　├ main.py
　└ assets/
    ├  main.html
    └  eel.js

eel.jsはGitHubの公式などからダウンロードしてきてくだい。
また、"eel.init"で指定したフォルダの直下にeel.jsがないとうまく動きませんので、注意が必要です。

main.py

import eel

@eel.expose
def pythonfunc():
   return "Ello from Python!"

eel.init("assets") #HTMLのフォルダ
eel.start("main.html") #スタートページのファイル名

main.html

<!DOCTYPE html>
<html>
<head>
<title>Eel Examples</title>
<script type="text/javascript" src="eel.js"></script>
<script type="text/javascript">
    async function run() {
        let n = await eel.pythonfunc()();
        console.log(n);
    }
    run();
</script>
</head>
<body>
    <p>Ello! from Python</p>
</body>
</html>

公式のコードを少し変更。

ChromeブラウザのDevToolsのコンソールに表示されていることがわかります。

以上が簡単なEelの使い方でした。
（Electronの方がいい気がするけど(ﾎﾞｿｯ)）

この記事が気に入ったらサポートをしてみませんか？