snovaのブログ

主にプログラミングやデジタルコンテンツについて書きます。最近はPython, Flutter, VRに興味があります。

インストールや登録不要で使用できるPython環境構築(Pyodide)

はじめに

Python環境の構築にはいくつかありますが、代表的な例を紹介します。

  • 公式サイトからインストーラーをダウンロードする
  • Anacondaを利用する
  • Dockerイメージからコンテナを作る
  • Google Colabを使う

(ちなみに、私はバージョンアップや環境のことを考えて、家では専らDockerでコンテナを作ってPythonを使っています。)

これらはすべてインストールを必要とするか、クラウドサーバー上にスクリプトやデータを保存する必要があります。 そのため、会社でソフトウェアのインストール禁止と言われている人やGoogle Drive等にアクセスできない人はPythonを使うことが困難です。

そこで、インストール不要＆クラウドサーバー上にスクリプトやデータを保存せずにPythonを実行できるPyodideについてまとめます。

目次

Pyodide

Pyodideはブラウザで動作させることができるwebassembly(Emscripten)ベースのPythonです。

公式Githubのpackagesを見てみると、v0.19.1現在で使用できるライブラリは標準ライブラリの他に以下のものを確認しました。

  • numpy
  • matplotlib
  • scikit-learn(sklearn)
  • pandas
  • scipy
  • tqdm
  • Pillow(PIL)
  • beautifulsoup

など...

また、Pyodideはwebassemblyベースなので、実行できるブラウザが限定されています。

いまどきIEを使っている人はいないとは思いますが、下記リンクを参考ください。

pyodide.org

手軽に使用する方法

公式でPyodideを実行できる環境をオンライン上に用意してくれていますので、アクセスするとコンソール画面が出てきて、簡単にPythonコードを実行できます。

https://pyodide.org/en/latest/console.html

自分で作成したHTMLにPyodideを組み込む

公式のGetting Startedに記載されている内容になりますが、CDNを使うことで自分で作成したHTMLファイル内にPythonのコードを埋め込むことができます。

利用手順は以下の通りです。

  1. CDNのURLを読み込む
  2. Pyodideを初期化
  3. Pythonコードを実行

CDNのURLはバージョンによって異なりますが、v0.19.1の場合、

https://cdn.jsdelivr.net/pyodide/v0.19.1/full/pyodide.js

Pyodideの初期化はloadPyodideで行います。

async function main() {
let pyodide = await loadPyodide({
  indexURL: "https://cdn.jsdelivr.net/pyodide/v0.19.1/full/",
});
}

Pythonのコードはpyodide.runPythonで読み込みます。

pyodide.runPython(`
  import sys
  sys.version
`);

必要に応じて、Javascript側からPythonのスコープにアクセスするときにpyodide.globalsを、Python側からJavascriptにアクセスするときにjsモジュールを使用できます。

公式の例を以下に記載します。 フォーム入力されたPythonコードを実行し、結果をテキストエリアに出力するスクリプトです。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.19.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.19.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>

ブラウザで読み込ませます。

自分でサーバーを立てる場合

CDNを使わずにローカルサーバーを立てて、Pyodideを実行する方法についてです。

サーバーを立てるため、会社では立ち上げできない or セキュリティ対策のため社内LAN上で立ち上げないほうがいい場合がありますので、ご注意ください。

公式のDownloading and deploying Pyodideページに記載されていますが、公式のGithub ReleaseからPyodideのパッケージをダウンロードし、ローカルサーバーを立ち上げます。

ローカルサーバーを立てる方法はいくつかありますが、お手軽なのは、vscodeの拡張機能Live serverを使う方法、Pythonを使う方法、PHPを使う方法です。

詳しくは、こちらを参照ください。

Pyodideでサポートされているライブラリを使いたい時

自前のHTMLのスクリプトで標準モジュールを以外のサポートされているモジュール(例えば、numpyなど)を使いたい時、pyodide.loadPackageを使います。

async function main() {
let pyodide = await loadPyodide({
  indexURL: "https://cdn.jsdelivr.net/pyodide/v0.19.1/full/",
});
await pyodide.loadPackage("numpy"); // ここ
output.value += "Ready!\n";
return pyodide;
}

公式のAPI ReferenceにはPyodideで使用できるAPIが記載されています。

サポート外のライブラリを使いたい時

Pyodideでサポートされていないライブラリを使用したいときは、Pyodide入っているmicropipを使用します。

公式のLoading packagesページに記載されていますが、Pypiに存在するライブラリなら、Pythonのコマンドライン上でmicropipをimpoortし、micropip.installを行うだけでインストールできます。

APIの詳しい仕様はmicropip APIを参照ください。

import micropip
await micropip.install('ライブラリ名')
import ライブラリ名

javascript内のrunPythonの中でも定義できます。

また、FAQによると、javascriptで書いた関数なら、pyodide.registerJsModuleを使ってPyodideで読み込むことができるようです。

ただし、私が確認した限り現時点では以下の機械学習系ライブラリが読み込めません。

ライブラリ名 コメント
Pytorch Issue 1625を参照
Tensorflow Issue 50を参照
PyCaret micropipからインポートできず

課題と今後について

実際に使用してみて思ったことの一部は公式ドキュメントのFAQに載っていましたので、参照しながらコメントしたいと思います。

FAQにも載っていますが、セキュリティの問題からJavascriptではローカルのファイルを扱うことができません。 Chromeなら、File System APIがあるので、それを使いましょうと書いてありますが、私は未実施です。 時間が空いたらチャレンジしてみます。

  • ローカルサーバーを立ち上げず、何もインストールせず、完全オフラインで実行

私が調べた範囲では難しそうです。 この課題をクリア出来れば、より簡単にPythonコードを実行できると考えていますが。。。

使えないライブラリなど課題もありますが、活発に更新されているので、今後に期待です。

参考サイト

公式ドキュメント pyodide.org

公式Github github.com

zenn.dev

qiita.com

qiita.com

qiita.com

Google Play and the Google Play logo are trademarks of Google LLC.