PyScript触ってみた - 鹿色のIT雑記

ちょっと前ですが話題になっていたので、少し触ってみました。

HTMLの中にPythonを記述できるものです。

グラフなども記述できたりするようなので、データ分析した結果をそのままHTMLに書き出したい時などに便利なんですかね？

が、Jupyterなどで可視化してHTML形式でエクスポートするのとどちらが便利かと言うと…？と言うところな気がするので、動的なデータを扱うのに向いているのかもしれません。

とにかくちょっと触ってみようと言うことで、いくつかのドキュメントを参考に、ハローワールドしてみました。

※ ライブラリを読み込んでから処理が開始されるため、文字の表示まで少し時間がかかります。

※※ ライブラリの容量が5MB程度あるので、WIFI環境で見ていただく方が良いかと思います。

他のブログ記事だとバージョンが違っているのか、

<py-script> print('Now you can!') </py-script>|

を入れることでDOMが生成されて画面上に文字が表示されていたようなのですが、今回試した2024.1.1のバージョンでは、コンソールログに出力されるようになっていたようで、若干そこでハマりました。

ちゃんと公式ドキュメントのFirst steps - PyScriptに載っているので、やっぱり公式ドキュメントが大事ですね。

jsとcssのライブラリを読み込んだ上で、

<py-script>
from pyscript import display
display("初めまして")
</py-script>

のようなPython スクリプト形式のコードを埋め込むことで、画面に文字が表示されます。

ここまでで若干気になったのは、VSCodeを利用していてオートフォーマット機能を有効にしていると、HTMLとして判定されてしまってPythonのコードが一行にまとめられてしまって動かなくなることですね。

ドキュメントにあるように、Pythonのコードは別のファイルから読み込む方が書きやすいかもしれません。

こんな感じで読み込めます。

<script type="mpy" src="main.py"></script>

Python terminal - PyScriptのページにあるような、ターミナルからのインタラクティブ操作も試してみました。

ローカルで実行する際には、SharedArrayBufferの問題に引っかかるので、親となるHTMLのレスポンスヘッダに以下の内容を加えて試してみてください。

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

以下は、公式のサンプルをそのまま利用した、入力値をそのまま画面出力するもの…なのですが、GitLab側の設定変更が必要なため、SharedArrayBufferの問題に引っかかってうまく動いていないですね…

また別のタイミングでGitLabの設定変更方法を調査して動かしてみようと思います。

グラフを書くためには別途パッケージのインストールが必要となります。

Configuration - PyScriptを参考に、config属性を追加してnumpyとmatplotlibを利用できるようにします。

tomlという拡張子の別のファイルに書くことができるので、そちらから読み込む形にします。

<script type="py" src="4th_step.py" config="4th_step.toml"></script>

なお、type="mpy"としているとライブラリの読み込み時にCORSエラーが発生してしまうため、気をつけてください。

あまり詳しく調べてはいませんが、configをjson形式で書く場合にmpyとする必要がありますが、その場合も同じくCORSエラーとなってしまうので、ライブラリの取得方法の実装が異なるのかもしれません。

以下は、ランダムに10箇所に散布図の点を打つサンプルです。

単に使うだけならそこまで問題ないですが、少し凝ったことをしようとするとネットワーク周りの知識が要求されるので、結構使い始めるのが難しいものだなと思いました。

既存のホームページにPythonの既存のコードを流用して何か可視化したいものがある場合や、機械学習関係のライブラリを動かしたり、夢はあるんですかね？

数年前から、TensorFlow Liteのようなモバイル端末で動作するディープラーニング系のライブラリもあるので、PyScriptが目指すところではなさそうな気もしますが。

取り組みは意義のあることだと思いますが、自分の用途だと、Jupyterで十分かなと思いました。