はつねの日記

Kinect, Windows 10 UWP, Windows Azure, IoT, 電子工作

M5Stack Core 2で始めるAzure IoT Hub入門(その4)

前回
hatsune.hatenablog.jp

第4回の今回は、M5Stack Core 2で収集した「気圧」「気温」「湿度」をAzure側もおくるために、まずはAzure側で準備することを紹介します。

Azure IoT Hub について

M5Stack Core 2などのIoTデバイスからのデータ収集を行うとき、次のような仕組みが必要です。

  1. 通信をセキュリティで保護
  2. スケーリング
  3. 正常性を監視
  4. 可用性

具体的な実現方法については、今回は触れませんが、これらの仕組みを考慮しながらクラウド上に独自の収集ロジック用サービスを構築するには、高度な知識が必要になってきます。
オンプレミスなシステムであれば独自の通信路の維持管理なども含めてかなりの規模の開発や運用管理が必要となったでしょう。
しかし、これらの仕組みが含まれたAzure IoT Hubを使うことで、ゼロから設計および構築をしなくても一気に用意することができます。また、運用自体の負荷も利用しているAzure全体の運用の中に組み込むことで、運用負荷が著しく増加するということもありません。


IoT Hubの使用プロトコルについて

Azure IoT Hubは、MQTT (Message Queueing Telemetry Transport)、Http、AMQP (Advanced Message Queuing Protocol)など様々なプロトコルに対応しています。
今回のサンプルでは、「小さい」「大量」のデータを「低遅延」で「双方向」に通信できるMQTTを使います。

Azure IoT Hubを準備するには

Azure IoT Hubを使用するためには、まずは、Azure IoT Hub自体を作成して、そこに接続するデバイスを定義していきます。

Azure IoT Hubを作成する

Azure IoT Hubの作成は、Azure管理ポータルでリソースを作成するだけで簡単にできます。
Azure管理ポータルにサインインしたら、[リソースの作成]で「IoT Hub」を検索し、[作成]をクリックしてリソースを追加します。

プランで無料を選択する

Azure IoT Hubの料金プラン (課金額) は、作成時や作成後に指定できます。無料プランは、IoT Hubでは「F1:Freeレベル」という表記になります。

スケーリングが1だったり、「Defender for IoT」も有効にできなかったりといくつかの制限はありますが、無料プランでも基本的な機能は備えていますので、動作確認や数台を接続して試験するような場合に便利です。

Azure IoT Hubにデバイスを定義する

IoT Hubが作成できたら、その中に「IoTデバイス」を定義します。

[IoTデバイスの追加]をクリックして、「デバイスID」「認証の種類」を選んで、[自動生成キー]にチェックを入れて追加をすれば、IoTデバイスからIoT Hubに接続するための接続文字列が生成されます。

次回は

Azure側の準備が整ったので、次回は、M5Stack Core 5からAzure IoT Hubに「気圧」「気温」「湿度」を送信するためのプログラム(スケッチ)を紹介します。
hatsune.hatenablog.jp

ということで、.NETラボ勉強会2021年8月に登壇してきました。
speakerdeck.com

さらに詳しくAzure IoT Hubを学ぶには

Azure IoT Hubを学ぶ一番の近道は実際に使ってみることです。1日8000メッセージ(IoTデバイス1台だけ接続するならデータ送信間隔は約12秒)という上限はありますが、IoT Hubには無料プランもあるので課金を気にせず試せます。
また、もっと系統的に学びたいということであれば、Microsoft Learnもお勧めします。
docs.microsoft.com
docs.microsoft.com
docs.microsoft.com

資格を取得する

docs.microsoft.com
docs.microsoft.com

iOSアプリでMulticast Networkingを許可する方法

iOS14以降 & XCode 12以降では、ローカルネットワークへの通信にユーザの許可が必要になりました。
そして、マルチキャスト/ブロードキャストで他の機器と通信をするためには、Appleへの申請やentitlementsへの追記など色々必要になっています。

ローカルネットワーク通信の許可

Info.plistに対して、「Privacy - Local Network Usage Description」を追加してローカルネットワーク上の別デバイスとの通信を行うときに許可ダイアログが表示されるようにします。
ただし、Xamarinの場合、2021/07/19現在の最新版では「Privacy - Local Network Usage Description」が選択肢の中にでてきません。
f:id:hatsune_a:20210719200453p:plain
そこで、直接Info.plistファイルを編集して「NSLocalNetworkUsageDescription」を追加します。
f:id:hatsune_a:20210719200741p:plain

