概要
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 件のコメント:
コメントを投稿