「PyScript」でインストールなしで、Pythonコードの実行環境を構築

2022年5月15日 20:02

自作のpythonコードを、他の人に、インストールなしで共有したいと考えていたところ、PythonコードをHTML内に記述して実行可能なAnacondaが公開したとのことだったので、少し手を動かしてみて、動作を確認した。その感想です。

VSコードなど、コードをある程度かける方が前提ですが、HTMLに以下の記載をすれば、Pythonコードが動くので、そのHTMLを共有すれば、作ったスクリプトなどの共有がすぐできる点がいいと思いました。Jupiternotebookの簡易版としても使えると思います。

　<head>タグに以下を記載：これにより「PyScript」を動くHTMLにします。

    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

　<head>タグに、インポートしたいライブラリー以下のように記載すれば、使いたいライブラリーも動きます。

 <py-env>
        - pandas
        - matplotlib
        - seaborn
        - numpy
    </py-env>

　<py-script></py-script>タグに、ただ、書きたいpythonコードを書くだけです。ここでは、<div>タグの中に、<py-script></py-script>のmatplotlibのグラフを入れたいので、それをつかってるだけです。

<div id="plot"></div>

<py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np

x = np.random.randn(1000)
y = np.random.randn(1000)

fig, ax = plt.subplots()
ax.scatter(x, y, c='Blue', alpha=0.5)
fig

</py-script>

　<py-repl></py-repl>を記載すれば、HTML上にJupiternotebookが出現すると思っていいです。

<py-repl></py-repl>

あとは、HTMLファイルをブラウザで読み込めば、すぐにpythonコードが動きますし、<py-repl></py-repl>のところは、Jupiternotebookと同じなので、ターミナルとして使うことができます。
HTMLのコード全体は以下です。これだけなので、簡単にpythonコードを動かしたいという方はこれで練習するのもいいと思います。

なお、ネットで動かしてるので、少し最初の通信に少し時間がかかります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>_note</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env>
        - pandas
        - matplotlib
        - seaborn
        - numpy
    </py-env>
</head>
<div style="background-color: bisque">_note</div>
<body>
<div id="plot"></div>

    <py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np

x = np.random.randn(1000)
y = np.random.randn(1000)

fig, ax = plt.subplots()
ax.scatter(x, y, c='Blue', alpha=0.5)
fig

</py-script>
    <py-repl></py-repl>

</body>
</html>

公式サイト：

デモページ：

この記事が気に入ったらサポートをしてみませんか？