9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-09-14

はじめに

この記事はシリーズになっています。
目標は、「M5StickCとAzure IoT Centralを連携してデータを可視化すること」です。必要な人が必要な記事を読んでもらうことで、ゴールまでたどり着けることを意識しています。
構築するシステム構成は、以下のようになります。
image.png

  1. M5StickCとAzure IoT Centralを連携してデータを可視化する① ~M5StickC開発環境準備編~
  2. M5StickCとAzure IoT Centralを連携してデータを可視化する② ~Azure IoT Central環境構築編~
  3. M5StickCとAzure IoT Centralを連携してデータを可視化する③ ~M5StickCとAzure IoT Central接続編~

この記事で出来るようになること

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

対象

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

手順

1.部材リスト

image.png

2.開封

ケースを開けた状態
image.png

M5StickCがバンドに付いているなら、一応、取り外す
image.png

グイっとやるとこんな感じで外れます
image.png

それぞれをケースから出します
image.png

3.接続

センサモジュールを取り付けます。
取り付くようにしか付かないので、安心して作業して下さい。
image.png

電源を入れるとディスプレイに表示される(初期ファーム)
image.png

4.ドライバーのインストール

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

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

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

5.M5Burnerのインストール

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

image.png

6.M5Stickのファームウェアを更新

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

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

image.png

ダウンロードが環境すると、以下の画面になるので、[Burn]をクリックして、ファームウェアを書き込みます。
image.png

[Wifi Setting]の画面が表示されるので、WiFiの設定を行います( 2.4GHz帯 を選択して下さい)。
image.png

書き込み中
image.png

書き込みが完了し、正しくWiFiに接続できると以下の表示になります。
image.png
重要
画面に表示されている [API KEY] の8桁のコードは後で使用します

7.UI Flowを開く

UI Flowのリンク

右上のボタンから[設定]を開く
image.png

[Api key]にデバイスに表示されている8桁のコードを入力する。
[Device]は、M5StickCを選択する。
image.png

画面上のデバイスもM5StickCになっていることを確認する。
image.png

左下のメニューで、デバイスが正常に接続されていれば、[接続済み]と表示されます。
image.png

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

8.UI Flowでプログラムを書き込む

上記の手順で、[接続済み]となっていることを前提とします。
右上のメニューから[RUN]をクリックして書き込みます。
image.png

以下のようにメッセージが表示されると、実行が完了しています。
image.png

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

9.もう一度プログラムを書き込む場合

M5StickCの本体で、[M5]を書かれたボタンのサイドにもボタンがあるので、これを1回押します
image.png

再び、[API KEY]が表視されている画面に戻ることを確認します。
これで、もう一度プログラムを実行できる状態に戻りました。
image.png

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

10.簡単なプログラム

ブロックを並べて、次のようなプログラムを作成します。
1秒ごとにM5StickCの画面の色が変化します。
実際に、[RUN]をクリックして、M5StickCの画面の色が実際に変化することを確認してください。
image.png

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

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

次の手順

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

おまけ

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

9
4
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
9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?