マルチキャスト/ブロードキャストで他の機器と通信を許可

Multicast Networking Entitlement申請

Bonjourでサービスを検索するときには不要ですが、それ以外でマルチキャストやブロードキャストをするときには、Appleに「Multicast Networking Entitlement申請」を行う必要があります。
申請方法は下記のURLに開発者アカウントでサインインして申請します。申請してから3~5営業日くらいで「Multicast Networking Entitlement」を取得できます。
https://developer.apple.com/contact/request/networking-multicast
申請時の注意するのは、「Explain why your app needs to send multicast or broadcast traffic, or browse for all Bonjour service types.」という項目の内容です。ここには、次のような内容が含まれていないと、追加情報を要求されて余計に日数がかかります。

  • Multicastなのかbroadcastなのか
  • なんの目的で通信するのか
  • 通信するIPアドレスやポート番号
  • 通信するデータ(例えば、JSON形式で端末で計測したデータなど)
Capabilitiesの追加

「Multicast Networking Entitlement」が取得できたとの連絡メールがAppleからくると、Apple Developer Programのサイトの「Identifiers」にて、Multicast NetworkingのCapabilitiesをEnableにできます。
f:id:hatsune_a:20210719203739p:plain
Enableにチェックをつけて[Save]をクリックすると確認ダイアログが出るので[Confirm]をクリックします。
f:id:hatsune_a:20210719203837p:plain

プロビジョニングプロファイルの再作成

Capabilitiesの追加確認のダイアログには「機能を追加または削除すると、このアプリIDを含むプロビジョニングプロファイルが無効になり、今後使用するためには再生成する必要があります。」と記載があるのでプロビジョニングプロファイルの再作成が必要です。
f:id:hatsune_a:20210719204227p:plain

Entitlements.plsitでエンタイトルメントを有効にする

f:id:hatsune_a:20210719205003p:plain
アプリの.entitlementsファイルに、ブール値が true のcom.apple.developer.networking.multicastエントリを追加します。

実機に転送して動作を確認する

Multicast Networkingを許可する設定がない場合でも実機でなければ影響をうけません。
実機でデバッグ実行をしてマルチキャスト通信でエラーにならないことを確認できれば、設定は終了です。

iOSアプリ作成に必要な証明書についてまとめてみた

.NET 6やMAUIなど、今年、MicrosoftがGA(一般公開)する技術では、マルチプラットフォームのXamarin.Formsよりも更に促進されることが期待されるものが多いと感じています。

そこで、じゃあC#を使ってAndroidiOSのアプリを作成しようと思ったときに、意外にネックになるのが、iOSアプリを作成するときに必要な証明書の作成です。
しかも本番用証明書の期限は1年なので、私だけなのかもしれませんが、毎年どうやったのか思い出しながら不安になりつつ作業しています。
そこで、心理的安全が欲しいということもあり、ちょっとこの辺りを自分の言葉でまとめておきたいと思います。
この分野は専門外なので、何かおかしな記述があればご指摘いただき、随時、本文に反映させていくという若干他力本願な内容となりますが、最後までお付き合いいただければ幸いです。

登場人物

  • Apple Developer Program
  • MacOS上で作成する証明書(便宜上、アカウント証明書とします)
  • Apple Development 証明書(または、iOS App Development証明書)
  • Apple Distribution 証明書(または、iOS Distribution証明書)

証明書を発行しよう

Apple Developer Programの登録/更新

iOSアプリを開発してストアで公開してとなると、Apple Developer Programに加入する必要があります。
アプリ作成するだけなら加入必須ではないという話もあるようですが、そこについては今回は触れません。
developer.apple.com
Apple Developer Programの年間メンバーシップの料金は11,800円です。iOSなどのベータ版も入手できたり、様々な情報も得られますから、実際にストアに登録する作業を別部署でやり開発する人が直接できないようなジャパニーズトラディショナルカンパニーさんだったとしても、開発している部署でも(会社のお金で)登録しておくとよいと思います。

アカウントについて

