目次
PyScriptとは
HTML上にPythonのコードを記載して実行できる環境が構築できます。
初めての方は前回のリンクを参考にしてみてください。
あわせて読みたい


[Python] 話題のPyScriptの使い方(初級編)
PyScriptとは PyScriptという気になるものが発表されました。 これを使うことでWEBブラウザ上でPythonを実行できるようになります。 HTMLではJavaScriptが一般的ですが...
今回は実際にライブラリなどを呼び出して、ちゃんと動作するか確認してみます。
こちらの動画がとても分かりやすいので参考にしました。
標準ライブラリを使ってみる
- sys
まずは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>
まとめ
ドキュメントを参考にちょっと触ってみた程度です。
面白いツールではありますが、やはりレスポンスがどうしても遅いのがネックですね。
今後のアップデートに期待したいです。
コメント