LoginSignup
6
3

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-12

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

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

pxtを使う

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

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

githubを使う

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

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

カスタムブロックを作る

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

コードを自作して

Image from Gyazo

//% 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」タグ内で書くと候補がでてくるので動作できる

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

カスタムブロック所感

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

最後に

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

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3