ここで重要なのは、登録するときに記入するメールアドレスです。これが、今後の様々なところで「アカウント」として一意に識別されるための情報となります。

Team IDについて

メンバーシップに登録されるとTeam IDというものが払い出されます。このIDも重要で、要はアプリの発行元IDのようなものになります。
後々作成する証明書について、どの証明書かわからなくなったらこのTeam IDを他よりに判断することになります。

年間メンバーシップの更新について

なお、年間なので1年後にはメンバーシップの更新が必要になります。近づいてくるとメールで「そろそろ期限がきれますよ」とお知らせが飛んでくる新設設計なので、メール無視せずに期限切れになるまえにちゃんと更新しておくようにしましょう。
忘れない!絶対!

アカウント証明書の作成

Apple Developer Programの登録がおわったら、Macでの作業となります。

認証局に証明書を要求

f:id:hatsune_a:20210616190711p:plain
[キーチェーンアクセス]-[証明書アシスタント]-[認証局に証明書を要求]メニューをクリックします。

f:id:hatsune_a:20210616191257p:plain

  • [ユーザーのメールアドレス]欄には、メンバーシップのアカウントに指定したメールアドレスを指定
  • [通称]欄には任意の名前を指定
  • [ディスクに保存]を選択
  • [鍵ペア情報を指定]チェックにチェック

[続ける]ボタンをクリックしてから、次のように設定されていることを確認します。

デスクトップを指定して[保存]ボタンをクリックすれば、これで、Apple Developer Programのアカウントに紐付いたアカウント証明書が作成できました。
この証明書の有効期限も、作成してから1年間となります。また、作成するときには有効な年間メンバーシップの契約が必要です。
そのため、年間メンバーシップを更新したら、アカウント証明書も再作成しておくとよいでしょう。

Apple Development 証明書の発行

アカウント証明書が作成できたならば、Apple Developer Programのサイトにいって作業します。
事前に登録したアカウントでサインイン
「Certificate, Identifiers & Profiles」のページに移動します。
f:id:hatsune_a:20210616085707p:plain

新しいApple Development 証明書の発行

Certificatesの後ろの[+]を押して、新しい証明書を発行します。
f:id:hatsune_a:20210616091338p:plain
開発用のApple Development証明書ならば、「Apple Development」を指定します。

Apple DevelopmentとiOS App Developmentの違い

XCode 11以降はApple Developmentを指定します。
それより以前のものはiOS App Developmentを指定しますが、古いXCodeを積極的に使う理由はないので、実質「Apple Development」一択です。

Maximum number of certificates generated について

「Maximum number of certificates generated」とでているのは、すでに発行しているApple Development 証明書に紐付いている「Provisioning Profile (Development)」で有効期限切れのものがあるからです。

アカウント証明書をアップロードする

f:id:hatsune_a:20210616093534p:plain
Macで作成したアカウント証明書を選択します。
これでApple Development 証明書が作成できました。
Certificatesの一覧には、Apple Developer Programのアカウント名=メンバーシップの「Account Holder」が証明書名として表示されます。

Apple Development 証明書をMacにダウンロードする

Apple Development 証明書が作成できたので、Macにダウンロードしておきましょう。

Apple Distribution 証明書の発行

アカウント証明書が作成できたならば、Apple Developer Programのサイトにいって作業します。
事前に登録したアカウントでサインイン
「Certificate, Identifiers & Profiles」のページに移動します。
f:id:hatsune_a:20210616085707p:plain

新しいApple Distribution証明書の発行

Certificatesの後ろの[+]を押して、新しい証明書を発行します。
f:id:hatsune_a:20210616094512p:plain
発行用の証明書が必要なので、「Apple Distribution」を指定します。

Apple DistributionとiOS Distributionの違い

XCode 11以降はApple Distributionを指定します。
それより以前のものはiOS Distributionを指定しますが、古いXCodeを積極的に使う理由はないので、実質「Apple Distribution」一択です。

Apple Distribution証明書の発行上限数について

Apple Distribution証明書は、合計で3つ作成できます。
Apple Distribution証明書は、基本的にアプリごとに作成するのではなく、発行者ごと、つまり、Apple Developer Programのメンバーシップごとに1つ作るような運用イメージになります。

アカウント証明書をアップロードする

