WordPressでPyScriptを使ってみた

2022-05-05 2022-06-27

Hide

PyCon US 2022のキーノートでAnacondaからブラウザー上Python実行環境PyScriptが発表された。αバージョンだが、既にNumpy, Pandasなどの外部モジュールに対応しているとのこと。早速WordPressでの動作を確認してみた。

環境

WordPress 5.9.3
Lightning 14.20.3
Safari 15.4 or Google Chrome 101.0.4951.54
MacOS 12.3.1
Apple M1 Pro

クライアントサイドなのでサーバ環境は関係ないかと。

動作確認

WordPressブロックエディターのカスタムHTMLブロックに入力するだけで実行される。PyScriptのJavaScript（ややこしい？）とCSSを読み込みPythonコードをpy-scriptタグで囲む。

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script>
print("Hello, world!")
</py-script>

実行結果

print("Hello, world!")

ハローワールドはいできました。「動作確認」、「実行結果」など本サイトの記事見出しは本来大きい太字フォントの設定だが、PyScriptのCSSが干渉するのか意図した表示にならない。

インデントの解釈にバグあるらしく、スペースでもタブでもIndentationErrorが出る（2022年5月5日現在）。

<py-script>
for i in range(5):
    print(i) 
</py-script>

実行結果

for i in range(5): print(i)

Numpyも実行される。出力先の指定が必要な模様。

<py-script output="mpl">
import numpy as np
print(f"π = {np.pi}")
</py-script>
<div id="mpl"></div>

実行結果

import numpy as np print(f'π = {np.pi}')

Matplotlibのグラフは表示されない。

<py-env>
- matplotlib
</py-env>
<py-script output="mpl2">
from matplotlib import pyplot as plt
import numpy as np
x = np.linspace(0, 2 * np.pi)
y = np.sin(x)
fig, ax = plt.subplots()
ax.plot(x, y)
plt.show()
</py-script>
<div id="mpl2"></div>