【Python】eel+Bootstrap+Vueでお手軽GUI

Created 2019年4月16日22:53
Updated 2019年4月22日18:17
Categories Python HTML vue eel

ちょっとしたデスクトップアプリを作る時にeelがかなり便利だったのでメモ。

追記（2019/04/22）
GitHubにリポジトリとしてまとめました

eelとは

PythonでElectronみたいにGUIアプリを作れるライブラリです。

フロントエンドをHTML・JSで開発して、バックエンドだけPythonで作るみたいな事ができます。

ディレクトリ構造

├── gui.py
└── web
    ├── index.html
    └── js
        └── main.js

gui.py

シンプルな文字列を返す関数を実装して、Javascript側から使えるようにします。

import eel


@eel.expose
def return_hello():
    return "Hello!!"


def start_gui():
    eel.init('web')
    eel.start('index.html')


if __name__ == "__main__":
    start_gui()

eel.init('web'), eel.start('index.html')はHTMLを入れたディレクトリの名前とHTMLファイル名を入れてください（今回はwebとindex.html）。

index.html

Bootstrapの公式ページからチュートリアルスクリプトをとってきました。

BODY内にはVueのコンポーネントのテンプレートを入れています。

<!doctype html>
<html lang="ja">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>

<div id="app">
    <h1>{{ message }}</h1>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

main.js

Vueコンポーネントを作成します。

また、作成時にPython側の関数を実行して、取得した文字列をHTMLに設定します。

var app = new Vue({
  el: '#app',
  mounted () {
    eel.return_hello()((message) => {
      this.message = message
    })
  },
  data: {
    message: ''
  }
})

実行

pip install eel
python gui.py

所感

簡単なGUIアプリならこれで作れるのはめっちゃ便利です。

今度作例をブログに上げますので、乞うご期待です・・・！！