f:id:hatsune_a:20210616093534p:plain
Macで作成したアカウント証明書を選択します。
これでApple Distribution 証明書が作成できました。
Certificatesの一覧には、メンバーシップの「Team Name」が証明書名として表示されます。

Apple Distribution証明書をMacにダウンロードする

Apple Distribution証明書が作成できたので、Macにダウンロードしておきましょう。

キーチューンに登録する

Apple Develoment証明書と、Apple Distribution 証明書がダウンロードできたら、キーチューンに登録しておきましょう。
登録は簡単で、証明書をダブルクリックすればキーチューンが立ち上がって追加されます。
f:id:hatsune_a:20210616221344p:plain
これで新しい有効期限の証明書がキーチューンアクセスのログイン証明書に登録することができました。
証明書の中の秘密鍵の名前は、アカウント証明書を作成するときに認証局に証明書を要求した時の通称が設定されています。
有効期限の更新で証明書を作成した場合は、この時点で古い有効期限の証明書は削除しておきましょう。

最後に

来年の年間メンバーシップの更新時に新しい証明書を作成するときや、開発機を変更するときなども、きっと、このエントリ見ながらやると思います。忘備録大切!

M5Stack Core 2で始めるAzure IoT Hub入門(その3)

前回
hatsune.hatenablog.jp

第3回目の今回は、M5Coreでのプログラミングの基礎と、PORT.A.I2Cでの入出力について調べていきたいと思います。
第1回ではArduino IDEでスケッチを作成した後に、Visual Studio Codeでそのスケッチを取り扱えるようにVisual Studio Codeの環境を整えました。
今回は、第1回で環境整備の基本はおわっているので、Visual Studio Codeで新規にスケッチを作成する方法を確認していきます。

Visual Studio Codeでの新規プログラミング

Visual Studio Codeの[ファイル]-[フォルダを開く]で新しいスケッチを入れるためのフォルダを作成してから開きます。
これは、Arduino IDEが、例えば「hoge.ino」というスケッチを扱うには、必ず「hoge」フォルダの下に「hoge.ino」を期待しているからです。
あとからArduino IDEでスケッチを開きたいということがあったときもスムーズにVisual Studio CodeArduino IDEの行き来ができるように、Arduino IDEのお作法に沿ってフォルダを作成しておきましょう。
今回は「Env2Unit」というフォルダにしましょう。
フォルダを作成した直後のVisual Studio Codeのエキスプローラー表示をみてみましょう。
f:id:hatsune_a:20210607205749p:plain

シリアルポートの設定

その1でArduino拡張 (およびc++拡張) はインストール済ですので、M5CoreをUSBで接続してから、Ctrl+Shift+Pで「Arduino: Select Serial Port」で、シリアルポートを選択します。
こうすることで「Env2Unit」フォルダの中に「.vscode」フォルダが作成されて、「Env2Unit」フォルダを開いた設定として、指定したポート番号が適用されるようになります。
f:id:hatsune_a:20210607210343p:plain

ボードを選択

Ctrl+Shift+Pで「Arduino: Board Config」を選択して、ボードを選択します。
f:id:hatsune_a:20210607211437p:plain

スケッチファイルを作成

新規ファイル追加で「Env2Unit.ino」ファイルを作成します。
f:id:hatsune_a:20210607211106p:plain

Arduino.jsonにスケッチファイル名を指定する

f:id:hatsune_a:20210607212343p:plain
"sketch": "Env2Unit.ino"
を追加すると自動的にスケッチの解析が行われて、「c_cpp_properties.json」ファイルが作成されます。

M5Stack用のインテリセンスが効くように設定

c_cpp_properties.jsonを開いて、includePathにArduino IDEで指定したスケッチブックの保存場所の中のライブラリを指定します。

例:"C:\Users\hatsune\Documents\Arduino\libraries\\**",

前の行の最後に , を入れるのも忘れないようにしましょう。

準備が整ったかを確認

簡単なスケッチを記述して、M5Coreにデプロイして動作することを確認します。
gist.github.com

ENV.II SENSORで気圧を測定

BMP280用ライブラリを追加

ENV.II SENSORは、SHT30とBMP280が内蔵されています。
BMP280は気圧センサーなので、気圧の表示部分を作成してみます。
Ctrk+Shift+Pで「Arduino Library Manager」を起動して必要なライブラリが提供されているかを確認します。
f:id:hatsune_a:20210607222821p:plain
サクッとインストールします。

