GitHub Pagesでmicro:bitのソースコードをブロック表示する

ソースコードをブロック形式で表示する

Microsoft MakeCode for micro:bitは、Git Hub Pagesで、ソースコードをブロック表示するツールを提供しています。

表示方法（公式）

README.md の末尾に次の内容を記述します。

(README.md)

<script src="https://makecode.com/gh-pages-embed.js"></script>
<script>makeCodeRender("{{ site.makecode.home_url }}", "{{ site.github.owner_name }}/{{ site.github.repository_name }}");</script>

_config.yml は、次のような内容になっていることを確認します。特に、makecodeのhome_urlが、https://makecode.microbit.org/であることを確認してください。

_config.yml

makecode:
  target: microbit
  platform: microbit
  home_url: https://makecode.microbit.org/
theme: jekyll-theme-slate
include:
  - assets
  - README.md

(README.md)

```blocks
input.onButtonPressed(Button.A, function () {
    basic.showNumber(custom.baz())
})
input.onButtonPressed(Button.B, function () {
    basic.showNumber(custom.bar())
})
```

拡張機能の表示方法（非公式）

公式の表示方法では、任意の拡張機能のブロックを表示できず、テキスト表示のブロックとして表示されます。
任意の拡張機能のブロックを表示するには、README.md の末尾に記述した内容を次のように書き換えます。

(README.md)

<script src="https://cdn.jsdelivr.net/gh/jp-rad/pxt-ubit-extension@0.5.0/.github/statics/gh-pages-embed.js"></script>
<script>makeCodeRender("{{ site.makecode.home_url }}", [ "custom=github:jp-rad/pxt-ubit-extension", ]);</script>

次のように、GitHub Pagesとして生成されたページは、blocksで記述したソースコードがテキスト形式からブロック形式に置き換えられて表示されます。

makeCodeRender関数

引数	説明	備考
targetURL	MakeCodeのURL	"{{ site.makecode.home_url }}"固定
renderBlocksPackage	拡張機能の情報	文字列もしくは文字列の配列

makeCodeRenderの第2引数

例とした拡張機能は、その名前空間がcustomであり、GitHubのjp-rad/pxt-ubit-extensionリポジトリで管理されています。この情報をmakeCodeRenderの第2引数で渡しています（配列の１つ目の要素）。

例えば、pxt-neopixelの場合は、neopixel=github:microsoft/pxt-neopixel を配列の要素として渡します(置き換えもしくは追加)。

(README.md)

<script src="https://cdn.jsdelivr.net/gh/jp-rad/pxt-ubit-extension@0.5.0/.github/statics/gh-pages-embed.js"></script>
<script>makeCodeRender("{{ site.makecode.home_url }}", [
    "custom=github:jp-rad/pxt-ubit-extension",
    "neopixel=github:microsoft/pxt-neopixel",
]);
</script>

ソースコードの例(blocks)

(README.md)

```blocks
let strip = neopixel.create(DigitalPin.P0, 24, NeoPixelMode.RGB)
strip.setPixelColor(0, NeoPixelColors.White)
custom.foo(4, "Hello", MyEnum.One)

```

ブロック形式での表示

まとめ

Blocks embed機能（サービス）を利用することにより、GitHub Pages上で、micro:bitのソースコードをブロック形式で表示することができます。
また、拡張機能の表示方法（非公式）の方法で、任意の拡張機能のブロックも表示することができます。