M5StickC Plus とUIFlowでプログラミング(2-1) - 事前準備

※2021/07/07　「画像」と「Wi-Fi接続の再設定方法」を追加しました。
※2021/09/11　「UIFlow」の導入部分を詳しく説明した記事を書いたので、リンクを追加しました。

はじめに

　M5StickC Plusにプログラムを行う方法はいくつかありますが、今回は、UIFlowという、Scratchやmicro:bitのMakeCodeエディタのように使用できるブロックエディタを使用することにします。

UIFlow

　UIFlow自体は、Web上のサイトからプログラミングを行う方法と、デスクトップアプリで行う方法と選ぶことができます。また、接続方法についても、USBによる有線での接続または、Wi-fiによる無線接続が可能です。
今回は、生徒Chromebookからプログラミングを行いたいので、無線接続一択ですが、USB接続も捨てがたいと思っています。なんといっても物理的につながっているのは「転送してる！」感があっていいと思います。無線だとどうしても「本当につながってるの？」という感じが拭えませんしね。

　UIFlowは、素のM5StickC Plusでは使用できません。M5StickC Plusのファームウェアを書き換える必要があります。一度書き換えればあとはファームウェアのアップデート以外で書き換える必要はありません。

ファームウェアの書き換え

　Macでもできると思いますが、手元の環境がWindowsですので、Windowsでの説明になります。

ファームウェアの書き換えには
・CP210ドライバをコンピュータに導入
・M5Burnerというソフトを使用してCOM経由でファームウェアの書き換え

という２段階があります。

　当然、この作業にはドライバを入れたりと、管理者権限が必要になるので、学校のPCではなく、私用のPCで行いました。

参考１（公式）
参考２（Lang-ship - 個人サイト）

　M5Burnerでファームウェアを書き換える際にWi-FiのSSIDとパスワードを設定することができます。常に同一環境で行うならこのときに設定しておけばよいと思います。学年費等で生徒個人が買って家庭に持ち帰ってもいいというような使い方であれば、家庭のネットワーク環境でSSIDとパスワードを再設定する方法を同時に教える必要があります。

Wi-Fi接続の再設定方法

　具体的にはM5StickC Plusを、サーバー（アクセスポイントモード）として起動して、設定用PCやスマホから設定用画面（192.168.4.1）を呼んで、設定するという手順になります。

M5StickC Plusをアクセスポイントモードとして起動するには、UIFlowのファームウェアが書き込まれたM5StickC Plusのメニュー（呼び出し方は(3)で説明します）から「Setup」を選びます。

　すると、コンピュータやスマートフォンからM5StickC Plusがアクセスポイントととして認識できるようになるので、そのネットワークを選んで接続します。

　この状態でスマートフォンのブラウザから「192.168.4.1」にアクセスすることでUIFlowが使用するWi-Fiの設定ができます。

　SSIDの欄を選ぶと、検出したSSIDの一覧が出るので、使いたいWi-Fiを選択して、パスワード欄にパスワードを入れ、「Configure」を押してください。

　なお、SSIDはセキュリティ上、機器から検出できないように設定されている場合もあります。その場合は、SSID欄の横の「Other」のチェックを入れるとSSID欄に直接入力ができるようになるので、直接SSIDを入力して設定を完了してください。

　1回設定してしまえばWi-Fiの切り替えはM5StickC Plusの設定画面から行えます。

上の写真の「Wi-Fi Select」という項目がそれです。

　ちなみに、さらっと重要な事項ですが、M5StickC Plusは2.4GHz帯のWi-Fiのみアクセスでき、5GHz帯にはアクセスできないようですので、お気をつけください。