スケッチ解析エラーを解決する

BMP280用ライブラリを使うために

#include <Adafruit_BMP280.h>

をスケッチに追加して解析すると"Adafruit_Sensor.h"がないというエラーが表示されます。
前年ながらArudino Library Managerでは追加できないので公式GitHubから落としてきます。
https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ENVII/Arduino/ENVII
ファイルの保存先は、ライブラリフォルダの中の[Adafruit_BMP280_Library]フォルダです。

例:"C:\Users\hatsune\Documents\Arduino\libraries\\Adafruit_BMP280_Library",

ENV.IIで測定した気圧を表示

gist.github.com

  1. 動作に必要な4つのライブラリをincludeします。
  2. Wire.Begin() でPORT.A.I2C を初期化します。
  3. while (!Bmp.begin(0x76)) でアドレス0x76を指定して接続します。
  4. loop関数の中では、Bmp.readPressure()によって気圧を取得します。
  5. M5.Lcd.setCursor(0, 0); で液晶画面先頭にカーソルを移動します。
  6. M5.Lcd.printfで情報を表示します。
  7. 0.1秒ごとに更新します。

f:id:hatsune_a:20210607233127p:plain

ENV.II SENSORで気温と湿度を測定

BMP280用ライブラリを追加

"Adafruit_Sensor.h"と同様に公式GitHubから”SHT3X.h”と”SHT3X.cpp"を"Adafruit_Sensor.h"と同じ場所にダウンロードします。

ENV.IIで測定した室温と湿度を表示

SHT3Xに関する処理を追加してスケッチを完成させます。
gist.github.com

  1. loop関数の中では、Sht30.get()によって温度 (cTemp) と湿度 (humidity) を取得します。

f:id:hatsune_a:20210608002833p:plain

室温が30度近かったんですね。暑いはずです。

ライブラリは必要?

今回はM5Stack用モジュールとして販売されているものだったので公式サイトからライブラリを入手できました。
もし、自分で作成した回路をつなげるような場合であれば、利用ている回路のデータシートなどからI2Cでのデータフォーマットを把握して、その部分を作成してあげることで、ライブラリを使わなくても同じようなことが可能です。

次回はAzure側の準備についてふれてみたいと思います。
hatsune.hatenablog.jp

M5Stack Core 2で始めるAzure IoT Hub入門(その2)

前回
hatsune.hatenablog.jp

2回目の今回は、M5Stackへの外部接続について、少しまとめておきたいと思います。
M5Stackの本体であるCoreモジュールには、外部機器との接続用インターフェースとして次の3つが用意されています。

  • USB
  • PORT.A.I2C
  • M-Bus

ピン配置などは、M5Stack Core 2の場合は本体裏面にプリントされています。
f:id:hatsune_a:20210605124344p:plain

USB

USB-Cが給電+シリアル接続用に用意されています。シリアル接続はCP2104を使って実現しており、ESP32でいえばTXD3とRXD3になります。
USB接続した端末で開発環境が稼働していれば、このルートを使ってシリアル入出力を実現しています。
また、AXP192という電源管理のチップセットがあり、内部電源か外部電源かやバッテリー電圧なども取得できます。FactoryTestスケッチなどはこのあたりを使っていると思います(FactoryTestスケッチについては後日取り上げる予定です)。

PORT.A.I2C

PORT.A.I2Cは、Inter-Integrated Circuitの略であり、アイ・スクエア・シーまたはアイ・ツー・シーと呼ばれるシリアルバス規格です。
I2C対応機器にはどのようなものがあって、どうやって繋ぐかなどは2015年の記事となりますが、buildinsiderで記事を書かせていただいていますので、そちらをご覧いただくとよいと思います。
www.buildinsider.net
Netduinoも電源5Vラインですのでピン配置に気を付ければ接続先の回路などはそのまま流用できます。

IC2のピン配置を確認する

