5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SFCAdvent Calendar 2020

Day 13

EELを使ってかんたんなPythonGUIアプリを作った話

Last updated at Posted at 2020-12-12

これは、SFCアドベントカレンダー13日目の記事です。

環境
Python 3.8
Windows10/MacOS Catalina


##PythonでもElectronみたいにWEBフロントでGUI実装をしたい。
ということを朝起きて思ったことはありませんか?

tkinterもいいけど、私はHTMLでアプリケーションのレイアウトを構築したい!
そんなあなたにEELというライブラリーがあります。

作れるもの

スクリーンショット 2020-12-12 214757.png

※こちらは作成途中の画面です。

マークダウンと下にツイッターくらいの文字数を想定したミニメモがかけるようなアプリをつくりました。
出力すると、指定したところに日付のディレクトリーを作成しその中にブログ記事のMDファイルが書かれると行った構成です。

EELの使い方

ライブラリーをインストールするコマンドは以下のようになってます。

$pip install eel

ディレクトリー構成は以下のような形で書きました。
スクリーンショット 2020-12-12 221606.png

app.pyには、

import eel

@eel.expose
def hoge():
   ここにプログラムを書く

eel.start('html/index.html')

index.htmlにはウェブサイトのようにほしい要素を書いていきます。このとき

<script type="text/javascript" src="/eel.js"></script>

上のようにHTML側でEELを読み込むことで、EELが扱えるようになります。

次に、Python側にHTML側から橋渡しをするような

async function run(){
 let hoge = await eel.hoge()();
}

ここで気をつけなければいけないのはPython側にプログラムを送るとき(特に、帰り値が欲しいとき)には末尾の()を2つ付けないといけない部分です。
付けない場合上記コードのhogeは、Promise節になり、値が取り出せない状態になってしまいます。

終わりに

おそらくこのライブラリーを使用することで、Electronライクな感じでWEBアプリケーションをロジック部分Pythonという形で書けるのではないでしょうか?デザインセンスが皆無なので今後上記のアプリケーションデザインを考え、更新していく形にしたいと思っています。

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?