今回はEelというライブラリを使って、Python/JavaScript(Vue)/HTML/CSSを用いてGUIアプリを開発する方法とサンプルコードについてまとめます。
目次
Eelとは？
Web技術を使ってPythonでGUIアプリを開発できるライブラリです。Electronに似た感じ。
https://github.com/samuelhwilliams/Eel
ざっくりまとめるとこんな感じの仕組みです。
内部的にはlocalhostにサーバーを立ててやり取りすることでWeb技術でGUIアプリが使えるという仕組みです。
PythonとJavaScriptとの疎通は内部的にWebSocketを介して実現しています。
Web技術が使えるので当然VueだったりjQueryだったりMaterializeも使用できます。
PythonにはTkinterやKivyなどのGUIライブラリがありますが、EelはWeb技術を使えるのでそれらに比べて断然レイアウトを作りやすいのでおすすめです。
Eelプロジェクトのひな形
ひな形は以下の構成です。
レイアウトを作るviewフォルダの構成は起動時に起点のhtmlファイルを指定するのでいじらない方がいいですが、python側は基本的に自由です。
アプリを起動したりデスクトップアプリをビルドするときはrun.pyを起点にします。run.pyは最初の画面のHTMLファイルを指定してアプリを開始する感じです。
私はよくMVP的な感じで、Viewはひな形のView通りでPresenterだけJavaScriptとやり取りする仕組みにしています。
Eel/Vueのサンプルプロジェクトのコード
こちらに上げてあります。cloneすればVue/jQuery/Materializeを連携したプロジェクトが作れます。
今回はnpmとかWebpackとか不要で生のVueJSのみ使うようにしています。
https://github.com/pei223/Eel-Vue-sample
ここからはコードの解説をしていきます。
今回は、ボタンを押したらアラートを表示するという簡単なものを実装します。
PythonとJavaScript連携とVueJSコンポーネントを使うサンプルです。
Eelプロジェクトセットアップ
先ほど記載したひな形のようにディレクトリ、ファイルを用意してください。
また、今回はVueJSを使用する予定なので、view/js/libsの中にvue.min.jsを用意してください。このURLの本番バージョンの方を使用します。
https://jp.vuejs.org/v2/guide/installation.html
あとはライブラリのインストール。これだけ。
pip install eel[前提知識] PythonとJavaScriptの連携方法
Python/JS同士の関数を連携する方法は以下の通りです。
- Python処理をJavaScriptから呼び出せるようにするには関数に@eel.exposeを指定
- JavaScript処理をPythonから呼び出せるようにするにはJS関数にeel.expose(関数名)を指定
実際に相手の関数を呼び出す場合はこんな感じ。
- Python -> JavaScript： eel.<eel.expose()で指定した関数名>
- JavaScript -> Python： eel.<@eel.exposeで指定した関数名>
Eelアプリの起点となるrun.py
まずはアプリ起動時に起点となるPythonファイルを実装します。
eel.initでhtml/css/jsが入っているフォルダ、読み込みたいファイルの拡張子を指定します。
次にeel.expose。on_button_clicked関数をJavaScriptから呼び出せるように設定します。
また、on_button_clicked内でeel.showAlertを実行しているが、これはJavaScript側のshowAlert関数を呼ぶという処理です。
eel.startで最初に表示するhtmlファイルと使用するポートを指定してアプリが起動します。
import eel
# html/css/jsの入っているディレクトリを指定
eel.init('view', allowed_extensions=['.js', '.html', '.css'])
# JavaScriptから呼べるように関数を登録
@eel.expose
def on_button_clicked():
print("Button clicked[Python]")
eel.showAlert("Button clicked!")
# 最初の画面のhtmlファイルを指定
eel.start('html/index.html', port=9999)
画面の起点となるindex.html
次にレイアウト部分について。
VueJSとeel.jsのimportは忘れずにしてください。eel.jsをimportしないと連携ができなくなります。
今回はVueJSを使うのでhtmlはたいして中身はなく、実際のコンテンツ部分である#rootのdivタグをVueJSで動的に組み立てるという感じです。
最後にコンテンツ部分を描画するindex.jsをimportします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello, World!</title>
<!-- Library import -->
<script src="../js/libs/vue.min.js"></script>
<script type="text/javascript" src="/eel.js"></script>
</head>
<body>
<h2>Eel sample app</h2>
<div id="root"></div>
<script type="text/javascript" src="../js/index.js"></script>
</body>
</html>Vueコンポーネント
最後にVueコンポーネント。ボタン押したらアラートが表示されるコンポーネントを実装します。
eel.exposeでshowAlert関数をPythonから呼び出せるように設定します。
ボタンを押された時の処理は以下のような流れです。
- ボタン押したらonClicked()を実行
- Python側の処理であるeel.on_button_clickedを実行する
- run.pyに記載したように、Python側からJavaScriptの処理のshowAlertを実行する
var app = new Vue({
el: '#root',
template: `
<div>
<h3>Index component</h3>
<button @click='onClicked'>Button</button>
</div>
`,
data: {
},
mounted () {
},
methods: {
onClicked() {
console.log("Button clicked.");
eel.on_button_clicked();
},
}
})
eel.expose(showAlert)
function showAlert(message) {
window.alert(message);
}elに#rootタグ指定することで、#rootタグを動的に書き換えるようにする。
templateは中身のHTML文字列です。
動かしてみる
以下のコマンドでアプリが起動するはずです。
python run.pyこのような画面になりボタンをクリックするとアラートが表示されるはずです。また、Python側でもButton clicked[Python]がprint されているはずです。
また、もし動かなかったりしたら通常のWebサイトと同じようにデベロッパーツールが使えるので右クリック -> 検証などでコンソールにエラーが出ていないか見るといいです。
ビルド方法
公式のGithubにも書いてありますが、PyInstallerを介してExeなどのビルドが可能です。
python eel -mの後にエンドポイントのpythonファイル、html/css/jsが入っているディレクトリを指定する感じです。オプションは名前の通りです。
pip install pyinstaller
python -m eel run.py view --onefile --noconsole数少ないEel関連の情報色々まとめているのでよかったら見てみてください！