記事中では、I2Cは「SCL」「SDA」「VDD」「GND」のピンがあるとしています。
M5Stack Core 2をみると、PORT.A.I2Cのピン配置は、液晶面を上にした状態で左から「G33」「G32」「5V」「GND」となっています。
このM-Basピン配列ではG33=PA_SCL、G32=PA_SDAとありますので、PORT.A.I2Cのピン配置は「SCL」「SDA]「5V」「GND」となります。
実際に端子を指すところにもSCLにはクロック信号っぽいマーク、SDAにはON/OFFの2値っぽいマークがついてます。
さらにダメ押しの確認としてPORT.A.I2Cに接続できる「温度湿度環境センサ付きユニット」の接続ピン配置を確認してみましょう。
f:id:hatsune_a:20210605124751p:plain
こちらはしっかりと「SCL」「SDA」「5V」「GND」って表記になっています。どうやらPORT.A.I2Cのピン配置は「SCL」「SDA]「5V」「GND」で間違いなさそうです。

PORT.A.I2CとGROVE互換インターフェース

M5StackのPORT.A.I2CはGROVE互換インターフェースとも呼ばれています。
GROVEは、Arduinoと容易に接続するためのインターフェースで、Seeed社から様々なGROVEシリーズのモジュール(拡張機器)が提供されています。
仕様が公開されていますので、Seeed社以外からも様々なモジュールが販売されています。
www.switch-science.com
GROVEと互換があるということはM5Coreでも、GROVEモジュールをつなげて使えるということになります。

M-Bus

M-Busは、ESP32 (Coreの中心となるSoC) の次のピンを取り出しているインターフェースです。

  • G0:I2S LRCK PDM CLK
  • G1:TXD0
  • G2:I2S DOUT
  • G3:RXD0
  • G13:RXD2
  • G14:TXD2
  • G18:SCK
  • G19:GPIO
  • G21:intSDA
  • G22:intSCL
  • G23:MOSI
  • G25:DAC
  • G26:DAC
  • G27:GPIO
  • G32:PA_SDA (PORT.A.I2Cと同じ)
  • G33:PA_SCL (PORT.A.I2Cと同じ)
  • G34:PDM DAT
  • G35:ADC
  • G36:ADC
  • G38:MISO
  • GND
  • 3.3V
  • 5V
  • RST
  • BAT

M-Busを使うことでESP32の(すべてではないですが)ピンに接続できますので、PORT.A.I2C端子よりもつながるものがかなり多くなります。また、ピン配置もM5Stackの「モジュール」と呼ばれるものであれば筐体の大きさも含めて、M5Coreとぴったり重ね合わせできるので、取り扱いも楽になります。
「モジュール」には、例えば、GPSモジュールなどはI2CではなくGPIOで接続するためM-Bus接続のモジュールとして提供されています。
www.switch-science.com

M-BusにPORT.A.I2Cと同じものがあるということは

GROVE互換インターフェースをもったものであれば、Busモジュールの中に入れてしまってM5Coreの下に重ね合わせてしまうなんていうこともできます。
www.switch-science.com

M-BusにGPIOがあるということは

M-BusにGPIOがあるということは、GPIOがつながる色々な機器ともつながるということですね。
みんな大好きMESHにもGPIOがありますから、MESHでの操作をGPIOでBusモジュール+M5Coreで収集して、Wi-Fiに飛ばしてAzureでなんということも可能です。
MESHとGPIOについての詳細は、BuildInsiderに記事を掲載いただいてますので、見ていただけると嬉しいです。
www.buildinsider.net

おまけ:温度湿度環境センサについて

www.switch-science.com
このセンサですが、温湿度センサーとしてSHT-30、気圧センサーとしてBMP280が内蔵されています。
BMP280単体のGROVEモジュールもあるので気圧センサーだけだったらそれを使う手もあります。
www.switch-science.com
GROVEモジュールであれば、GROVE互換インターフェースであるPORT.A.I2Cともつながります。
でも、M5Stack用のユニットなら外装あるので、ユニットの方が扱いが楽かもしれないですね。

それでは、また、次回まで!
次回はいよいよM5Stackのプログラミング(スケッチ)に取り掛かります。
その3→
M5Stack Core 2で始めるAzure IoT Hub入門(その3) - はつねの日記

M5Stack Core 2で始めるAzure IoT Hub入門(その1)

