前回はWSL2-Docker環境でChromeブラウザの起動まで行ったので、続きの作業としてmicro:bitのGitHub版最新開発環境を構築していきます。

参考

基本的には参考リンクで事足りるかなと思いますので、簡単めの説明にとどめたいと思います。

`micro:bit`のGitHub最新版を```WSL2-Docker環境で動作させる

基本的には以下の手順となります。

必要なパッケージなどのインストール
micro:bitのGitHub最新開発版のクローン
micro:bit環境の構築と実行

実際には以下を実行していくことになります。Ubuntuコンテナのデフォルトではcurl、git、node.jsなどはインストールされていないので、インストールを行ってから導入していくことになります。最後にGoogle Chromeを起動しておくといいかなと思います。本来の手順としてはブラウザは自動的に起動するのですが、Chromiumブラウザがインストールされていない場合には、別途生成されたリンクをURLとしてオープンする必要があるので、このような手順にしています。

# apt install -y curl git
# curl -sL https://deb.nodesource.com/setup_14.x | bash -
# apt install -y nodejs

# git clone https://github.com/microsoft/pxt-microbit
# cd pxt-microbit/
# npm install -g pxt
# npm install
# google-chrome --no-sandbox &
# pxt serve

最後にあるpxt serveを実行すると実行時ログの中にURLが表示されると思います。これをコピーして事前に開いておいたブラウザに貼り付ければOKです。ブラウザはFirefoxでもいいのかなと思ったのですが、FirebfoxでURLを開いても、エラーが発生するのでChrome系ブラウザにしています。

f:id:ueponx:20201229222818p:plain

拡大 f:id:ueponx:20201231110043p:plain

URLをオープンすると以下の様な、micro:bitのMakeCode環境が表示されます。

f:id:ueponx:20201229222826p:plain

f:id:ueponx:20201229164532p:plain

Docker環境下なのでUSB接続でmicro:bitを認識してくれません。そのため、一度ファイル出力を行ったものをホスト側にもってきて、USBストレージとして書き込む方法を行います。コンテナの構築時にファイル共有のディレクトリを作成していたのはそのためでもあります。

参考（作成時の設定で共有ディレクトリ設定をしています） f:id:ueponx:20201229222832p:plain

普通に拡張などの機能も使ってブロックを組み立てることもできます。

f:id:ueponx:20201231115134p:plain

ダウンロード先の設定をChrome側で行っておくと共有ディレクトリに保存できて便利かなと思います。

おまけ

散々Firefoxではうまく行かなかったといっていたのですが、動作検証のために再度インストールを試してみましたが、問題なく動作してしまいました。また、pxt serve後にFirefoxインストール後はブラウザが起動するようになりました。状況はわかりませんが、問題はなさそうです。

ブラウザの起動は以前から問題はなかった* f:id:ueponx:20201231115203p:plain

MakeCodeの起動で失敗していたのですが、起動しました f:id:ueponx:20201231115214p:plain

コードの生成もファイルのダウンロードも問題ありません f:id:ueponx:20201231115220p:plain

おわりに

WSL2-Docker環境でもmicro:bit（MakekCode）のGitHub版最新開発環境を動作させることができました。話によるとWindows環境だけでも構築はできるみたいなので、そこまでのことをしなくても良かったのかなとも思いますが、どんな環境になるかわからないのであればDockerで環境を作ってしまうというのも割とありかなと思いました。