M5StickCとAzure IoT Centralを連携してデータを可視化する① ～M5StickC開発環境準備編～

# はじめに
この記事はシリーズになっています。
目標は、「M5StickCとAzure IoT Centralを連携してデータを可視化すること」です。必要な人が必要な記事を読んでもらうことで、ゴールまでたどり着けることを意識しています。
構築するシステム構成は、以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/17c632b7-2be7-a3ee-ae60-9933db7fac4c.png)

1. [M5StickCとAzure IoT Centralを連携してデータを可視化する① ～M5StickC開発環境準備編～](https://qiita.com/yukimatsu/items/52c6b8435cc81d1c9dfa)
1. [M5StickCとAzure IoT Centralを連携してデータを可視化する② ～Azure IoT Central環境構築編～](https://qiita.com/yukimatsu/items/e35542e16792e7818720)
1. [M5StickCとAzure IoT Centralを連携してデータを可視化する③ ～M5StickCとAzure IoT Central接続編～](https://qiita.com/yukimatsu/items/c72ee84fb64cb4ba5118)

# この記事で出来るようになること
* M5StickCの開発環境を構築する
* M5StickCを使って簡単なプログラミングをする

# 対象
* Azure関連は得意だけど、デバイス側が少し苦手という人
* M5Stack関連の環境構築に少し戸惑っている人

# 手順
## １．部材リスト
* [M5StickC](https://www.switch-science.com/catalog/5517/)
* [M5StickC ENV II Hat（SHT30/BMP280/BMM150搭載）](https://www.switch-science.com/catalog/6559/)
* [M5Stack用光センサユニット](https://www.switch-science.com/catalog/4051/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/2e8fbfce-b2c0-0b47-9387-c44336ebae81.png)

## ２．開封

ケースを開けた状態
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/33989752-54bf-2fba-6fe6-008a776537bf.png)

M5StickCがバンドに付いているなら、一応、取り外す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/e277108e-85d5-98b5-b15c-b4a14108121c.png)

グイっとやるとこんな感じで外れます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/0d994cc2-6d7f-f8ca-c0f3-9b3f6248bf17.png)

それぞれをケースから出します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/d8a6ce49-99ba-9ba2-1958-0269d08dce76.png)

## ３．接続

センサモジュールを取り付けます。
取り付くようにしか付かないので、安心して作業して下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/cfc23db0-b749-6cc3-05c6-662e868d2063.png)

電源を入れるとディスプレイに表示される（初期ファーム）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/6491b2e2-7fc7-a2c5-3a0c-3a4ec31b9a58.png)




## ４．ドライバーのインストール

以下の２つをインストールします。

①FTDIのドライバー（自分のPC環境に応じたものを選択）
＊多くの人は、Windows／X64(64-Bit)を選択するかと思います
https://ftdichip.com/drivers/vcp-drivers/

②「CP2104 Driver」のインストール（自分のPC環境に応じたものを選択）

https://shop.m5stack.com/pages/download

## ５．M5Burnerのインストール
UI Flowの開発環境を使えるようにファームウェアのアップデートをするためのツールです。
以下のサイトから、「M5Burner」をインストールします（自分のPC環境に応じたものを選択）

https://shop.m5stack.com/pages/download

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/3e8e184b-2514-a578-1ff1-0f7445dfe612.png)

## ６．M5Stickのファームウェアを更新
[M5Burner]を起動します。
次に、[COM]の番号を確認します。正しくドライバーがインストールされていれば、M5StickCをパソコンに接続したり取り外したりすることで、現れたり消えたりするCOM番号があると思います。それが、認識されているM5StickCのCOM番号になります。M5StickCを接続して、このCOM番号を選択します。

[STICKC]を選択します。
[UIFLOW(StickC)]のファームウェアが表示されるので、[Download]ボタンからダウンロードをします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/4aab73d2-0b94-7f42-9400-dc9655ce335b.png)

ダウンロードが環境すると、以下の画面になるので、[Burn]をクリックして、ファームウェアを書き込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/e51bf40c-a7e0-2ccc-d7ca-69448e0e8be6.png)

[Wifi Setting]の画面が表示されるので、WiFiの設定を行います（ **2.4GHz帯** を選択して下さい）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/f26675b7-a7aa-580e-b1a7-3bb1477515b4.png)

書き込み中
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/9faf56ef-1b55-41e2-c44a-168c06226e4a.png)

書き込みが完了し、正しくWiFiに接続できると以下の表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/493699a0-574b-5904-3635-0f2f8d0e9ec7.png)
**重要**
画面に表示されている **[API KEY]** の8桁のコードは後で使用します

## ７．UI Flowを開く
UI Flowのリンク

https://flow.m5stack.com/

右上のボタンから[設定]を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/bd75cb1c-3476-6560-71a5-c2ad39656c91.png)

[Api key]にデバイスに表示されている8桁のコードを入力する。
[Device]は、M5StickCを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/1c6cb31b-877d-a6f0-6629-6c00190aeb80.png)

画面上のデバイスもM5StickCになっていることを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/b22c9152-7e7e-bf9f-6111-6d12ca8076bc.png)

左下のメニューで、デバイスが正常に接続されていれば、[接続済み]と表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/cafb899d-1425-c282-589f-20f4eeb70787.png)

[接続済み] とならない場合は、以下を確認してください
・M5StickCがWiFiに正しく接続されていて、青っぽい画面になっているかどうか
・WiFiルーターなどが正しく起動しているかどうか
・WEBブラウザ上の [Refresh] を試してみて下さい

## ８．UI Flowでプログラムを書き込む
上記の手順で、[接続済み]となっていることを前提とします。
右上のメニューから[RUN]をクリックして書き込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/63adab68-d9dd-9bd6-5287-5bac4e6e370d.png)

以下のようにメッセージが表示されると、実行が完了しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/2304f3a8-e1c4-5eae-83e4-696f1e793e25.png)

M5StickCを見ると、画面が黒くなっていると思います（初期プログラムの場合）。

## ９．もう一度プログラムを書き込む場合
M5StickCの本体で、[M5]を書かれたボタンのサイドにもボタンがあるので、これを１回押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/40a4e224-790c-891e-0750-428b7554e42c.png)

再び、[API KEY]が表視されている画面に戻ることを確認します。
これで、もう一度プログラムを実行できる状態に戻りました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/493699a0-574b-5904-3635-0f2f8d0e9ec7.png)

これで、[RUN]をクリックすることでもう一度プログラムを実行することが可能です。

## １０．簡単なプログラム
ブロックを並べて、次のようなプログラムを作成します。
１秒ごとにM5StickCの画面の色が変化します。
実際に、[RUN]をクリックして、M5StickCの画面の色が実際に変化することを確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/628bc1ef-cb7b-84cf-db80-949c8aa02cc8.png)

以上で、以下が出来るようになりました。

* M5StickCの開発環境を構築する
* M5StickCを使って簡単なプログラミングをする

# 次の手順
次は、Azure IoT Centralの環境を準備します。
次の記事までしばらくお待ちください！

# おまけ
本記事は、以下のキャンペーンに参加しています。

https://qiita.com/official-events/b7811ce1542be54e6efe