これまでの状況

これまでmicro:bitの javascriptブロックエディター(以下makecode）用パッケージを作ろうとすると、nodeの環境設定でハマったり、bumpしてもすぐに反映されなかったりと、やる気を削がれる事が多い状況でした。

GitHub package authoring

2018年9月9日現在、まだリリースされていませんが、まもなくmakecodeがリニューアルします。
これに合わせて、ブラウザだけでパッケージを作る事が出来るGitHub package authoring
がリリースされます。

サンプルとして何もしない「コメントブロック」を作ってみる

makecodeには元々コメント機能があります。従来はコメントを表示しっぱなしに出来なかったのですが、v1-betaからは、表示しっぱなしに出来るようになりオーっと思ったのですが、まだツッコミどころは一杯ありそうです。

そこで、GitHub package authoringを使ってサンプルとして「一切なにもしないコメントが書けるブロック」を作ってみます。ちなみに、新しいmakecodeでは、パッケージと言わず拡張と呼ぶようになるようです。（以下、拡張）

手順

makecodeとGitHubを接続

GitHubのアカウントを持っている事を前提として書きます。

GitHubにログインしておきます
https://makecode.microbit.org/beta にアクセスして新しいプロジェクトを作成します(v1リリース後は/betaは不要になります)
右上の歯車マークをクリックし「拡張」（従来のパッケージ）をクリックします
画面下の「Login to GitHub」をクリックします。
認証トークンを貼り付ける画面になります
GitHub token generation pageのリンクをクリックしrepoへのアクセス権限を与え、Generate token をクリックします。
生成したトークンをコピーして 5の画面に貼り付ければ接続完了です

新規拡張環境を生成

上部のホーム（従来のプロジェクト）をクリック
右の方にある「読み込む」をクリック
「Your GitHub Repo... 」をクリック
一番上の「Create new...」をクリック
「Create HitHub repo」でレポジトリ名と説明を入力し「つづける」をクリック
従来のpxt init を実行した際と同じ構造が自動的につくられmain.tsやtest.tsも用意されます

拡張を開発

開発方法は、https://makecode.com/extensions/getting-started/simple-extension あたりを参考にしてください。

1.初期パッケージにあるmain.tsとtest.tsを書き換えます

main.ts

//% weight=70 icon="\uf075" color=#555555 block="コメント"
namespace comment {
    //% blockId=show_strings block="コメント %v"
    export function noaction(text: string): void {
    }
}

test.ts

// tests go here; this will not be compiled when this package is used as a library
basic.forever(() => {
    comment.noaction("test")
})

2.GitHubにCommitを行いつつpxt bumpを実行します

以上で完成です。

動作確認

新しいブラウザのウインドウを開き、makecodeにアクセス(2018年9月9日現在はbetaでないと駄目）し「拡張」を見ると自分で作ったパッケージが表示されるようになります。

公開

作った拡張を人に伝える場合は、readmeを整えGitHubのURLを公開すればOKです。

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