Python

PyscriptでMatplotlibとnumpyでグラフを作成する!
【Webブラウザで動くPython】

2022年7月28日




2022年5月に「Pyscript」というフレームワークが公開されました。

これにより、HTML上にPytnonを記述することが可能になりました。


今まで、Pythonは通常のWebサーバーで動作しにく(Gitでないと動作しない)ため、Web上で使用するには少し厄介なところがありましたが、「Pyscript」の登場により、HTML上に記述して、簡単に実行することが可能となったのです。

"フレームワーク"という名前で、つい難しく聞こえますが、
ぶっちゃけ、5分でマスター出来るので、ぜひ下記のサンプルコードを参考に実験してみてください!

Matplotlibとnumpyでグラフを作成するサンプル

<!DOCTYPE html>
 
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="ここにページの概要が入ります。">

        <title>PyScriptテスト</title>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
        <py-env>
            - matplotlib
            - numpy
        </py-env>
    <body>
        <div id="mpl"></div>
        <py-script output="mpl">
            import matplotlib.pyplot as plt
            from matplotlib import cm
            from matplotlib.ticker import LinearLocator
            import numpy as np

            x = np.arange(-5,5,0.1)
            y = np.sin(x)

            plt.plot(x,y)
            plt #グラフを描画 plt.show()のshow()は不要
        </py-script>

    </body>
</html>

【実行結果】

解説

※ここでは、HTMLの知識とPythonの知識があることが前提のため、それらの解説は省略いたします。

10行目・11行目
Pyscriptはインストールを必要としません。<head>タグ内に下記の2行を記述して、読み込むだけです。

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

12行目~15行目
<py-env></py-env>内に必要なライブラリを読み込みます。
使用できる外部ライブラリは下記で確認することが出来ます。

https://pyodide.org/en/stable/usage/packages-in-pyodide.html

他にも有名なものだと、pandasやscikit-learnなども使えるようじゃ!

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

18行目~29行目
ここからはいつも通りのPythonコードを記述していきます。
importは必要なので、忘れずに。

注意としては、28行目「plt」の部分のみです!
本来のPythonでは、plt.show() となりますが、Pyscriptの場合は、show()を省略します。
ほかのライブラリでも、描画のコードは変わっている場合があります。

PyScriptは非常にアルファ版であり、現時点では、PyScriptを本番環境で使用することはお勧めしません。
公式サイトに記載されておりますので、ご注意ください。

相談・質問を募集しています。

記事に関する相談・質問を募集しています。

是非この機会にどうぞ
コメントでの質問も大歓迎です!

ハヤぶろぐのLINE@登録はこちら


メールの方はこちら




-Python