LoginSignup

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

@t-sho(Shota Yano)

【準備】Windowsを使ってM5StackでUIFlow1.0を使えるようにする

Last updated at Posted at 2025-08-15

この資料は2025/8/18に実施した高校生向けのハンズオン資料です。
UIFlowの開発の主流は2.0ですが、ハンズオンの特性上デバイスをユーザに紐づけないようにするため、本ハンズオンではUIFlow1.0を対象としています。

どんな時にこの資料を使うか

  • 新しく購入したM5StackをUIFlow用に初期セットアップするとき
  • M5StackがUIFlowに接続できないとき
  • M5Stackが接続するWi-Fiの接続先を変えたいとき

準備するもの

  • M5Stack(今回はM5Stack Core2を使用します）
  • Windows 11(Windows10でも可能）
  • Wi-Fiの接続情報（SSIDとパスワード）

M5Burnerの入手する

M5StackはそのままだとUIFlowが使えないため、M5Stackのファームウェアを書き換える必要があります。ファームウェアはハードウェア（M5Stack本体）を動かすためのソフトウェアです。今回作成したプログラムとハードウェアの間で動いて情報を処理してくれるものと思ってください。

  1. ドライバーをダウンロードする
    まず初めにWindowsのPCにM5StackをUSBで接続した際にM5Stackを認識できるようにすためドライバーをインストールす必要があります。まずはそのドライバーを入手します。
    M5Stackのダウンロードサイトの中段くらいにある「USB Driver & Open source Library」の「CP210x_VCP_Windows」をダウンロードします。
    image.png

    ※補足：今後本体が新しいバージョンになる、Basicなどシリーズを利用する場合、WindowsのPCでM5Stackが認識しない場合は「CH9102_VCP_SER_Windows」をダウンロードしてインストールしてください。

  2. ドライバーのZIPファイルを解凍する
    ダウンロードしたZIPファイルを解凍します。ZIPファイルを選択し、右クリックで「すべて展開」をクリックします。
    image.png

  3. ドライバーをインストールする
    解凍したフォルダの中にある「CP210xVCPInstaller_x64_v6.7.0.0.exe」を実行してインストールを行います。
    image.png

    1. 次へ
      image.png

    2. 同意して次へ
      image.png

    3. 完了
      image.png

  4. M5Burnerをダウンロードする
    ファームウェアを書き込むためのツールをダウンロードします。
    M5Stackのダウンロードサイトの中段くらいにある「UiFlow Firmware Burning Tool」の「M5Burner Win10 x64 v3.0」をダウンロードします。
    image.png

  5. M5Burnerを解凍する
    ダウンロードしたZIPを選択し、右クリックで「すべて展開」をクリックして解答します。
    image.png

M5Burnerを使ってファームウェアを更新する

  1. M5Burnerを起動する
    解凍したフォルダの中にある「M5Burner.exe」をクリックしてアプリを起動します。
    image.png

    ※補足：警告が出た場合
    Windowsに直接インストールしていないタイプのアプリは実行する際に警告メッセージを出すことがあります。
    以下のような画面が出た場合は「詳細情報」をクリックしてください。
    image.png

    実行ボタンをクリックしてください。
    ※今回のアプリはM5Stack公式のものなので実行して問題ありません。
    image.png

  2. M5Burner起動後、左のリストから「Core2&TOUGH」を選択します。
    image.png

  3. UIFlow_Core2をダウンロードする
    UIFlow_Core2をリストの中から探し、「Download」ボタンをクリックします。
    ※バージョンは今回「v1.14.8」を利用しますが、ここは基本的にその時の新しいものを使ってよいです。
    ※今回UIFlow2.0は利用しないのでご注意ください。
    image.png

  4. Burnをクリックする
    image.png

  5. COMポートを選択して「Next」をクリック
    image.png

    ※補足：COMが複数選択しある場合どうすればいいか
    基本的にはM5Stackを最後にPCに接続している場合、数字が一番多きものを選べばよいですが、より正確に調べるにはデバイスマネージャーを見ると良いです。
    Widnows11の場合、画面下の検索に「デバイスマネージャー」と入力すると、コントロールパネルのデバイスマネージャーがヒットするのでクリックして起動します。
    image.png
    ポートの配下にいるデバイスの値が画面で選択すべきポートです。（「CH9102」というのが選択対象です。）
    image.png

  6. Wi-Fiは空のまま「Next」をクリック
    image.png

  7. 完了するまで待つ
    image.png

  8. ボタンをクリックして書き込み画面を閉じる
    image.png

接続先のWi-Fiの情報を更新する

M5Stack本体が接続するWi-Fiの接続先を書きかえる

  1. Configureボタンをクリックします。
    もしこのボタンが出ない場合は、ダウンロードしたバージョン（この記事の通りにしている場合はv1.14.8）とあなたの画面で選択されたバージョンが異なる可能性があります。ダウンロードしたバージョンにそろえるか、新しいバージョンをダウンロードしてください。
    image.png

  2. COMポートを選択する
    M5Stackを接続しているポートを選択し、「Load」ボタンをクリックします
    image.png
    image.png

    ※補足：COMが複数選択しある場合どうすればいいか
    基本的にはM5Stackを最後にPCに接続している場合、数字が一番多きものを選べばよいですが、より正確に調べるにはデバイスマネージャーを見ると良いです。
    Widnows11の場合、画面下の検索に「デバイスマネージャー」と入力すると、コントロールパネルのデバイスマネージャーがヒットするのでクリックして起動します。
    image.png
    ポートの配下にいるデバイスの値が画面で選択すべきポートです。（「CH9102」というのが選択対象です。）
    image.png

  3. 設定情報を更新する
    以下の通りに設定し、「Save」多本をクリックしてください。

    • Start Mode：Internet Mode
    • Boot Beep：Off
    • WIFI SSID：接続したいWi-FiのSSIDを入力
    • WIFI Password：接続したいWi-Fiのパスワードを入力

    image.png

  4. 再起動後API KEYが表示されれば接続完了です
    image.png

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?