AzureとIoTとHoloLensはすごく相性がいいです。
build 2021でもかなり力を入れてAzure Digital Twinsとも絡めて多くの説明がありました。
このブログでも過去にArudinoやESP32、Netduino、Rasberry PIなどについて書いたエントリもあったりします。
今回は、みんな大好きM5Stackを使ってやってみたいと思います。
まず、第1回目の今回は、M5Stackのアプリをデプロイするところまでやってみましょう。

M5Stackとは

M5Stackは、ESP32というbluetoothWi-Fiを内蔵するSoCを使って、それに320x240のTFTカラー液晶、microSDカードスロット、スピーカーを組み合わせたコンパクトで便利な開発モジュールになります。
f:id:hatsune_a:20210604195926p:plain
ESP32はArudino環境で開発ができるのでM5Stackで動作するアプリもArduino環境で開発ができます。
M5Stackには様々な拡張モジュールがあり、M5Stack Coreと呼ばれるM5Stack本体に拡張モジュールを積み重ねていくことでいろいろな機能が拡張ができます。

M5Stack Core 2とは

今回使うM5Stack Core 2は、M5StackのCore機能を改良した第二世代のCoreデバイスとなります。
www.switch-science.com
M5Stack Core 2本体にはUSB Type-Cが用意されていて、こことPCのUSB Type-Aを接続するUSBケーブルも同封されています。
ただし、SDカードは付属していないので、忘れずに一緒に購入しておくとよいでしょう。

M5Stack Core 2の電源を入れる

PCとUSBケーブルを接続して電源ボタンをクリックするとすぐに立ち上がります。
f:id:hatsune_a:20210604201416j:plain
FactoryTestというスケッチ(アプリコード)が実行されてるのですが、色合いや表示されている表示なんかが、みんな大好きエヴァ風だったりします。
USBケーブルを抜くと「外部」から「内部」にちゃんと主要電源表示が切り替わります。すばらしい。

M5Stackの開発環境を整える

Arduio IDEで開発してもいいのですが、今回の目標は、Visual Studio CodeでM5Stack開発環境を整えて、簡単なコードをデプロイして動かすところまでを目標にします。
参考にするMicrosoft Docsはこちらになります。
docs.microsoft.com

開発環境のゴール

gist.github.com
M5Stackの画面にHelloWorldと表示します。

Arduino IDEをインストールする

https://www.arduino.cc/en/software
Visual Studio CodeからArduino IDEの動作環境を呼び出すため、Windows Appsではなく、Windows Win 7 and newerのリンクからexeファイルをダウンロードしてインストールします。
インストールオプションは変えずにそのままインストールしましょう。
f:id:hatsune_a:20210604203451p:plain

M5Stack Core 2との接続を確認する

M5Stack Core 2をPCにUSB接続したら、デバイスマネージャーでシリアル接続先として認識されているかを確認します。
f:id:hatsune_a:20210604205425p:plain
[ポート (COMとLPT) ]の中に「CP210x」があるかを探して、COMの番号を調べておきます。上手ではCOM4です。

Arduino IDEの設定を行う

Arduino IDEを起動したら、[ファイル]-[環境設定]メニューをクリックします。
f:id:hatsune_a:20210604205743p:plain
[追加のボードマネジャーのURL]に下記を設定します。
https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json

[ツール]-[ボード]-[ボードマネージャー]メニューを選択します。
f:id:hatsune_a:20210604210051p:plain

ボードマネージャーで「m5stack」と入力して、M5Stackの公式ボードが検索されたらそれをインストールします。
f:id:hatsune_a:20210604210252p:plain

M5Stack Core2ライブラリのインストールを行う

[スケッチ]-[ライブラリをインクルード]-[ライブラリを管理]メニューをクリックします。
f:id:hatsune_a:20210604210649p:plain

ライブラリマネージャーで「m5core2」と入力して、M5Stack公式のライブラリをインストールします。
f:id:hatsune_a:20210604210841p:plain

ボードを選択する

[ツール]-[ボード]-[M5Stack Arudino]-[M5Stack-Core2]を選択します。
f:id:hatsune_a:20210604211022p:plain

シリアルポートを選択する

[ツール]-[シリアルポート]メニューで、デバイスマネージャーで確認したCOM番号のものを指定します。f:id:hatsune_a:20210604211146p:plain

Ardino IDEのシリアルモニタを開く

