PyScriptの紹介
- 1. 1年ぶりの発表だよ！
- 2. しくじりそうな予感
- 4. お前誰よ • 2bo (@2box2bo) • お仕事 サーバーインフラ園児にあ • 趣味 酒、本、ボードゲーム • 住んでるとこ 岐阜（名古屋の植民地） • 最近のあ メンタルが死んでいる
- 7. PyScriptとは？ • PyCon US 2022でAnaconda社から発表のあった PythonでWebアプリケーションが開発できるフ レームワーク • Apache License 2.0ライセンスでオープンソース • 公式：https://pyscript.net/ • GitHub：https://github.com/pyscript/pyscript •
- 8. どういう仕組み？ • ようわからんけどWASMとPyodideを組み合わせ てるみたい • Pythonの実際の動作部分はPyodideみたい • PyScriptはPyodideを使いやすくしたイメージ • Anacondaの発表 https://anaconda.cloud/pyscript-python-in-the-browser
- 9. 何ができる？ • WebブラウザでPythonが動く • ということはスマホでも動く • 推奨ブラウザはChrome • Pythonの各種パッケージが使える • Javascriptと連携できる(みたい?)
- 14. デモ1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo_01</title> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body> <h1>デモ1 こんにちわ世界</h1> <py-script> print('Hello, World!') </py-script> </body>
- 16. デモ2 <body> <h1>デモ2 Pythonからの出力</h1> <py-script> a = 758 b = 2022 def tasizan(a, b): x = a + b return x print(f"{ a } と { b } を足すと { tasizan(a, b) } になります。") </py-script> </body>
- 18. デモ3 <body> <h1>デモ3 エラー出力</h1> <py-script> a = 758 b = 2022 def tasizan(a, b): x = a + b return x print(f"{ a } と { b } を足すと { tasizan(a, b) } になります。") </py-script> </body>
- 20. デモ4 <body> <h1>デモ4 標準モジュールと出力方法1</h1> <br> <b><p>今日は<u><label id='today'></label></u>です。</p></b> <br> <div id="pi" class="alert alert-primary"></div> <py-script> import datetime as dt # pyscript.write(ID, 値)で出力 pyscript.write("today", dt.date.today().strftime("%Y/%m/%d(%a)")) def compute_pi(n): pi = 2 for i in range(1,n): pi *= 4 * i ** 2 / (4 * i ** 2 - 1) return pi pi = compute_pi(100000) pyscript.write('pi', f'π is approximately {pi:.3f}') </py-script> </body>
- 21. デモ5 • `pyscript.write`メソッドだでけなく、`<py- script output="hoge"`といった形でも指定可能 • この場合、最後に指定した変数がid:hogeにな る • Print文で出力した内容も含まれるので出力全般 が使えるみたい…だけど、よくわかってない
- 22. デモ5 <body> <h1>デモ5 出力方法2</h1> <py-script output="hoge"> a = 1 + 1 hoge = "(｀･ω･´)ゞ" print(a) hoge </py-script> <br> にゃーん <div id="hoge" style="color: red;"></div> </body>
- 23. デモ6 • 3rdパーティーのモジュールはPyodideで対応さ れていれば`py-env`タグで指定して利用可能 • もしくは`.whl`ファイルに記載してもOK • 利用可能モジュールの一覧 https://github.com/pyodide/pyodide/tree/ main/packages
- 24. デモ6 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo_06</title> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <py-env> - numpy - matplotlib </py-env> </head> <body> <h1>デモ6 外部モジュールの利用</h1> <div id="plot"></div> <py-script output="plot"> import numpy as np import matplotlib.pyplot as plt x = np.random.randn(1000) y = np.random.randn(1000) fi g, ax = plt.subplots() ax.scatter(x, y) fi g </py-script> </body>
- 25. その他 • `<py-con fi g>`タグで設定なんかもできそう • こんなタグでUIも作れるっぽい • `<py-inputbox>` • `<py-box>` • `<py-button>` • `<py-title>`
- 27. おわり