Html で Python を動かす

Uncategorized
748 words

今回はホントに Html で Python を動かしてみます。

実際に動かしてみた感想は、出来ることが少ないのであまり魅力を感じませんでした。

一応こんな技術もあるのかって感じで、覚えておいてくれればいいかなと思います。

環境

  • Windows 11 Home 21H2 (22000.434)
  • Python 3.10.1
  • Brython 3.10.4

Brython

今回使うモジュールは Brython です。

ブラウザ上で動かすので pip でインストール必要はありません。

ですが WebSocket を使って Python ファイルを読み込むので、実行には Webサーバー が必要です。ここがメンドクサポイントです。 作ったHtmlをダブルクリックしても動かないんですよね。

作業フォルダ

まず作業用フォルダを作成して、その中にカラのファイルを作っていきます。

私はとりあえずこんな感じでサクッと作りました。

ファイルの中身はまだカラです。

index.html

各ファイルにそれぞれ次のソースをコピペします。Brython は CDN で読み込んでいます。

1
2
3
4
5
6
7
8
9
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.7/brython.js"></script>
</head>
<body onload="brython()">
<script type="text/python" src="main.py"></script>
</body>
</html>

main.py

1
2
from browser import document
document <= "Hello !"

動作確認

ここまで出来たら動作確認をします。

先ほど作った作業フォルダで右クリックをして Windows ターミナル を開きます。

Windows ターミナルで開く

Windows 10 を使っている方は、シフトキーを押しながら右クリックをすると コマンドプロンプトか Windows PowerShell が開けたはずです。

開いたターミナルに次のコマンドを入力して Webサーバー を起動させます。

1
python -m http.server

python httpserver

Webサーバー が起動したらブラウザを開いて http://localhost:8000 にアクセスすれば、今作った Html と Python が実行されます。

動作確認

応用編 (電卓)

動いてる感じがするけど、こんなの見てもつまらないので チュートリアル にある電卓を試してみたいと思います。

index.html

1
2
3
4
5
6
7
8
9
10
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.7/brython.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body onload="brython()">
<script type="text/python" src="main.py"></script>
</body>
</html>

CSSの読み込みが増えただけですね。

index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*{
    font-family: sans-serif;
    font-weight: normal;
    font-size: 1.1em;
}
td{
    background-color: #ccc;
    padding: 10px 30px 10px 30px;
    border-radius: 0.2em;
    text-align: center;
    cursor: default;
}
#result{
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    padding: 10px 30px 10px 30px;
    text-align: right;
}

main.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
from browser import document, html

def action(event):
    element = event.target
    value = element.text
    if value not in "=C":
        if result.text in ["0", "error"]:
            result.text = value
        else:
            result.text = result.text + value
    elif value == "C":
        result.text = "0"
    elif value == "=":
        try:
            result.text = eval(result.text)
        except:
            result.text = "error"

calc = html.TABLE()
calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) + html.TD("C"))
lines = ["789/", "456*", "123-", "0.=+"]
calc <= (html.TR(html.TD(x) for x in line) for line in lines)
document <= calc
result = document["result"]

for button in document.select("td"):
    button.bind("click", action)

動作確認

ファイル構成はこんな感じになるはずです。

ファイル構成

先ほどと同じようにブラウザで http://localhost:8000 にアクセスして動作確認をしてみます。

電卓で計算ができればOKです。

電卓