はじめに

AnacondaがリリースしたPyScriptというフレームワークはHTMLにPythonを書き込むことができます。
この記事ではちょっとだけ試してみたいと思います。

1. PyScriptをインポートする

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

二行のコードだけでPyScriptが使えるようになります。

2. 基本の使い方

Pythonを書き込むために、

<py-script> </py-script>

というタグが必要です。

それでは、簡単に定番のHello World!をやってみましょう。

helloWorld.html

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

実行すると、

本当にWebページに文字列が表示されました。
(補足: Chromeは推奨だそうで、Safariなどのブラウザはうまく実行できないかもしれません)

3. HTMLにグラフを描いてみる

グラフを描く前に、もう少しPyscriptの書き方を紹介します。

1. Pythonのように、何らかのライブラリーをインポートしたい時、

<py-env> </py-env>

というタグが必要です。

2. pyscript.write()

pyscript.write()を使うと、特定のidに書き込めます。

pyscript.write(arg1, arg2)
arg1: id
arg2: 書き込みたい情報

pyWrite.html

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    </head>

  <body>
    <div id="blue" class="alert alert-primary"></div>
    <div id="red" class="alert alert-danger"></div>
    <py-script>
pyscript.write('blue', "In blue.")
pyscript.write('red', "In red.")
    </py-script>
  </body>
</html>

これを実行すると、

In blueはちゃんとid="blue"のdivに入ってます。(In redも同じです)

それではmatplotlibを使って、グラフを描きましょう！

<head>
  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
  <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  <py-env>
    - numpy
    - matplotlib
  </py-env>
</head>

PyScript、numpyとmatplotlibをインポートします。

<body>
  <h1>二次関数図を描こう</h1>
  <div id="quad"></div>
  <py-script output="quad">
import matplotlib.pyplot as plt
import numpy as np

x = x = np.arange(-10, 10, 0.1)
y = x*x

fig, ax = plt.subplots()
ax.plot(x, y)
fig
  </py-script>
</body>

まず、普通にpythonコードが書けるようになります!
そして見て欲しいのはこちらのコード↓

<py-script output="quad">

この書き方はグラフの結果をid=quadのdivに書き込むという意味です。
↓と一緒です！

pyscript.write('quad', fig)

フルコード

plot.html

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
      </py-env>
    </head>

  　<body>
    　<h1>二次関数図を描こう</h1>
    　<div id="quad"></div>
    　<py-script output="quad">
import matplotlib.pyplot as plt
import numpy as np

x = x = np.arange(-10, 10, 0.1)
y = x*x

fig, ax = plt.subplots()
ax.plot(x, y)
fig
    　</py-script>
  　</body>
</html>

実行すると、

おわりに

Pythonが直接HTMLに書き込めることはとても便利です。
これからも機械学習などに応用できればいいと思います。

【Python】PyScriptで、HTMLにPythonを書き込む