M5Stack Basic v2.6 初期設定（UIFlow、Windows11）2023/03/26

# はじめに
UIFlowを用いてM5Stackの開発をやっていきます

# 開発環境
- [M5Stack Basic V2.6](https://www.switch-science.com/products/7362)
- Windows11 PC

# 導入

## ドライバーのインストールとUIFlowファームウェアの書き込み（初回のみ）
1．ドライバー（CP210x_VCP_Windows）のインストール
https://docs.m5stack.com/en/quick_start/m5core/arduino

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/ba1c00fe-5b65-2f2e-43ff-f3e614e86cf4.png)

2．ダウンロードしたCP210xVCPInstaller_x64_v6.7.0.0.exeを実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/bda08eb1-ab46-069a-06ea-04097f671864.png)

3．次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/0a05f016-4cda-d794-15be-f1460b70985d.png)

同意して次へで完了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/3cd58ebf-b1f8-a4de-af19-bf67ede34066.png)


5．M5Burner Win10 x64 v3.0のインストール
https://docs.m5stack.com/en/download

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/d911ffac-d47d-58d9-0d6c-cc702fb5db3e.png)

6．解凍し、M5Burner.exeを実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/67ef81af-760a-6942-d3c6-33928fe4f001.png)

7．UIFlow v1.11.4をダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/339753ee-ccf0-9223-08cb-9053b60bbb61.png)

8．M5StackをPCにUSB接続し、Burnをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/2cd778b5-c101-5148-56cf-6fd125e4b41a.png)

9．PCで接続しているWiFiのSSIDとPasswordを入力し、Nextをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/3c1a6623-e5b0-ae2d-9693-b408e9e57ab3.png)

10．COMポートを選択し、Startをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e131723b-8a1f-7070-0b7c-0ec665aa48bc.png)

---

※COMポートが選択できない場合、ドライバーが間違っている可能性があるため、CH9102_VCP_SER_Windowsのドライバーをインストールしてみてください。

[Windows10](https://twitter.com/sotongshi/status/1317758401946947591?s=20)の場合はこうでした
1．ドライバー（CH9102_VCP_SER_Windows）のインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/ae41f700-cfdd-61cb-21bd-08504d39ba19.png)
2．ダウンロードしたCH9102_VCP_SER_Windows.exeを実行
3．INSTALLをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/d78795c3-1091-7a95-4874-42634801e4ae.png)
4．OKをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/2d7388e2-518c-0cf8-1ea4-64f3247a299c.png)

---

11．書き込み完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/40307827-9e06-9459-abe1-338bc2b994af.png)

## UIFlowを始める
UIFlowで開発を始めるためにはまずM5StackとPCを同じWiFiに接続する必要があります。

1．M5Stackの電源がついたらすぐにSetupボタンを押す

2．Wi-Fi via APをクリックし、PCからM5StackのWiFiに接続

SSID：M5-XXXX
192.168.4.1

3．PCのブラウザで 192.168.4.1 にアクセス、SSIDとPasswordを入力してConfigureをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/106bc152-f91d-462b-bfef-54b3480d918e.png)

4．M5StackがWiFi接続に成功すると再起動し、APIKeyが表示される

5．PCもM5Stackと同じWiFiに接続し、UIFlowを開く
https://flow.m5stack.com/

6．APIKeyを入力し、OKをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e983d5f1-6651-b780-d9f8-d598b8b0bf87.png)

7．プログラムを作成し、Runで実行、DownloadでM5Stackにアプリを書き込むことができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/d345a5ea-64f8-7dbd-72e1-fd0a02e18630.png)

開発を始めましょう！