ubuntu18.04のFirefoxでScratchとmicro:bitを連動させる

# はじめに
STEM教育における2大巨頭と言えば、Scratchとmicro:bitだろう。
どちらも解説本も充実しているしネット上で情報もたくさん手に入る。自分も子供に使わせている。二つともとっつき易いものだし子供が使うことをよく考えられたもので、大人が触っていても面白い。現在の開発環境にマッチしているかと言われると？？だが、それでもアルゴリズムや論理的な思考を学ぶという意味では非常に有効だと思う。

だがその二つを一緒に組み合わせて使おうと思うと途端に難易度が跳ね上がる。正確に言うとmicro:bitとScratchをつなぐためのscratch_linkという公式のソフトウェア要件がかなり条件が限られてくるためだ。

[公式サイト](https://scratch.mit.edu/microbit)の動作要件を確認するとこんな感じ。

1. macOS 10.10 (Yosemite) または Windows 10 バージョン 1709 (Fall Creators Update)、ChromeOS、Android 6.0+
1. インターネット接続 (Scratch デスクトップバージョン3.14.0以降で使う場合を除く)
1. Bluetooth

Linuxがはいっていない！自分の場合は、元々WindowsVistaが入っていたお古のPCにubuntu18.04を入れて子供に与えているので、BLuetoothすらついていない昔のPC動作要件満たしているわけもないのだが、子供がmicro:bitでScratchを操作したいということで、色々弄った挙句実現できたのでまとめてみました。

# 環境
PC:FMV-BIBLO FN/B40 (Celeron550 -> Core 2 Duo T8300 CPU換装済み / Memory 3GBに増設済み / HDD -> SSD換装済み)
OS:Ubuntu18.04
Python:python v3.6
ブラウザ:Firefox 89.0(64bit)
Bluetoothアダプタ:tp-link UB4A
Micro:bit v2

# どうやら子供はMicro:bitでScratchを動かしたいらしい
良く見ないでとりあえず動くだろうということで、Micro:bit v2を購入。
v2のほうがマイクとスピーカーが内蔵されていて色々とできることが多いらしいということで、迷わずv2を購入。
それにしても、売っているところが限られていてここで挫折する人いそうだな。

私は、[ラズパイの正規代理店のケイエスワイ](https://raspberry-pi.ksyic.com/)というところで買った。
若干サイトが怪しいが何の問題もなく届いた。
秋月電子でも千石通商でもサイトの作りはさほど変わらないのでどこで買っても変わらない。自分の好きなお店で買えばいいと思う。

# Linuxは対応していない、だと・・・
micro:bit v2を購入して、とりあえず電源を入れると、ボタン押せだとか振れ！と言った命令が初期状態で入っているようだ。
子供はそれだけでも十分面白いようだ。

でも自分でプログラム入れてなんぼなので[MakeCode](https://makecode.microbit.org/?lang=ja)でプログラム作ったものをバイナリ化できてそれをmicro:bitに入れればとりあえず動くということなので試してみる。
・・・動いた。自分の入力したLEDの形が表示される。これは子供にとっては結構感動するな、間違いなく。

それだけであれば簡単だが、この先何ができるのかがいまいちパッと思い浮かばない。
ということで、さっそくScratchと連動させてみるかと調べてみた結果。

**Micro:bitとScratchを連携させるには、macOS 10.10 (Yosemite) または Windows 10 バージョン 1709 (Fall Creators Update)、ChromeOS、Android 6.0+が必要です**

Linuxは対応していないだと・・・。

参った。ウェブで調べてみる。そうすると世の中には素晴らしき先人がいて、連動させるためのscratch_linkをLinuxで動くものを作ってくれている方もいてそれを使うことで何とかなりそうな気配だ。頑張ろう。

https://github.com/kawasaki/pyscrlink

# 実はBluetoothが必須らしい

要件にはBluetooth4.0BLEの文字が。そしてパソコン側にBluetoothがついていないことが発覚。USBでつないでいるので、USB経由で操作すると思ったら違うのね。

で、前の記事の通り、tp-linkの[UB4A](https://www.tp-link.com/jp/home-networking/computer-accessory/ub4a/)をノートPCに導入した次第。刺すだけで認識してよかった。

https://qiita.com/disktopic/items/06c9ef4495e00f70cd16

# そんなこんなで本題に

とりあえず、ハードウェア面での準備はできたため、いよいよubuntu18.04側での設定を行っていく。
ubuntuのバージョンは、以下の通り

    $ uname -a
    Linux FMVNFB40J 5.4.0-74-generic #83~18.04.1-Ubuntu SMP Tue May 11 16:01:00 UTC 2021 x86_64 x86_64 x86_64 GNU/Linux

まずは一通りパッケージのアップデートして、再起動

    $ sudo apt update
    $ sudo apt upgrade
    $ sudo reboot

起動してきたらBluetoothを認識しているかを確認

    $ lsusb
    Bus 002 Device 004: ID 0bda:0158 Realtek Semiconductor Corp. USB 2.0 multicard reader
    Bus 002 Device 005: ID 0411:0110 BUFFALO INC. (formerly MelCo., Inc.) 
    Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
    Bus 007 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub
    Bus 006 Device 002: ID 093a:2510 Pixart Imaging, Inc. Optical Mouse
    Bus 006 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub
    Bus 005 Device 002: ID 0a12:0001 Cambridge Silicon Radio, Ltd Bluetooth Dongle (HCI mode)
    Bus 005 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub
    Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
    Bus 004 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub
    Bus 003 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub

ちゃんと認識しているので、大丈夫そう。

今回は、**Python v3**で環境構築します。一度途中までPython2で進めてみたのですが、pyscrlinkのパッケージがpython v3.6以上の要求となっていたため、インストールできませんでした。そのあたり明記しているサイトが無くて、pipでインストールをしているものが殆どだったので、Pytho v2環境で動くものかと思ってた。

インストールに関しては、[先に紹介したgithub](https://github.com/kawasaki/pyscrlink)を参考にすることで進めることができるが自分が嵌ったところもあるので、そこも併せて説明していく。

まず、pip3がインストールされていないため、pip3のインストールを行う

    $ sudo apt install python3-pip

pythonのデフォルト実行はv2になっているが、v3を標準したいため、以下のコマンドで、優先順位を変える
まずはpythonのバージョン確認からの優先度の変更。

    $ sudo python -V
    $ sudo update-alternatives --install /usr/bin/python python /usr/bin/python2.7 2
    $ sudo update-alternatives --install /usr/bin/python python /usr/bin/python3.6 1
    $ sudo update-alternatives --config python
    $ sudo python -V

次にpipも優先度を変更

    $ sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip2 2
    $ sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1
    $ sudo update-alternatives --config pip
    $ sudo pip -V

これでそのままコマンドを打ってもv3系で動きます。

次に必要なパッケージもインストールします

    $ sudo apt install bluez libbluetooth-dev libnss3-tools libcap2-bin libglib2.0-dev

以降面倒になって、rootでやってしまったが、pyscrlinkのインストールを実行中に問題発生。

    # sudo su -
    # pip3 install pyscrlink

でインストールを行おうとするが、cryptographyが古いので、pipのアップデートを行えと言われ、pipをアップデートしても状況が変わらず。ここは原因が分からずかなりの時間を要してしまいました。
いろいろと調べた結果rustのバージョンが古いことが原因となっているよう。以下のコマンドでrustのインストールを行う。curlも入っていなかったのでついでに導入。この辺りの記事が参考になりました。

https://qiita.com/yoshiyasu1111/items/0c3d08658560d4b91431


    # apt install curl
    # curl https://sh.rustup.rs -sSf | sh

rustインストール後に、パスを通すスクリプトが`$HOME/.cargo/env`にあるので、読み込ませる。

    # cat /root/.cargo/env 
    # source /root/.cargo/env 
    # cargo --version

念のため、コマンドが想定されているバージョンになっているか確認する

    # rustc -V
    # rustdoc -V
    # rustup -V

これでようやくpyscrlinkがインストールできるようになるので、再びトライ

    # pip3 install pyscrlink

今度は問題なく入りました。最後にroot権限のあるユーザで、以下のコマンドを実行します。

    # bluepy_helper_cap

# micro:bit v2へのScratch micro:bit HEXのインストール

ここでも一か所ハマったのだが、micro:bit v2では、Scratch micro:bit HEX v1.1.0がうまく動かないことが確認されており、その対策版としてv1.2.0が現在は最新版として[ダウンロード](https://downloads.scratch.mit.edu/microbit/scratch-microbit.hex.zip)できるようになっている。こちらをmicro:bitに入れる必要がある。
ほかのブログを参考にした際に、v1.1.0でやっておりうまくいかずにしばらく悩んでしまったが、v1.2.0を入れたところ問題なく動作した。

やり方としては、ダウンロードしてきた`scratch-microbit-1.2.0.hex.zip`を解凍して`scratch-microbit-1.2.0.hex`を作っておく

micro:bitをUSBケーブルでパソコンとつなぐことで、デスクトップにMICROBITのアイコンが現れるので、そこに`scratch-microbit-1.2.0.hex`をドラッグアンドドロップすることで、プログラムがmicro:bitにコピーされる。

![Screenshot from 2021-06-16 00-55-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/4525afcb-a442-6358-c6ef-2638bee5ea4c.png)

暫くして、micro:bit側のLEDに5文字の英数字が流れてくるようになれば導入完了です

# Firefox側での設定

これで大丈夫かと思いきやブラウザ側でも設定変更が必要でした。使用したブラウザのバージョンは、Firefox 89.0

![Screenshot from 2021-06-15 00-04-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/a5e31b81-b55c-8d53-a43f-97b8d2037ad5.png)

Firefoxを起動させて、アドレスバーに`about:config`と入力する
警告画面が出るので、`危険を承知の上で使用する`をクリックして設定変更画面へと遷移します
![Screenshot from 2021-06-15 00-01-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/4280b1bc-06ae-b705-9c06-1ff40e34f1e8.png)

`network.web`で検索をかけると
`network.websocket.allowInsecureFromHTTPS`
`network.websocket.auto-follow-http-redirects`
の2つの項目が見つかるので、両方ともダブルクリックをすることで'true'へと変更しておく。

![Screenshot from 2021-06-15 00-03-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/a3ef78f5-be80-4a61-16cb-5e9c369cbb22.png)

これで、すべてが完了。

# いよいよScratchと連動

デスクトップ上の任意の場所を右クリックして、`端末を開く(E)`を選択する。
scratch_linkを起動させます。

    $ scratch_link

![Screenshot from 2021-06-16 01-03-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/74536ff5-cad9-a805-f325-f76206d04a57.png)

**事前にこれをやっておかないとうまく動きません。**
常に使っているユーザの起動時に実行されるようにしてもいいかもしれませんが私の場合は子供には儀式として説明するために残しておくことにしました。


いよいよ[Scratchのサイト](https://scratch.mit.edu/)に接続して、うまく動くかを確認する時が来ました。
作ってみようをクリックします。
![001-0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/1fd03114-e7dc-5630-b4a9-fe53dae8f7f0.png)


左下の拡張機能の追加をクリック
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/6bd7b733-debb-6e0d-8561-1db30275df51.png)


拡張機能の一覧が表示されますので、micro:bitをクリックします
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/232912ba-504d-e62e-6790-84284307e099.png)


するとデバイスを探していますの文字が出てくるのでしばらく待つ
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/1606d61c-72e8-44cf-5ff2-076966ae09ac.png)


待っているとmicro:bitが表示されるので`せつぞくする`をクリックします
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/8e3d9b70-121c-d2f2-64f4-76ee41de56dd.png)

`せつぞくされました`が表示されるので`エディタへいく`をクリックします
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/f01b307a-24df-7f28-fd3d-9f38b41aa9b4.png)

これでScratchにmicro:bitを接続することができました。ScratchでMicro:bitのブロックが増えているはずです。
マイクロビットの機能が使えるようになるので、それらを使ってScratchでプログラムを作成します。
ちゃんとAボタンを押すとスプライトがニャーニャー鳴きます。

![Screenshot from 2021-06-16 01-12-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1647593/6265d040-cfd7-dfbf-a0f9-dabd86a47d5d.png)


# まとめ

最初から最後まで細かなところで迷ってしまったが、とりあえずは目的を達成することができて良かった。

そもそも要件に書いてあるAndroid使えばいいじゃんという話もあったりするが、学校授業ではPCを使って色々と行うことを考えるとできるだけ同じ環境にしてあげた方が良いというのもあるし、子供のそんなに高いパソコンやスマホを与えても初めは宝の持ち腐れになってしまうので、古いPCにLinuxをインストールして子供に上げて、自分が新しいパソコンを買ったほうが、みんなが幸せになれると思うといったところが本音。