PyScriptとMonaca Educationでmatplotlibを動かしてみました
アシアル情報教育研究所・所長の岡本雄樹です
先日PythonのカンファレンスPyCon2022でAnaconda社が『PyScript』という技術をオープンソースで公開したことが話題になっています。
ブラウザ上でサーバーの力を借りずにクライアント側だけでPythonを動かす技術としては、『Brython』や『Pyodide』が存在しますが、『PyScript』は『Pyodide』を応用した技術になります。
なお『Pyodide』を高等学校の「情報I」で活用しようという研究については、岩手県立大学大学院の周藤祐汰等が2021年度の情報教育シンポジウムにて発表しています。
情報学広場：情報処理学会電子図書館：Python実行サーバを必要としないオンラインプログラミング環境の開発
Monaca EducationでPythonを動かす方法と課題
Monaca Educationでは『Brython』ベースのプロジェクトのテンプレートを提供しており、情報Ⅰの教科書に載っているようなプログラムがブラウザ上で動くようにサポートしています。『Brython』はJavaScriptだけで実装されたPythonの処理系で、JavaScriptとも連携できるのでplotly.jsをラップしてグラフを描画することも可能です。
処理系がコンパクトなので高校の一斉授業でも回線に負担を掛けず扱いやすいのですが、matplotlibやnumpy等のPythonで良く使われるライブラリをそのまま動かすことは仕組み的に不可能です。
実はPythonのライブラリはPythonで実装されていないものが多いため、Pythonが動くだけだとライブラリまでは動かないのです。
今回登場した『PyScript』で使われている『Pyodide』の場合は、matplotlibなどの主要ライブラリも移植されているため、より高度な内容を実現できる可能性があります。
なお、『PyScript』は現時点でアルファ版の扱いです。また、『PyScript』の内部で使われている『Pyodide』もバージョンが0.2となっているため、今後、呼び出し方などに変更があることが十分に考えられます。あくまで2022年05月16日時点の検証記事であることをご了承下さい。
PyScriptとMonaca Educationでmatplotlibを動かしてみました
文部科学省が公開している情報Ⅰの教員研修用資料にあるグラフのプログラムを元に、情報Ⅰで使われるようなグラフの描画をPyScriptで実現できるか検証してみました。
PyScriptサンプル(生命体の増加シミュレーション)
移植メモ
py-envの部分でmatplotlibを指定することでmatplotlibが使えました。
ソースコード部分は『plt.show()』の部分を『plt』に変更するだけで動きました。
PyScriptサンプル(物体の放物運動のシミュレーション)
移植メモ
mathはpy-envで指定する必要ないみたいです。
ソースコード部分は生命体の増加シミュレーションと同様の移植で動作しました。
PyScriptサンプル(ランダムウォークのシミュレーション)
移植メモ
py-envの部分でmatplotlibとnumpyを指定しています。
ソースコード部分は生命体の増加シミュレーションと同様の移植で動作しました。
PyScriptとMonaca Educationを活用した情報Ⅰの授業展開に関する考察
PyScriptでグラフを描画する際に少し工夫する必要はありますが、Monaca Educationの組み合わせであれば、matplotlibを利用できることが分かりました。
なお、『Pyodide』はファイルサイズが大きいため、『matplotlib』と『numpy』をセットで利用する場合は約20MBの転送が発生します（キャッシュは効きますので初回だけ）。
また、メモリ8GBのPCで社内オンライン会議中にデモした際に動作が重かったので（グラフ描画に1分程度掛かった）、メモリが4GB相当のGIGAスクール端末だと通常利用でも動作が重いかもしれません。
簡単なプログラムの実習では引き続き『Brython』の方が扱いやすそうですが、情報Ⅰと数学を連携させた授業の展開などでは『PyScript』方式を活用することで、指導の幅が広がりそうです。
おわりに
Monaca Educationでは2022年度よりPython対応を行い、専用の印刷教材もリリースしております。情報Ⅰの実習用教材としてぜひご活用下さい。
おまけ
Monaca EducationでインポートできるPyScriptのサンプルプロジェクトを置いておきます。
PyScriptサンプル(生命体の増加シミュレーション)をインポートする
PyScriptサンプル(物体の放物運動のシミュレーション)をインポートする
PyScriptサンプル(ランダムウォークのシミュレーション)をインポートする
参考情報
PyScript | Run Python in your HTML