前提
– Githubアカウントを作成済み（ですよね？）
手順①MakeCodeEditor上で任意のプロジェクトを作成。
ここでは”hoge”とする。
手順②プロジェクトをGithub上にリポジトリとして登録する。
まずはGithubアイコンをクリック。
そのまま「つづける」をクリック。
Githubでリポジトリが作成済みであることを確認。
手順③エディターに戻りJavaScript編集画面を開く。
元のコードは全部消してしまおう。
手順④ブロックを作成する
「hoge」というブロックにしよう。実際のコードは以下。
/**
* これはHoge（ホゲ）という何にも役に立たないクラスです
*/
namespace Hoge{}
これだけでは拡張機能としてエディターに追加されないのでGithubアイコンをクリックして変更内容をリポジトリにコミットする。
「変更をコミットしてプッシュ」をクリック。
プッシュが完了したら拡張機能を検索してみる。「高度なブロック」⇨「拡張機能」
自身のリポジトリURLで検索かけると「hoge」がヒット。こいつをクリックして追加してみる。
ふむ、変化がない。そうなんです。これではまだブロックが追加されないのです。
手順⑤本当にブロックを追加する
中身となる関数を用意する。これも「hoge」、わかりづらい・・・。
/**
* これはHoge（ホゲ）という何にも役に立たないクラスです
*/
namespace Hoge{
//% blockId=hoge
//% block="hoge %huga"
export function hoge(huga: number): void
{
basic.showNumber(huga)
}
}
そしてコミットするとほら、追加されてるでしょう黒いのが？
とはいえ使うには（使えないが）ちょっと不親切なので修正を行う。
手順⑥ブロックのプロパティ設定
変更できるのは以下の4つ。
- 色(color)
- ここの値設定の考え方はよく分かってません、すいません
- 優先順位(weight)
- 値の上下限値は不明ですが大きければ大きいほど上位に表示される模様
- アイコン(icon)
- ユニコード形式で指定、今回はりんごさんにしてみた
- https://fontawesome.com/v5.15/icons/apple?style=brands
- ブロック名(block)
- こちらも任意に指定可能。公式ガイドをとりあえず真似てみた。
/**
* これはHoge（ホゲ）という何にも役に立たないクラスです
*/
//% color=190 weight=100 icon="\f5d0" block="Basic Blocks"
namespace Hoge{
//% blockId=hoge
//% block="hoge %huga"
export function hoge(huga: number): void
{
basic.showNumber(huga)
}
}
ひとまずこんなもんでしょう。これを拡張していくと好きな機能をどしどし追加できる。少し前とは違ってだいぶ機能追加がしやすくなってる。さすがMSさん、これからもどんどんよろしくお願いします。
参考リンク