Pyodideとは

まずはちょっとしたご紹介を。　

Pyodide is a port of CPython to WebAssembly/Emscripten.

翻訳: Pyodideは、CPythonからWebAssembly/Emscriptenへの移植です。

ということで、Pyodideを使うとブラウザ側でpythonを使えるようになります。つまりPythonがインストールされていなくてもPythonの処理が動きます。　その恩恵として、Pythonの成果物をいち早くユーザ(チームメンバ、クライアント、会社内の社員、etc...)の手元に届けることができます。

弱点としては読み込みに5秒ほど時間がかかるということです。こちらはロードマップのリストに入っているので改善されることを期待(https://pyodide.org/en/stable/project/roadmap.html)

実行時の環境

macOS
python3.9

環境構築からPackageの読み込みまで

Pythonの環境構築からローカルサーバーを立てるまでのワンライナー(git clone https://github.com/pycetra/PyodideSample してから実行してください)


# python環境の構築
python3 -m venv py39
source py39/bin/activate
pip install --upgrade pip
pip install wheel

pip list > requirements.txt
python --version > python_version.txt

# 自作のPython Packageの作成
python setup.py bdist_wheel


# Pyodideのダウンロードと解凍(versionは適宜変更してください)
curl -OL https://github.com/pyodide/pyodide/releases/download/0.20.0a1/pyodide-build-0.20.0a1.tar.bz2
tar -jxvf pyodide-build-0.20.0a1.tar.bz2

# ローカルサーバの起動
python -m http.server 5000

上記コマンドを実行した後に、ブラウザからlocalhost:5000/sample.htmlへアクセスするとPyodideの起動とPackageの実行が確認できます。

各ファイルのポイント

.html file上のpathの設定が必要になります。

point: ローカルサーバーを立てたディレクトリにあわせて, "pyodide.mjs" のpathを設定すること。 (フロントエンドを初めてさわる方はご注意ください。)

./sample.html

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import { loadPyodide} from "./pyodide/pyodide.mjs";
      async function main() {
          let pyodide = await loadPyodide();
          await pyodide.loadPackage("../dist/sample-0.0.0-py3-none-any.whl");
          await pyodide.runPython(`
            from sample import hello
            hello.helloPyodide()
          `);
        };
      main();
    </script>
  </head>
  <body></body>
</html>

./setup.py

import setuptools

setuptools.setup(
    name="sample",
    packages=setuptools.find_packages()
)

./sample/hello.py

def helloPyodide():
	print('hello pyodide!!!!!!!!!!!!!!!!!!!!!')

Pythonファイルは動作確認に必要な最低限の構成にしました。
つまずきそうな部分はpathの設定くらいでそのほかはそれほど苦労しませんでした。便利ですね！

参考

本記事のgithub repository: https://github.com/pycetra/PyodideSample