【pywebview】javascriptでPython側のAPIを呼び出す

Contents

フロントエンドのイベントをバックエンドで受け取って処理をする

フロントエンドのイベントをバックエンドで受け取って処理をする

ajax通信やfetchなど、やり方は様々あるとは思いますが今回はpywebviewというライブラリを用いて、javascript側のイベントをトリガーにしてPython側の処理を走らせたいと思います。

pywebviewの開発環境を用意する

まずは下記リンクを参考にして、Pythonの開発環境を用意します。

【簡単Python】venvでサクッと仮想環境を用意してみる【Mac開発環境構築】

上記リンク先の「仮想環境を起動させる」項目まで進んだら、こちらの記事の下へ進みます。

今回作成したディレクトリ名は「pytest」で、プロジェクトのディレクトリ名は「app」となっております。また、仮想環境起動後にappディレクトリ内に「app.py」と「index.html」の２つのファイルを用意しました。

下記ディレクトリ構成参照

pywebviewライブラリのインストール

作成した仮想環境内（ここではapp）で下記コマンドにてpywebviewをインストールします。

(app) $ pip install pywebview

javascript含むindex.htmlのコード

<html>
	<head>
		<title>pywebview TEST</title>
	</head>
	<body>
		<h1>【pywebview】javascriptでPython側のAPIを呼び出す</h1>
		<button id="click_btn">Button</button>
    <div id="append_area"></div>
	</body>
	<script>
		window.addEventListener("pywebviewready", function() {
			document.getElementById("click_btn").addEventListener("click", function(){
				pywebview.api.strAppend();
			})
		})
	</script>
</html>

ButtonをクリックしたらPython側を呼び出す。

呼び出されたPython側のコード

import webview

class BrowserApi:
    def __init__(self):
        self.window = None

    def strAppend(self):
        self.window.evaluate_js(
            r"""
            var add_elem = document.createElement('p');
            add_elem.textContent = 'Hello world!';
            document.getElementById("append_area").appendChild(add_elem);
            """
            )

def threadFunction(window):
    print(window)

def main():
    with open("app/index.html", "r", encoding="utf-8") as f:
        html = f.read()

    BA = BrowserApi()

    BA.window = webview.create_window(title   = "Test App",
                                       html   = html,
                                       js_api = BA,
                                       width  = 1440,
                                       height = 900)

    webview.start(threadFunction, BA.window, debug=True)

if __name__ == "__main__":
    main()

「strAppend」メソッドが呼び出されて「self.window.evaluate_js」のところ書かれているjavascriptのコードが実行されます。

javascriptのイベント実行後のPython側の処理の結果

下記画像のようにボタン押下後、文字列が挿入され続けば完成です。

上記のような要領で、ダウンロードやアップロードなどの進捗状況をプログレスバーにパーセント表示する際に用いたらユーザービリティが向上しそうですね。

コードを書くのが面倒な方用に、下記githubに全てのソースコードアップしましたので、秒で今回の状態にまで持っていけます。

https://github.com/Global-Hack/pywebview_BrowserApi

先にこれを貼らんかい（笑）