2021年10月20日水曜日

Python の WebAssembly Pydide 超入門

Python の WebAssembly Pydide 超入門

概要

Python のコードをブラウザで動かすことができる Pydide の Getting Started を試してみました
自分でコンパイル等が不要で JS のコードの中に Python を直接書くことができます

特にインストール作業等も不要で使うことができます

環境

  • macOS 11.6
  • Chrome 94.0.4606.71

とりあえず動かすサンプルコード

  • vim index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"></script>
  </head>
  <body>
    Pyodide test page <br>
    Open your browser console to see Pyodide output
    <script type="text/javascript">
      async function main(){
        let pyodide = await loadPyodide({
          indexURL : "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/"
        });
        console.log(pyodide.runPython(`
          import sys
          sys.version
          import os
          os.name
          "HELLO"
        `));
        console.log(pyodide.runPython("print(1 + 2)"));
      }
      main();
    </script>
  </body>
</html>
  • open index.html

これで以下のように動作します

実行してみるとわかりますが Python のコードはベージが読み込まれてから少し時間が経ってから表示されることがわかります

DOM の操作

DOM も操作できます
以下のサンプルでは button に設定された Python のコード sum([1, 2, 3, 4, 5]) をそのまま取得して runPython で実行しその結果を DOM に反映しています

runPython から取得できた値はそのまま js の世界でも使えるようです (ただ逆に js -> Python の世界で使う場合にはコンバートが必要です 参考)

  • vim index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"></script>
  </head>

  <body>
    <p>
      You can execute any Python code. Just enter something in the box below and
      click the button.
    </p>
    <input id="code" value="sum([1, 2, 3, 4, 5])" />
    <button onclick="evaluatePython()">Run</button>
    <br />
    <br />
    <div>Output:</div>
    <textarea id="output" style="width: 100%;" rows="6" disabled></textarea>

    <script>
      const output = document.getElementById("output");
      const code = document.getElementById("code");

      function addToOutput(s) {
        output.value += ">>>" + code.value + "\n" + s + "\n";
      }
      output.value = "Initializing...\n";
      // init Pyodide
      async function main() {
        let pyodide = await loadPyodide({
          indexURL: "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/",
        });
        output.value += "Ready!\n";
        return pyodide;
      }
      let pyodideReadyPromise = main();

      async function evaluatePython() {
        let pyodide = await pyodideReadyPromise;
        try {
          let output = pyodide.runPython(code.value);
          addToOutput(output);
        } catch (err) {
          addToOutput(err);
        }
      }
    </script>
  </body>
</html>
  • open index.html

最後に

コンパイルも不要なのでブラウザさえあれば Python を始めることができます

ちゃんとした Web アプリをこれで作るのであれば HTML, JS, CSS も書けないとダメですが JS の計算処理などを Python で書くことができるので JS をメインで書けない人はそこを Python に置き換えられるので良いかなと思います

コード中に JS と Python が出てくるので書いているとゲシュタルト崩壊しそうなのとエディタが JS も Python も補完してくれなさそうなので書くときは別で書いたほうがいいかもしれません

また Pypi を使うこともできその場合は WebAssembly 専用の「Micropip」というのを使うことになります

参考サイト

0 件のコメント:

コメントを投稿