PythonとJavaScriptを組み合わせてGUIアプリケーションを開発する方法について説明します。特に、PythonのEelライブラリを使用した方法に焦点を当てます。
Eelとは
EelはPythonのGUIライブラリで、HTML/CSS/JavaScriptを使用してGUIを構築することができます。EelはElectronのようなライブラリですが、よりシンプルで軽量です。
Eelのインストール
Eelのインストールはpipを使用して行います。
pip install eel
Eelを使用したHello World
以下に、Eelを使用してHello Worldプログラムを作成する例を示します。
# main.py
import eel
eel.init("web")
eel.start("main.html")
<!-- main.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Eel</title>
</head>
<body>
Hello World!!
</body>
</html>
このコードを実行すると、新しいウィンドウが開き、その中に”Hello World!!”と表示されます。
PythonとJavaScriptの連携
Eelを使用すると、PythonとJavaScriptの間で簡単にデータをやり取りすることができます。以下に、PythonからJavaScriptの関数を呼び出す例を示します。
# main.py
import eel
import numpy as np
eel.init("web")
eel.js_function(np.random.rand(4).tolist()) # JSON serializableでないとダメ
eel.start("main.html")
<!-- main.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Eel</title>
</head>
<body>
<div id="target"></div>
<script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript">
eel.expose(js_function)
function js_function(values) {
var s = ""
for (var i = 0; i < values.length; i++) {
s += values[i] + "<br>"
}
document.getElementById("target").innerHTML = s
}
</script>
</body>
</html>
このコードを実行すると、新しいウィンドウが開き、その中にPythonから生成されたランダムな数値が表示されます。
以上がPythonとJavaScriptを使ったGUI開発の基本的な手順です。これを基に、自分のニーズに合わせてアプリケーションを開発してみてください。.