はじめに 最近はPythonがブラウザで動くようになってきています。 この前はscriptタグにPythonを書くPyScriptが話題になっていましたね。 ただ、現状まだ発展途上で出来ることと出来ないことが混在しています。 そこで、2022/06時点での状況をまとめたいと思います ちなみに、この記事の内容は個人開発でブラウザ上で動くPythonのPlayground を作っていて得た知見をもとに作成しています ブラウザで動くPythonのアーキテクチャーとコア技術 PyScriptのアーキテクチャーは上図のように3層になっています。 下から WASM:ブラウザ[1]で動くバイナリコード。JavaScript以外の言語でも、WASMにコンパイルすることでブラウザで実行可能になる Pyodide: CPython[2]をEmscripten(C/C++のWASMコンパイラ)でWASMにコンパ

WASMの開発が進んできていて、Pythonがブラウザ上で動くようになっています。 そこでブラウザ上でPythonを動かすPlaygroundを作ってみました。 codepiece.pages.dev 次のようにブログに埋め込んで実行もできます このコードは画像をグレーにするコードです。 再生ボタンを押すと'lena.png'という画像から'sample-gray.png'という画像が生成されます。 ファイルの中身を見るには左のプルダウンからファイル名を選択します コードの埋め込みは特定の行だけ表示することも可能です 例えば、画像のフィルタ処理でエッジを抽出する次のコードで 下記のようにファイル読み書き等の部分を隠してエッジを抽出する部分だけを見せることができます 埋め込みはiframeを使います。埋め込み用タグの作り方は、CodePieceでコードを書いた後に「Share」ボタンを押して