わさっきhb

大学(教育研究)とか ,親馬鹿とか,和歌山とか,とか,とか.

micro:bitのMakeCodeエディターをDockerで動かそう

 昨日5限の授業は,micro:bitを動かそうというものでした.
 IoTやmicro:bitについて解説し,学生は持参したBYODのPCでhttps://makecode.microbit.org/にアクセスし,「新しいプロジェクト」でブロックエディタの画面を表示させて,プログラミングをしていきました.
 内容は3年連続ですが,今回,ブロックエディタを最新の内容に変更しました.なお,以前のインタフェースは現在も,https://makecode.microbit.org/v0より利用可能でして,2つのバージョンを見比べて,古いままでいる必要はないなと思ったのでした.
 アクセス先は学外です.結果的に,2教室で合計約70人の一斉アクセスに,問題は生じませんでしたが,学外と通信できなくなってしまったときの対策として,ブロックエディタを自分の研究室のサーバで稼働させ,必要に応じてアクセスしてもらうことにしました.
 サーバはDockerコンテナにします.これも3年連続…と言いたいところですが,最新の内容で使えることを,確認しないといけません.過去2年間,使用していたのは,以下のページに基づくDockerイメージです.

 書かれているコマンドを実行したところ,最初のdocker pullで失敗しました.
 こういうときはDockerfileをダウンロードしてビルドかなと思い,実際にビルドしたところ,端末には赤色表示のエラーが出ました.
 最終的に以下の内容で,エラーなくビルドできるようになりました.

FROM node:alpine
RUN apk update \
    && apk add python make gcc g++ linux-headers eudev-dev \
    && rm -rf /var/cache/apk/*
RUN mkdir -p /root/pxt-microbit \
    && cd /root/pxt-microbit \
    && npm install -g pxt \
    && pxt target microbit
EXPOSE 80
WORKDIR /root/pxt-microbit
ENTRYPOINT ["pxt", "serve", "-h", "0.0.0.0", "-p", "80","--noBrowser"]

 apkコマンドの最後の引数「eudev-dev」がないと,途中で,libudev.hがないというエラーが出ます.このヘッダファイル名を検索すると,https://pkgs.alpinelinux.org/contents?branch=edge&name=eudev-dev&arch=x86_64&repo=mainにたどり着きました.
 ビルドとコンテナ起動のコマンドは以下のとおりです.後述するビルドと区別するため,イメージ名をpxt-microbit:alpineにしています.

$ docker build -t pxt-microbit:alpine .
$ docker run -d --rm -p 3232:80 --name pxta pxt-microbit:alpine

 ブラウザで,http://サーバ:3232 にアクセスすると,ホームの画面が表示されました.「新しいプロジェクト」でブロックエディタの画面に進むと,以下のように,一部のメッセージが日本語化されていません.「基本」ではなく「Basic」,「ずっと」ではなく「forever」と表示されています.

f:id:takehikom:20191116232301j:plain

 最新バージョンは国際化が不十分なのかなと思い,https://www.npmjs.com/package/pxtにアクセスして過去のバージョン番号を把握しました.上のDockerfileの「npm install -g pxt」を「npm install -g pxt@0.4.0」に変更してから(それとDockerコンテナは「docker stop pxta」のコマンドで終了させてから),ビルドとコンテナ起動をさせたところ…同じ表示でした.
 pxtのバージョンを戻してビルドし直し,まあこのサーバは「保険」だもんなと思いつつも,別のビルドの方法がないかと調べると,Debian(のnode)をベースイメージとした,Dockerfileが見つかりました.

 ディレクトリを新たに作り,そこにDockerfileを保存しました.ポート番号の指定を,「FROM node:alpine」のDockerfileからコピーして差し替えました.

FROM node:8-jessie
WORKDIR /
RUN apt-get update \
  && apt-get -y install libsecret-1-dev libusb-1.0-0-dev \
  && npm install -g pxt \
  && pxt target microbit \
  && apt-get clean \
  && rm -rf /var/cache/apt/archives/* /var/lib/apt/lists/*
EXPOSE 80
ENTRYPOINT ["pxt", "serve", "-h", "0.0.0.0", "-p", "80","--noBrowser"]

 ビルドとコンテナ起動のコマンドは以下のとおりです.

$ docker build -t pxt-microbit:jessie .
$ docker run -d --rm -p 23232:80 --name pxtj pxt-microbit:jessie

 ブラウザで,http://サーバ:23232 にアクセスして,ブロックエディタの一部メッセージが日本語化されないのは同じでした.
 最後に,「docker images | grep pxt」で,2つのイメージのファイルサイズを出力させたところ,pxt-microbit:alpineは555MB,pxt-microbit:jessieは929MBでした.サイズダウンの余地はあるものの,作業はここまでとしました.


 ブロックエディタの新しいバージョンでは,サンプルプログラムが入手できないのが,ちょっと残念なところです(v0をURLに含むものでは,まず上部の「プロジェクト」,そして「サンプル」の順に押せば,いくつか表示されます).
 昨年度も使用したGame of Lifeは,https://makecode.microbit.org/examples/gameofLifeのコードをコピーして,v0でないほうのエディタを「{} JavaScript」に切り替えてから貼り付けて,ダウンロードでhexファイルを作成し,Moodleよりダウンロードしてもらいました.
 学生のGame of Lifeへの反応はというと,おおむね,デタラメなLEDの光り方に面食らっていました.
 しかしながらシミュレータ上の操作で挙動を把握し,micro:bitに転送して動かすときには,何が起こるかがよく分かっている状態だったと思います.終わりのフリータイムでは,wikipedia:ライフゲームを読んでいる学生もいました.