micro:bit Makecodeにカラーセンサー用の拡張機能を追加する

[浜松ホトニクスのカラーセンサーS11059-02DTでmicro:bitのロボットカーを制御](https://qiita.com/nekoma-seisakusho/items/1f6cd48ce431607f27c4)してみましたが、このセンサーはI2Cで制御するため、子どもにはプログラミングに難解な部分があります。
![s13683-makecode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927104/a7cadf54-2e9b-832c-9c25-b2af2a97d6c3.png)
そこでI2C周りを隠蔽したカスタムの拡張機能を作ってみることにしました。

micro:bitのMakecodeで拡張機能を作る方法は公式のドキュメント[**Building your own extension**](https://makecode.com/extensions/getting-started)に載っています。方法は２つ紹介されていて
・コマンドラインツールを使う方法
・Makecodeのオンラインエディタを使う方法
があります。
コマンドラインを使う方法はWindows上の環境構築が面倒なので、オンラインエディタを使います。

Makecodeエディタを使う場合も、作った拡張機能を共有するにはGitHubアカウントが必要で、以下はアカウントがすでにあるという前提です。

## 新規のプロジェクトを作成する
まずMakecode上に新規のプロジェクトを作成します。
Makecodeエディタのホーム画面の「読み込む」をクリックし、「あなたのGitHubリポジトリ」を選択します。
![newrepo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927104/18b4c132-8d90-339f-1ee0-3069e5036585.png)
初回はGitHubへのサインインを求められますので必要な情報を入力します。
つぎに「新規作成」をクリックします。
![newrepo2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927104/f9802ff3-fbe1-cfaa-a2b3-3ab452fc542f.png)
リポジトリ名などを入力すると、自分のGitHub上に公開リポジトリが作られ必要なファイル類がコピーされます。
![newrepo3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927104/ef47b19f-da31-6db5-3e68-f786ca7f6032.png)
## 拡張機能ブロックの作成
ブロックの作り方は公式の[**Defining blocks**](https://makecode.com/defining-blocks)にあります。このドキュメントにも紹介されていますが、サンプル集として用意されている[**Playground**](https://makecode.com/playground)にコード例がありますので、参考になります。

MakecodeのブロックのプログラムはTypeScriptで記述します。Makecodeエディタを使う場合はJavaScriptモードを使用します。
![pxt1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927104/5f89b208-4711-00ef-de07-26f5ae948147.png)
上述の設定によりGitHubに関連付けられていますので、画面左のエクスプローラーに関連ファイル名が表示され、同じものがGitHubリポジトリに同期されます。いくつかファイルがありますが、プログラムを書くファイルはmain.tsですのでこれを選択します。

既にブロックで作ったプログラムがある場合は、JavaScriptモードに変換してから多少修正するだけです。
拡張ブロックを作成するのに最低限必要な修正は以下の項目です。

### 拡張機能全体の名前
ブロックのカテゴリーに表示される名前です。これをプログラム全体のnamespaceとします。この例だと、「カラーセンサー」というnamespaceでプログラムの全体を囲みます。
カテゴリーに表示される名前の色やアイコンを定義するため、namespaceの前に「//% 」で始まる行を入れます。詳細は公式[**Defining blocks**](https://makecode.com/defining-blocks)を参照してください。
![mkcd2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927104/039163b8-db98-3b10-8076-277dac289927.png)
### ブロックのプログラム
ブロックにしたいプログラムは関数で記述し、関数は外部参照できるようにexportをつけ、さらに「//% block」という修飾をつける必要があります。
ブロックには関数名が表示されますが、他の名称にした場合は「//% block = "名称"」とします。
![mkcd3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927104/92b07e1e-8fe3-469d-9b79-87a12270472d.png)
これも詳細は公式の[Defining blocks](https://makecode.com/defining-blocks)を参照してください。

ブロックの形（イベント、引数、戻値）などはプログラムごとに自動的に決定されます。今回の例のように値を返す場合は、関数に戻値の型を指定して、return文をいれておくだけです。このあたりも公式ドキュメントとサンプルに例があります。
下はRGBのRの値を返す例です。
![mkcd4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927104/726368ac-a627-e885-0aad-8f07f8b0a202.png)

![mkcd5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927104/167bba97-55a1-2f2f-ac18-6cbc28819afb.png)
# 使い方・参考
完成したら、使用したいMakecodeエディタの、拡張機能画面の検索・URLの欄にGitHubリポジトリのURLを入れます。公開設定になっているので、だれでも機能を追加できます。

GitHubとリンクしていますので、定期的にPushしてやればGitHubともローカルのGitとも同期できます。
ローカルのエディタのほうが使いやすい場合は、ローカルで編集してから、テストの時はGitHubにPushして、逆にMakecodeエディタにPullする使い方もできます。
![mkcd6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927104/9d8c762c-7bf2-c774-7b5e-91f7ba074085.png)
# 参考文献
[micro:bitでお手軽にGroveモジュールを利用するための独自拡張機能を作ってみる](https://lab.seeed.co.jp/entry/2020/04/16/120000)
[付録1-8　2020年リリース（サヌキテックネット)](https://sanuki-tech.net/micro-bit/appendix/2020-release/)

以上