Arduino IDEで[ツール]-[シリアルモニタ]メニューをクリックしてシリアルモニタを開きます。
ボーレートには115200bpsをを指定しておきます。

スケッチ(プログラム)をデプロイする

[スケッチ]-[マイコンボードに書き込み]メニューをクリックするとしばらく時間がかかりますが、「Hard resetting via RTS pin...」と表示されて、M5Stack Core 2の画面がFactoryTestから変わってスケッチで記述した表示に変わります。

Ardino IDEのシリアルモニタで確認する

スケッチが起動すると、次のような表示が出力されます。
f:id:hatsune_a:20210606155126p:plain

Visual Studio Codeをインストールする

もう大抵の開発機にはインストールされているとは思いますが、Visual Studio Codeで今回は開発するのでVisual Studio Codeもインストールしておきます。

Visual Studio CodeArduino拡張をインストールする

サイドメニューアイコンの[拡張機能]を選択して、「Arduino」で検索して拡張機能をインストールします。
f:id:hatsune_a:20210604214216p:plain

Arduino用の設定を行う

拡張機能Arduinoから「Arduino: Path」の設定にパスを設定します。
f:id:hatsune_a:20210604232818p:plain

IntelliSenseの設定を行う

拡張機能C/C++から「C_Cpp: Intelli Sense Engine」の設定を「Tag Parser」にします。
f:id:hatsune_a:20210604232445p:plain

フォルダを開く

[ファイル]-[フォルダを開く]メニューでコードを置く場所を開きます。

シリアルポートの設定

VSCodeでCtrl+Shift+Pで「Arduino: Select Serial Port」で、先ほど調べた「COM4」を指定します。
f:id:hatsune_a:20210604235204p:plain
これで、フォルダの中に[.vscode]-[arduino.json]ファイルが作成されます。

ボードを選択する

Ctrl+Shift+Pで「Arduino: Board Config」を選択して、ボードを選択します。
f:id:hatsune_a:20210605002930p:plain
これで、フォルダの中に[.vscode]-[c_cpp_properties.json]ファイルが作成されます。

M5Stack用のインテリセンスが効くように設定する

c_cpp_properties.jsonを開いて、includePathにArduino IDEで指定したスケッチブックの保存場所の中のライブラリを指定します。

例:"C:\Users\hatsune\Documents\Arduino\libraries\\**",

前の行の最後に , を入れるのも忘れないようにしましょう。

シリアルモニターとの通信ボーレートを指定する

Ctrl+Shift+Pで「Arduino: Change Baud Rate」を選択して、115200を選択します。
f:id:hatsune_a:20210606162306p:plain

コードを書く

HelloWorld.inoをフォルダの中に作成します。

スケッチ(プログラム)をビルドする

Ctrl+Alt+RまたはVSCodeの右上のVerifyアイコンをクリックしてコンパイルします。
ベリファイが終わると次の表示がでます。

[Done] Finished verify sketch - helloworld.ino

スケッチ(プログラム)をデプロイする

Ctrl+Alt+UまたはVSCodeの右上のUploadアイコンをクリックしてコンパイルします。

[Done] Uploaded the sketch: helloworld.ino

シリアルモニタに接続する

スケッチが起動したことを確認したら、Visual Studio Codeの画面最下部のコンセントマークをクリックしてシリアルモニターをオープンします。
f:id:hatsune_a:20210606182414p:plain
シリアルモニタには、次のような表示が出力されます。
f:id:hatsune_a:20210606185316p:plain
なお、シリアルモニタをオープンしたまま、スケッチをデプロイしようとすると「スケッチの書き込み中にエラーが発生しました」となりますので注意してください、


ここまで順調にできたならば、開発環境の準備は終わりです。
次回をお楽しみに!
その2→
M5Stack Core 2で始めるAzure IoT Hub入門(その2) - はつねの日記

Azure Digital Twinsを学ぶために最適なLearn

Microsoft Build 2021に参加していて、Azure Digital Twinsについて、もう一度ちゃんと把握したくなったのでdocsで資料読むだけじゃなくてMicrosoft Learnでも学んでみようと思い立ったので、該当するLearnのURLをあつめてみました。
docs.microsoft.com
docs.microsoft.com
docs.microsoft.com
docs.microsoft.com
docs.microsoft.com
このあたりを一通り進めてみようと思います。