[Python]話題のPyScirptの使い方(動作確認)

PyScriptとは
標準ライブラリを使ってみる
外部ライブラリを使ってみる
まとめ

PyScriptとは

HTML上にPythonのコードを記載して実行できる環境が構築できます。

初めての方は前回のリンクを参考にしてみてください。

今回は実際にライブラリなどを呼び出して、ちゃんと動作するか確認してみます。

こちらの動画がとても分かりやすいので参考にしました。

標準ライブラリを使ってみる

まずはPythonのバージョン確認もかねてsysをインポートしてみます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>PyScript TEST</title>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>
    <body>
        <py-script>
            import sys
            print(f'バージョン：{sys.version_info}')
        </py-script>
    </body>
</html>

Pythonバージョンをprintで出力すると、以下のように表示されます。

datetime

次にdatetimeをインポートしてみます。現在時刻を表示してみます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>PyScript TEST</title>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>
    <body>
        <py-script>
            import datetime
            print(datetime.datetime.now())
        </py-script>
    </body>
</html>

実行した日時が出力されました。

外部ライブラリを使ってみる

グラフ描画（Pandas+altair）

グラフ描画してみました。

外部ライブラリを使う場合には、<py-env>で指定することで利用できます。

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
        <py-env>
            - altair
            - pandas
        </py-env>
    </head>
    <body>
        <h1>PyScript+Pandasグラフ表示</h1>
        <div id="test"></div>
        <py-script output="test"> 
import altair as alt
import pandas as pd

source = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E'],
    'b': [10, 20, 30, 20, 10]
})

alt.Chart(source).mark_bar().encode(
    x='a',
    y='b'
)
        </py-script>
</html>