実行可能なPythonコードをブログに埋め込む

WASMの開発が進んできていて、Pythonがブラウザ上で動くようになっています。

そこでブラウザ上でPythonを動かすPlaygroundを作ってみました。

codepiece.pages.dev

 

次のようにブログに埋め込んで実行もできます

このコードは画像をグレーにするコードです。

再生ボタンを押すと'lena.png'という画像から'sample-gray.png'という画像が生成されます。

ファイルの中身を見るには左のプルダウンからファイル名を選択します

 

コードの埋め込みは特定の行だけ表示することも可能です

例えば、画像のフィルタ処理でエッジを抽出する次のコードで

 

 

下記のようにファイル読み書き等の部分を隠してエッジを抽出する部分だけを見せることができます

 

 

埋め込みはiframeを使います。埋め込み用タグの作り方は、CodePieceでコードを書いた後に「Share」ボタンを押して表示されるポップアップで見た目を整えた後、iframeタグのコピーボタンを押します

画面例

「Settings」ボタンのポップアップから

インストールするパッケージやダウンロードするファイルを設定できます。