micro:bit用のMakeCodeパッケージを作る

Microsoft MakeCodeは、コーディングの入門者向けに設計された、ブロックベースのプログラミング言語である。 MakeCodeが優れているのは、構文やデータ型を気にすることなく、アルゴリズム設計で使う基本的な構造や思考プロセスをそのまま体験できる点にある。内部的には、MakeCodeは静的型付けのTypeScriptとJavaScriptをベースにしている。このチュートリアルでは、既存のSparkFun拡張機能をもとに、土壌水分センサー用のMakeCode拡張機能を開発する。

MakeCode for micro:bitにある既存のSparkFun拡張機能の一部

MakeCode for micro:bitにある既存のSparkFun拡張機能の一部

必要なもの

まず、ビルド環境を整える。最初にNode.jsをダウンロード・インストールする。

GitHubのアカウントも必要になる。コマンドプロンプトを開き、GitHubのファイルを保存している場所に移動する（筆者は**C:**ドライブにGitHubフォルダを作っているので、C:\GitHubになる）。続いて、次のコマンドを実行する。これにより、使用するいくつかのnpmパッケージがインストールされる。

npm install
npm install jake
npm install typings

続いて、PXTのディレクトリをGitHubフォルダにクローンし、先ほどインストールしたnpmパッケージを実行する。最後にもう一度GitHubフォルダに戻る。これは次のコマンドで行える。

git clone https://github.com/microsoft/pxt
cd pxt
git checkout
npm install
typings install
jake
cd..

続いて、Micro:Bitのターゲットをクローンし、そこにpxtをインストールする。

git clone https://github.com/Microsoft/pxt-microbit
cd pxt-microbit
npm install -g pxt
npm install
cd..

これでプロジェクトのビルドに必要なものはすべて揃ったはずである。それでは、既存のSparkFun MakeCodeパッケージをクローンし、編集を始めよう。

git clone https://github.com/sparkfun/pxt-gator-light

何を変更するか

新しいMakeCodeパッケージ用に、新しいGitHubリポジトリを作成しよう。名前はpxt-gator-moistureとする。このリポジトリをGitHubフォルダにクローンし、pxt-gator-lightリポジトリの中身をコピーする。主に見ていくのは、gatorlightという名前の2つのファイル、pxt.JSONファイル、README.MD、そして最終的にはicon.pngである。

pxt-gator-moisture

これらのファイルを変更する必要がある。画像をクリックすると拡大表示できる

まず、すべてをgatormoistureという名前に変更していく。 2つのgatorlightファイルの名前を変更したら、pxt.jsonを開き、lightという単語をすべてmoistureに置き換える。この**.jsonファイルは、MakeCodeにどのファイルを含めるかを伝えるものであり、ファイル名を変更したので、ここでもその変更を反映する必要がある。バージョン番号を0.0.1**に戻すことと、説明文をより適切な内容に変更することも忘れないでほしい。続いて、gatormoistureという名前になった2つのファイルを開き、再びlightをmoistureにすべて置き換える。

ここで、ブロックの裏にあるコードが実際にどこにあるかを見てみよう。ブロックは**.tsファイルにあり、実際の関数は.cppにある。まず.cppを確認しよう。どのパッケージでも必ずpxt.hをインクルードし、pxtという名前空間を使う。続いて、gatormoistureという名前空間を作り、与えられたADC値からルクスを計算する関数を置く。かなりシンプルな関数だが、これを.ts**ファイルから呼び出せるようになる。これこそが本当にやりたかったことである。

#include "pxt.h"
#include <cstdint>
#include <math.h>

using namespace pxt;

namespace gatorMoisture {
    /*
    * Calculates the light in Lux based on the ADC value passed in. 1 step in adcVal is equal to .488 uA or .976 lux at 5V
    */
    //%
    uint16_t getLux(int16_t ADCVal) {
        return ADCVal * .976;
    }

}

せっかくなので、getLuxを、ルクス値ではなく0〜1の間のfloat値を返すgetMoisture関数に変更しよう。そのためには、渡されたADCValをADCのフルスケール範囲（1023）で割るだけでよい。最終的に、gatormoisture.cppは次のようになる。

#include "pxt.h"
#include <cstdint>
#include <math.h>

using namespace pxt;

namespace gatorMoisture {
    /*
    * Calculates the light in Lux based on the ADC value passed in. 1 step in adcVal is equal to .488 uA or .976 lux at 5V
    */
    //%
    float getMoisture(int16_t ADCVal) {
        return ADCVal / 1023.0;
    }
}

続いて、.tsファイルの中でブロックがどう作られているかを見てみよう。 lightからmoistureへの変更をすべて終えると、次のような内容になっているはずである。

enum gatorMoistureType{
    moisture=1,
    adcVal=2,
}

//% color=#f44242 icon="\uf185"
namespace gatorMoisture {

    // Functions for reading moisture from the gatormoisture in moisture or straight adv value

    /**
    * Reads the number
    */
    //% weight=30 blockId="gatorMoisture_moisture" block="Get moisture on pin %pin | in %gatorMoistureType"
    export function moisture(pin: AnalogPin, type: gatorMoistureType): number{
        let ADCVal = pins.analogReadPin(pin)
        switch(type){
            case gatorMoistureType.moisture: return getMoisture(ADCVal)
            case gatorMoistureType.adcVal: return ADCVal
            default: return -11111111
        }
    }

