最新の技術に興味がある。ブラウザでPythonが動かせる「PyScript」があると聞いた。
概要を紹介して欲しい。
こんなお悩みを解決します。
Anaconda社から、HTMLでPythonコードを実行できるPyScriptが公開されました。
今回は、実際にコードを書いてどのように動作するかを体験してみたいと思います。
発端
2022年5月1日にTwitter上で以下のようなツイートがされました。
このツイートには、Pythonコードが混在したHTMLをブラウザで開くとPythonアプリケーションを動かすことができるよ！ということが書かれていました。
ブラウザでPythonが動かせると分かった時点で動かすしかない、と思い実際に導入してみました。
ブラウザでPythonを動かすための準備
事前準備としてcssファイルとjavascriptファイルの読み込みが必要となります。
詳細は、コチラに記載されています。
具体的な作業内容としては、以下のコードを<head>要素内に記載します。
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css">
<script defer="" src="https://pyscript.net/alpha/pyscript.js"></script>
実装
まずは、お馴染みのHello Worldから表示させたいと思います。
実装結果と出力結果は以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>PyScript Sample</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div style="margin-left: 10px;">
<p>Hello World in HTML</p>
<hr>
<py-script>
print('Hello World in Python')
</py-script>
</div>
</body>
</html>
期待通りの出力結果が得られました。
文字の結果だけですとつまらないので、視覚的に分かる事例も用意しました。
以降は、matplotlibを利用して図を描画することになりますが、その際の注意点として、<head>要素内に以下のコードを記載する必要があります。
<py-env>
- matplotlib
</py-env>
散布図
平均0、分散2の散布図を表示します。データは1000点としました。
実装結果と出力結果は以下のようになります。
本サイト上ではPythonの出力結果を張り付けたのと区別がつかないですが、下記のコードを作成し、ブラウザで開くと同じものが表示されます。
<!DOCTYPE html>
<html>
<head>
<title>PyScript Sample</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script> defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- matplotlib
</py-env>
</head>
<body>
<div> id="mpl"></div>
<py-script> output="mpl">
import numpy as np
import matplotlib.pyplot as plt
np.random.seed(1)
[x, y] = np.random.normal(0.0, 2.0, (2, 1000))
fig, ax = plt.subplots()
ax.scatter(x, y)
ax.set_xlabel('x')
ax.set_ylabel('y')
fig
</py-script>
</body>
</html>
3次元プロット
以下の式で与えられるメキシカンハット関数を描画しました。
$$
\begin{eqnarray}
f(x,y) = \frac{\sin(\sqrt{x^{2} + y^{2}})}{\sqrt{x^{2} + y^{2}}}
\end{eqnarray}
$$
実装結果と出力結果は以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>PyScript Sample</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- matplotlib
</py-env>
</head>
<body>
<div id="mpl"></div>
<py-script output="mpl">
import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D
fig = plt.figure(figsize=(10, 10))
ax = fig.add_subplot(111, projection='3d')
# setup label
ax.set_xlabel('x')
ax.set_ylabel('y')
ax.set_zlabel('z')
# generate dataset
n_data = 256
min_val, max_val = -3 * np.pi, 3 * np.pi
x = np.linspace(min_val, max_val, n_data)
y = np.linspace(min_val, max_val, n_data)
X, Y = np.meshgrid(x, y)
denominator = np.sqrt(X * X + Y * Y)
numerator = np.sin(denominator)
Z = numerator / denominator
ax.plot_surface(X, Y, Z)
fig
</py-script>
</body>
</html>
どちらも期待通りのグラフが出力されました。
その他の事例
Anaconda社が公開しているデモがあります。
百聞は一見に如かずということで、実際にどのような使い方があるかを確認するのも面白いと思います。
https://pyscript.net/examples/
上記のサイトに記載がありますが、Interactiveな処理にも対応しているみたいです。
次の機会にでも遊んでみようと思います。
さらに詳しく知りたい方へ
PyScriptのGitHubのページがあります。
こちらにライブラリのソースコードやデモで使われているHTMLがあるので、興味がある方は一度確認してみてください。
https://github.com/pyscript/pyscript
https://github.com/pyscript/pyscript/tree/main/pyscriptjs/examples