情報Iで出題される擬似言語 (DNCL) を、ブロックを使って学ぶための環境を実装しました。
はじめに全体像を示します。
上図左から見ると
- UI は Vue (Vuetify) と Blockly
- コード生成では、Python 上で実行するためのコードと、画面表示する擬似言語コードの2種類を出力
Vue + Blockly
Blockly を Lit 内で使うことができなかった
そのため、Vue を利用することになりました。どうやら Lit の shadowDom と Blockly の相性が悪かったようです。
追記：Vue についても、component 化できないことがわかりました。トップレベルの App.vue の中であれば Blockly.inject() できます。
renderer には zelosを
デフォルトの renderer では、パズルのピースのような形になります。これを Scratch に近づけるには、
const workspace = Blockly.inject(document.querySelector('#div-blockly'), {
...
renderer: 'zelos', // ここで指定する
})
と追加します。大分見た目が変わり、子どもたちにもなじみのあるブロックの形になると思います。
generator から Calcium, 擬似言語それぞれのコードを生成する
generator を2つ実装することにしました。1つは後述の Calcium で実行するための JSON 配列。そしてもう1つは擬似言語のコードを generator から出力します。
ちなみに Blockly にはブロックで組み立てたプログラムのコードをテキストとして生成するための仕組みはありますが、実行環境が付属していません。
Pyodide + Calcium
Pyodide を WebWorker 内で実行する
公式サイトを参考に実装し、プログラム自体が無限ループの時でも、ページごと固まらないようにしました。
外部ライブラリを micropip で読み込む
Pyodide では numpy や scipy も実行することができますが、これらは Pyodide 側で用意した対応ライブラリに含まれているためです。今回、自作インタプリタを読み込むためにmicropip モジュールを最初に import しておく必要がありました。
const pyodide = await loadPyodide()
await pyodide.loadPackage(['micropip', 'numpy', 'pandas', 'scipy'])
pyodide.runPythonAsync(`import micropip
await micropip.install('calciumlang')
from calciumlang.runtime import Runtime
`)
最後に
Scratch から Python へ...
Scratch から次のステップへ進むための学習環境を目指しています。
こちらのページで、実際に試すことができます。また本環境はソースコードを公開しています。少しでも興味を持っていただけたら嬉しいです。