    /**
     * Function used for simulator, actual implementation is in gatormoisture.cpp
     */
    //% shim=gatorMoisture::getMoisture
    function getMoisture(ADCVal: number) {
        // Fake function for simulator
        return 0
    }
}

ブロックにドロップダウンで選択肢を持たせたい場合は、enumを使ってそれを作る。今回は、moisture（0〜1の間の値）か、生のadcValのどちらかを選べるようにする。そこで、名前空間の外側で、可能なデータ型に対応する次のようなenumを作成する。

enum gatorMoistureType{
    moisture=1,
    adcVal=2,
}

続いて、この拡張機能の色とアイコンを選ぶ必要がある。これは名前空間を宣言する直前の行で行う。色は6桁の16進数値であれば何でもよく、アイコンはFontAwesomeアイコンライブラリの識別子を使う。色とアイコンの宣言は次のようになる。

//% color=#f44242 icon="\uf185"

続いて、自分のブロックがどんな見た目になり、他のブロックとの相対的な位置がどうなるかを定義する必要がある。これはweight、blockId、blockを設定することで行う。 weightが100のブロックは、weightが100未満のブロックより上に、100より大きいブロックより下に一覧表示される。これにより、すべてのブロックをどの順序で並べたいかを自分で決められる。 blockIdは必ずmynamespacetitle_functionTitleという形式にする必要があるため、gatorMoisture名前空間にあるmoistureブロックの場合、blockIdはgatorMoisture_moistureになる。最後に、block文字列を使って、ブロックのテキストに実際に何を表示するかを決める。ドロップダウンにしたい変数の前には%を付ける。次のコードは、ピン選択用のドロップダウンと、moistureとadcValを選べるドロップダウンを持つブロックを作る。このブロックは、ドロップダウンで選択された引数を使ってmoisture関数を呼び出す。

//% weight=30 blockId="gatorMoisture_moisture" block="Get moisture on pin %pin | in %gatorMoistureType"

最後に、実際にピンを読み取る関数を書く必要がある。 exportとして宣言された関数は、MakeCode上でブロックとして表示される。この関数の引数は、ドロップダウンで選択できるようにと宣言した変数になり、通常は型に応じたswitch文を用意し、選択された型ごとに適切な値を返すようにする必要がある。型がmoistureのとき、.cppに含まれる関数であるgetMoistureをどう呼び出しているかに注目してほしい。また、この関数が何を返すかも宣言しなければならない。今回の場合は数値である。

export function moisture(pin: AnalogPin, type: gatorMoistureType): number{
    let ADCVal = pins.analogReadPin(pin)
    switch(type){
        case gatorMoistureType.moisture: return getMoisture(ADCVal)
        case gatorMoistureType.adcVal: return ADCVal
        default: return -11111111
    }
}

.cppにある関数はどれも、シミュレータ用のダミー関数が必要になる。 getMoisture関数に対応するダミー関数は次のように作成する。 exportされていないため、MakeCode上には表示されない点に注目してほしい。

//% shim=gatorMoisture::getMoisture
function getMoisture(ADCVal: number) {
    // Fake function for simulator
    return 0
}

最後に、READMEの末尾部分（49行目）を、自分の名前空間とそれに続くGitHubのアドレスに変更する必要がある。 gatorMoisture=github:sparkfun/pxt-gator-soilのような形になり、これによりこのパッケージがMakeCode拡張機能として認識されるようになる。

コードをコンパイルする

これですべてのコードを書き終えたので、いよいよコンパイルしてテストする番である。コマンドプロンプトウィンドウを開き、自分のMakeCodeパッケージがあるディレクトリに移動する。そこで、次のコマンドを実行し、コードをビルドするのに必要なPXTツールをリンク・インストールする。

npm install
npm install typings
npm install jake
npm link ../pxt
pxt target microbit
pxt install

続いて、コードをビルドし、変更内容をコミットしてGitHubにプッシュする。

pxt build
git add -A
git commit -m "changing names to gator:moisture"
pxt bump

pxt bumpコマンドを実行すると、リリースにタグ付けするバージョン番号の入力を求められる。提示されたバージョン以上の番号を入力すればよい。このコマンドは、コミットにタグを付け、リリースとしてGitHubにプッシュする。

PXT Bump

PXT Bump

テストして、やり直して、また試す

コードをテストするため、MakeCodeのウェブサイトを開き、extensionsまで移動する。

Extensions

Extensions

そこから、トークンを使ってGitHubにログインする。 login to GitHubをクリックした際の指示に従うだけでよい。

GitHubにログインする

GitHubにログインする

ログインしたら、GitHubリポジトリのURLをextensionの検索バーに貼り付け、表示された結果をクリックして取り込む。結果が表示されない場合は、リポジトリが公開（public）になっているか確認してほしい。

拡張機能を取り込んだら、そのさまざまな機能を確認し、必要に応じてコードを編集して、満足のいくまでGitHubに再アップロードしてみてほしい。

まとめ・参考資料

最終的には、この拡張機能をMicrosoftに承認してもらいたくなるはずである。 MakeCode extension approval checklistを必ず確認してほしい。続いて、こちらのフォームに記入し、パッケージの承認を申請する。

その他の参考資料も紹介する。

タグ: GitHub、MakeCode、micro:bit、プログラミング、pxt

出典：How to Create a MakeCode Package for Micro:Bit（SparkFun Learn）を日本語に翻訳し、再構成した。原文は CC BY-SA 4.0 ライセンスで公開されており、本ページも同ライセンスの下で提供する。

Keyboard shortcuts

電子工作の基礎知識