LoginSignup
4
2

More than 1 year has passed since last update.

@t-sho(Shota Yano)inKumaMCN

ChromebookでM5Stackを触る

Last updated at Posted at 2023-02-09

はじめに

学生向けM5Stackを見せる機会ができたので、学校で生徒が使っているChromebookでM5Stackのプログラムを作れるようにするための環境構築的なメモです。
本当はArduino IDE使ってChromebookのみで完結させたかったんですが、USB接続とかアプリのインストールなどセキュリティ関係の制限等など制約がありそうで、無線＋ブラウザで開発できるUIFlowにしました。(そもそもLinuxのインストールも制限されている可能性もあり。。。)
ただそうなると、最初のM5Stackのファームウェア書き換えでどうしてもWindows10のPCが必要だったのがネック。。。とはいえ、初回のファームウェアの書き換えされ乗り切ればこれが一番簡単な気がする。

ChromebookのLinux環境が使える場合はChromebookだけで完結できます。
参考：ChromebookだけでM5StackのUIFlowを使えるようにする

準備するもの

  • M5Stack Basic
  • Chromebook
  • Windows10のPC(初回の準備で使います)

準備（最初の1回だけ）

M5StackはそのままだとUIFlowが使えないため、Windows10のPCを使ってM5Stackのファームウェアを書き換える必要があります。

  1. ドライバーのダウンロード
    M5Stackのダウンロードサイトの中段くらいにある「CP210x_VCP_Windows」をダウンロードします。
    image.png

  2. ドライバーをインストールする
    ダウンロードした「CP210xVCPInstaller_x64_v6.7.0.0.exe」を実行してインストールを行います。特に何も考えずに画面の表示に従って「Install」をクリックすれば完了するかと思います。
    image.png

  3. Windows10のPCをM5StackをUSBで接続する
    接続すると給電されて書き込み済みのプログラムが起動するかもしれませんが無視してよいです。
    image.png

  4. M5Burnerをダウンロードする
    先ほどと同じM5Stackのダウンロードサイトにある「M5Burner Win10 x64 v3.0」をダウンロードします。
    image.png

  5. M5Burnerを起動する
    ZIPファイルを解答した後、「M5Burner.exe」を起動します。
    image.png

  6. UIFlowのファームウェアをダウンロードする
    まずはUIFlow(Core)のダウンロードを行います（初回だけです。ダウンロード済みの場合は次に進んでください）
    バージョンはひとまず最新でよいです（デフォルト表示されているもので良いです）。
    image.png

  7. ファームウェアを書き込む
    Burnボタンをクリックしてファームウェアを書き込みを開始します。
    image.png

  8. M5Stackが接続するWi-Fiの接続情報を入力する
    ファームウェアを書き込む際、M5Stackが接続するWi-Fiの接続先のSSIDとパスワードを入力してください。
    この時、自宅で使う場合は自宅のもので良いですが、職場や学校で使う場合はその場所で使うネットワークを指定してください。
    入力後、「Next」ボタンをクリックしてください
    ※接続先は2.4G帯にしてください
    image.png

  9. Startボタンをクリック
    ポートを選択し「Start」ボタンをクリックします。Rateは変更なしです。
    image.png
    ポートがわからない場合はデバイスマネージャから確認できます。「CH9102」というのが選択対象です。
    image.png

  10. 書き込みが終わるまで待つ
    もしエラーが発生する場合はエラー内容を読んで解消してください。（よくあるのがCOMポートの選択ミスです）
    image.png

  11. 書き込み完了
    「Burn successfully, Click here to return」ボタンをクリックして、最初の画面に戻ります。
    M5Stackの画面には何か表示されてるかもしれませんが、今は無視してよいです。
    image.png

  12. 設定画面を表示する
    「Configurate」ボタンをクリックします。
    image.png
    ポート選択の画面が出ますが、そのまま「Load」ボタンをクリックします。
    image.png

  13. StartModeを確認する
    Start Modeが「Internet Mode」になってることを確認してください。
    ついでに「APIKEY」が表示されてることも確認しておいてください（後で使うので念のため）

    また、WIFI SSIDとパスワードが先ほど入力した内容と一致してるか確認してください。もし間違えてた場合は修正してください。
    修正した場合は「SAVE」ボタンをクリックして保存します。
    image.png

  14. M5StackをPCから切り離し、再起動する
    こんなメッセージが表示されている場合は、説明に従って、リセットボタンを押して、真ん中のボタンを押し続けます。
    image.png

  15. Wi-Fiに接続失敗したらこんな感じになりますので、再度PCに接続し、設定画面からSSIDとパスワードを確認してください。
    image.png

  16. 再起動後、Wi-Fiに接続しAPIEKYが表示されれば完了
    image.png

ここまでで準備完了です。
ここまで来たら、Wi-Fi情報やファームウェアを書き換えない限りあとはChromebookだけで大丈夫です。

ChromebookでHello World

いよいよChromebookから操作していきます。

  1. M5Stackの画面に表示されているURLにアクセスします。
    ブラウザ版UIFlowのサイトにアクセスします。

  2. APIKEYを入力する
    M5Stackの画面に表示されているAPIKEYを入力してください。
    言語は何でも良いですが、ここでは日本語としておきます。
    一番下のデバイスのアイコンは左上の「Core」を選択してください。
    最後に「OK」ぼたんをくりっくします
    Screenshot 2023-02-08 16.22.00.png

  3. 接続済みになったことを確認する
    画面右下に「接続済み」と表示されていればOKです
    Screenshot 2023-02-08 16.25.30.png

  4. Labelを画面にD&D
    Screenshot 2023-02-08 16.29.10.png

  5. TextにHello Worldと入力
    Screenshot 2023-02-08 16.33.06.png

  6. 「Run」ボタンクリックして実行
    Screenshot 2023-02-08 16.37.44.png

  7. M5Stack本体に表示される
    image.png

今回はここまで。
次回UIFlowでブロックプログラミングをやってみようと思います

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
2