はじめに
2022年5月に発表されたWebブラウザ上で動くPyScriptですが、その後も高速化などの改善が行われ、いつのまにかMicroPythonの実行もできるようになっていたので、紹介しておきます。
Pyodide (WebAssembly 用にコンパイルされた CPython)に比べて、まだまだサポートが弱そうですが、ランタイムが170KB程度と小さいので、DOM操作程度であればMicroPythonを用いたほうが高速に処理できるでしょう。
PyScriptのテンプレート
PyScript
基本は、HTMLの <head> タグのコンテンツとして次の１行を加えるだけで PyScript が使えるようになります(本記事の執筆時点)。
<script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
実際は charset や関連のCSSも指定することが推奨されているので、まとめると
次のテンプレートのようになります。この中の <body> タグのコンテンツ内に PyScript を書いていくことになります。
<!doctype html>
<html>
<head>
<!-- Recommended meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- PyScript CSS -->
<link rel="stylesheet" href="https://pyscript.net/releases/2023.11.2/core.css">
<!-- This script tag bootstraps PyScript -->
<script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
</head>
<body>
<!-- your code goes here... -->
</body>
</html>
MicroPython タグ
MicroPython スクリプトは <mpy-script> タグか <script type="mpy"> タグに記載します。たとえば、次のように記載します。
<mpy-script>
from pyscript import display
display("Hello, world(1)!")
</mpy-script>
<script type="mpy">
from pyscript import display
display("Hello, world(2)!")
</script>
※ print() 関数では表示できなかったので pyscript.display() 関数を使って表示しています。
Webブラウザで表示すると、次のようになります。
DOM の操作
簡単な DOM 操作の例を示します。ボタンを押すと、<div> タグのコンテンツとして MicroPython バージョンの情報を挿入するものです。
<button mpy-click="display_mpy_version">Display MPY Version</button>
<div id="output"></div>
<script type="mpy" config='{ "packages": ["arrr"] }'>
import sys
from pyscript import document
def display_mpy_version(event):
output_div = document.querySelector("#output")
output_div.innerText = str(sys.implementation)
</script>
Webブラウザにロードして、ボタンを押すと次のように表示されます。
PyScriptの MicroPython は現状、バージョン 1.20.0 の WebAssembly版がベースになっているようです。