今回はホントに 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 10 を使っている方は、シフトキーを押しながら右クリックをすると コマンドプロンプトか Windows PowerShell が開けたはずです。
開いたターミナルに次のコマンドを入力して Webサーバー を起動させます。
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です。