ゼロからはじめるPython(110) ブラウザでPythonを動かすPyScriptでグラフを描こう

ブラウザ上でPythonを動かすライブラリPyScriptがとても便利だ。Pythonの便利機能をブラウザだけで利用できるため、ちょっとしたツールを配布する際にも便利だ。NumpyやPandasなど有名なライブラリも利用できる。今回は、PyScriptとMatplotlibを利用してブラウザ上でグラフを描画してみよう。

ブラウザで動くPyScriptとMatplotlibでグラフを描画しよう

PyScriptとは？

PyScriptとは、HTMLの中にPythonのスクリプトを書いて実行できる実行環境だ。Anacondaが開発しており「99%の人にプログラミングを提供すること」を目標に挙げている。

PyScriptのWebサイト

PyScriptが強力なのは、JavaScriptなどにコンパイルされて実行される訳ではなく、WASMを利用してC言語で実装されたPythonそのものをブラウザ上で動かしている点にある。これは、以前、本連載でも紹介したPyodide(https://pyodide.org/)をベースにして開発されており、効率的にPythonのプログラムを実行できる。Anacondaによる解説によると、下記のような仕組みとなっている。

Pyodideをベースにして作成されている

なお、Pythonを使うメリットには、使いやすく便利なライブラリの存在が挙げられる。それで、PyScriptでも、Numpy、Pandas、Scikit-learnなど有用で有名なライブラリが利用できるよう配慮されている。

今回は、Pythonでグラフを描画するのに便利なライブラリMatplotlibを利用して、グラフを描画してみよう。

PyScriptを使うには？

PyScriptで開発をするのに必要なのはブラウザだけだ。HTMLに以下のようなタグを記述すると、自動的にブラウザがPyScriptの実行エンジンをダウンロードして実行してくれる。以下が画面に「Hello, World!」と表示するだけの最も簡単なプログラムだ。

<head>
<meta charset="utf-8">
<!-- PyScriptの読み込み --- (*1) -->
<link rel="stylesheet" href="https://pyscript.net/releases/2023.11.2/core.css" />
<script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
</head>
<body>
<script type="py" terminal>
    # ここにPythonのプログラムを記述 --- (*2)
    print("Hello, World!")
</script>
</body>

上記のコードを「hello.html」という名前で保存して、Webブラウザにドラッグ＆ドロップすると、次のように画面に「Hello, World!」と表示する。

一番基本的なプログラム

HTMLのコードを確認してみよう。(＊1)では、PyScriptを使うために必要なコードだ。この二行のコードを記述することでPyScriptが利用可能になる。

そして、(＊2)の部分にPythonのプログラムを記述する。<script type="py" terminal>と書くことで、擬似的なターミナルを作成し、print文などの出力を表示できるようになる。

グラフを描画してみよう

次に、Pythonでよく使われるデータ視覚化ライブラリのMatplotlibを使ってみよう。Matplotlibを使うと手軽にグラフを描画できる。以下は、Matplotlibで簡単なサイン波を描画するものだ。

<head>
<meta charset="utf-8">
<!-- PyScriptの読み込み -->
<link rel="stylesheet" href="https://pyscript.net/releases/2023.11.2/core.css" />
<script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
<!-- PyScriptで使うパッケージを指定 --- (*1) -->
<py-config>
    packages = ["matplotlib"]
</py-config>
</head>
<body>
<!-- グラフの描画先を指定 --- (*2) -->
<div id="mlp" align="center"></div>
<script type="py">
    # ライブラリのインポート宣言 --- (*3)
    from pyscript import display
    import matplotlib.pyplot as plt
    import numpy as np
    # サイン波を描画 --- (*4)
    x = np.linspace(0,10,100)
    y = np.sin(x)
    fig = plt.figure()
    plt.plot(x,y,c="r",label=r"sine")
    plt.grid()
    plt.legend()
    # グラフのレンダリング --- (*5)
    display(plt, target="mlp")
</script>
</body>

上記のHTMLコードを「sine.html」という名前で保存したら、Webブラウザにドラッグ＆ドロップしてみよう。すると、次のように表示される。