micro:bitの拡張ブロックを一番簡単(?)に作ってみた


この記事はmicro:bitアドベントカレンダー2019の10日目です。
遅刻です…

micro:bitの拡張ブロックを作る3つの方法

pxtを使う

micro:bitのMakeCode拡張ブロックをつくる

一番わからなかったなぁ
失敗しました

githubを使う

ブラウザだけで micro:bit javascriptブロックエディター用パッケージ(拡張)が作れるGitHub package authoring

成功しました
もし子供に教えるときにgitから教えるの大変かなぁと
サイトも横断するし…
microbitのサイト内のMakeCodeエディタ画面だけで作成できたので共有します

カスタムブロックを作る

新規プロジェクトを立ち上げ、「JavaScript」タグへ

左下のエクスプローラーから「+」ボタン

カスタムブロックを作成、「つづける」ボタン

すると「custom.ts」が追加されている

最初から書かれているコードによって「Custom」ブロックがすでにできている

コードを自作して

//% weight=70 icon="\uf075" color=#555555 block="点がコロコロ"
namespace comment {
    let x = 2;
    let y = 2;
    //% blockId=show_strings block="点がコロコロ %v"
    export function noaction(): void {
        led.unplot(x, y);
        x += input.acceleration(Dimension.X) / 1000;
        y += input.acceleration(Dimension.Y) / 1000;
        x = Math.constrain(x, 0, 4);
        y = Math.constrain(y, 0, 4);
        led.plot(x, y);
    }
}

セーブをしっかりと
すると「ブロック」タブではまだ「Custom」だけども「Javascript」タグ内で書くと候補がでてくるので動作できる

一度「ブロック」タグへ行っちゃうとエラーや警告がでず、コード消えちゃうし

ブロックを出すには今の所プロジェクトをセーブしてもう一度立ち上げるのしかわかってないです…

「ずっと」のところに「update」をすれば常に加速度によってLEDが移動する拡張ブロックができました!
エミュレーターですができています

カスタムブロック所感

他の作り方と比べて初動が楽なのはあるが、他の人にシェアはもちろん、プロジェクトを渡っての利用もできなさそうです。
MakeCode内で書くのは逆に動作が見えるのでよいです。
半端にvscodeなどでgitにコミットってやろうとしてもvscode内でエラーがでちゃう感じになりますし。
なので、実はgitからもってきた拡張コードも、MakeCodeエディタ内で編集でき、pushもできちゃいますので、欠点はそれほど感じません。

最後に

micro:bitアドベントカレンダー2019まだまだこれからですので、ご注目&飛び入り参加しちゃってください!