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

これまでの状況

これまで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のアカウントを持っている事を前提として書きます。

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

新規拡張環境を生成

1. 上部のホーム（従来のプロジェクト）をクリック
2. 右の方にある「読み込む」をクリック
3. 「Your GitHub Repo... 」をクリック
4. 一番上の「Create new...」をクリック
5. 「Create HitHub repo」でレポジトリ名と説明を入力し「つづける」をクリック
   
6. 従来の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です。