makecodeエディタをiframeで埋め込む

Tiny:bit講座を開くに当たって講座テキストは全てサイト上においてある。

サイト上からサンプルソースを参照させ、更に編集モードに移行させるためのテクニックは次のとおり。

この手法により、拡張ブロックのGITHUBーURLを入力させるという受講者負担は大幅に軽減される。

１　まずはサンプルソースをmakecodeエディタ上で作成

２　シェアボタンを押下

３プロジェクトを共有ボタンを押下

４URLをコピーで取得する。

５Jimdoを起動

６＜／＞ウイジット / HTML を選択する

７＜iframe＞タグを記述し保存する。

例えば

＜iframe src="https://makecode.microbit.org/_euf7KjPErY6P" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="allowfullscreen" aria-hidden="false" tabindex="0"＞＜/iframe＞

これで以下のようなフレームがブラウザ上に出現する。

右上の編集アイコンをクリックすると

TinyBit拡張の開発環境がユーザに提供されている。

これはGitHubのURLを受講者にコピペさせ、手動で拡張ブロックを組み込ませるという難題を避けることができるようになる、という大きなメリットがある。

ただし、提供されるのはURL取得した時点での拡張ブロックで、

取得時のGitHubのバージョン内容を反映した環境となります。

保存後に修正された内容ではないことに注意

URL取得後に、ブロックのボタンフェースを変更してもそれは反映されない。