4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

micro:bitAdvent Calendar 2020

Day 14

micro:bitの独自カスタムブロックを作る

Posted at

micro:bitのMakeCodeを使っていると関数というより新たにつける基板の拡張のブロックを作りたい時があります。ここではカスタムブロックを作り、そのカスタムブロック自体を公開せず組み込んだコードだけを共有し他人に使ってもら得る方法を説明します。

全体の流れ

  1. MakeCodeで[ブロック]を[JavaScript]に変更する
  2. 左下にあるエクスプローラーを開き[+]をクリックする
  3. [ブロック]に戻し[Custom]という項目に[fib]と[foo]のブロックができているのを確認する
  4. プログラムに組み込み左上の[共有]を押しURLで他人と共有する

カスタムブロックの(雛形の)作り方

まずはカスタムブロックを作ります。
上部にある[ブロック]を[JavaScript]に切り替えコードを書く状態にします。
micro:bitのエミュレータの左下に表示されている[エクスプローラー]をひらきます。
image.png

そこに表示されている[+]をクリックするとカスタムブロックを作成する雛形を作れます。
クリックするとプロンプトが表示されますので[つづける]をクリックします。
image.png

画面全体がリフレッシュされエクスプローラーに[custom.ts]が追加されそれが開いている状態になります。
image.png

この状態で[ブロック]に戻すとリフレッシュされカスタムブロックが追加されてるのがわかります。
image.png
※ブロックに戻すことで反映されて表示されます。

そのカスタムブロックを適当に配置することができます。どういう動作をするかはcustom.tsの中を確認してください。
image.png

この作られたブロックは作ったカスタムブロックが含まれる状態で共有が可能です。
通常通り共有してみてください。
image.png

これで他人も触れるカスタムブロックが完成しました!

これ以降は何を・・・

基本的にカスタムブロックは他のブロックなどgithub上に存在してるので、その中身を参考にしたりしながらコードを改造します。
ある程度出来上がってきたら保存の横にあるgithubアイコンをクリックすると自身のgithubにカスタムブロックを公開できます。
image.png
ただし公式のものとは違い拡張機能から検索する場合にはgithubのURLをいれる必要があります。

4
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
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?