M5Stack Core2 PR

M5Stack Core2 の使い方 ~ UIFlow セットアップ編 ~

記事内に商品プロモーションを含む場合があります

はじめに

人気のIoTモジュールM5Stack Core2を「UIFlow」から使う方法を解説します。

公式サイトの解説にそって、ドライバのインストールからセットアップまで、公式でわかりづらい部分を補いながら、詳しく説明します。

初心者・入門者の方でもわかりやすいように、画像を使って細かく解説していますので、UIFlowを使う際に参考にしてみてください。

※ クリックすると各項目へジャンプできます

M5Stack Core2

M5Stackは、2017年に発売されたマイコン(IoT)モジュールです。5cm×5cmのケースの中に、マイコン・ディスプレイ・ボタン・スピーカー・バッテリー・センサなど、「これさえあれば大体OK」な機能をすべて搭載Wifi・Bluetoothも使えます。

「UI Frow」というグラフィカルな開発環境も使えるので、今どきの電子工作やIoTにピッタリなデバイスです。

M5Stackのベーシックなモデルとして「M5 Stack Basic」が発売されていますが、現在ではタッチパネル搭載など、より洗練された「M5Stack Core2」が発売されています。本記事でも 「M5Stack Core2」についてを紹介します。

こんな方におすすめ
  • 電子工作・IoT機器を作ってみたい・勉強したい
  • プログラミングの勉強をしたい。
  • 職場・学校で、プロトタイプを作りたい。

環境

この記事は以下の環境で作成しています。

環境 バージョン
モジュール  M5Stack Core2
開発用PCのOS Windows10
UIFlow Ver.1.9.0

【結論】セットアップ完了でプログラミング開始

後述する手順を行うと、UIFlowで「M5Stack Core2」をプログラミングできるようになります。

UIFlowは「MicroPython」「Blockly」の二つの言語に対応しているため、1度のセットアップで、2つの言語が使えるようになります。

UIFlow(MicroPython)の画面イメージの紹介

M5Stack Core2のセットアップ手順

準備物

基本的に「パソコン」と「M5Stack Core2 」だけあればOKです。

WiFiの設定があるので、事前にSSIDとパスワードを確認しておくとスムーズです。

  • パソコン(Windows10)
  • M5Stack Core2
  • 同梱のUSBケーブル ( Type-A — Type-C )
  • 使用するWiFiのSSIDとパスワード

セットアップの流れ

以下の流れでセットアップを進めます。

  1. ドライバのインストール
  2. M5Burnerでのファームウェアの書き込み
  3. APIキーなどの設定(configuration)
  4. UI Flowの設定

① ドライバのインストール

メーカーサイトのページにアクセスして、以下で示した場所からWindows用のドライバをダウンロードします。

※PCに搭載されているUSBチップの種類によってドライバが分かれるようです。インストールやセットアップ中にエラーが発生する場合は、「CH9102_VCP_SER_Windows」のドライバもインストールしてみてください。(種類がわからない場合は、両方入れてしまってもOKです)

ダウンロードした圧縮ファイルを解凍すると、以下のファイルが表示されます。「CP210xVCPInstaller_x64_v6.7.0.0.exe」をダブルクリックします。

ドライバのインストーラーのファイルを説明する画像

ドライバのインストール画面が表示されるので、「次へ」を押していきます。使用許諾が表示されるので(内容に問題がない場合は)「同意します」にチェックをいれて、次へをクリックします。

ドライバのインストーラーの解説1

以下の画面が表示されれば、ドライバのインストールは完了です。「完了」を押してインストーラを終了します。

ドライバのインストーラーの解説2

② M5Burnerでのファームウェアの書き込み

ドライバと同じページにアクセスして、以下の場所からファームウェアの書き込みツール『M5Burner』をダウンロードします。

M5Burnerのダウンロード先の説明

ダウンロードした圧縮フォルダを解凍すると、以下のファイルが表示されます。「M5Burner.exe」をダブルクリックしてM5Burnerを起動します。

M5Burnerの実行ファイルの説明

M5Burnerを起動時に以下の画面が表示された場合は「この機能をダウンロードしてインストールする」をクリックします。

インストール画面が消えたら完了です。(表示されない場合は次の手順へ進んでOKです)。

実行時に要求される.netのインストール方法説明

※ 上記画面が表示された場合は、インストールが完了してもM5Burnerが起動しないので、もう一度 「M5Burner.exe」をダブルクリックしてください。

M5Burnerが起動すると、以下の画面が表示されるので、「UIFLOW(CORE2)」の「Download」ボタンをクリックします。

M5Burnerの説明 ダウンロード

ダウンロードが完了すると、「Burn」「Configuration」ボタンが表示されます。

M5Stack Core2をUSBケーブルでPCに接続してから「COM」を選択します。ドロップダウンリストに「COM3」などと表示されるので、表示されたCOMを選択します。

選択後「Burn」ボタンを押します。

M5Burnerの説明 ポート設定

「COMが複数表示されて、どれを使えばいいか分からない」という方は、M5Stack Core2以外のUSB機器(マウス・キーボードは除く)を、PCから抜いて、再度選択を試してみてください。

「Burn」ボタンを押すと、以下の画面が表示されます。使用するWiFiのSSIDと、パスワードを入力して「Start」ボタンを押します。

M5Burnerの説明 Wifi設定

以下の画面が表示されてファームウェアの書き込みが始まります。

「Burn Successfully」が表示されたら、ファームウェアの書き込みは完了です。「Close」ボタンを押します。(100%が表示されてからSuccessfullyが表示されるまで少し時間がかかります)。

M5Burnerの完了の確認方法の説明

書き込みが完了すると、M5 Stack Core2が自動で再起動されて、以下の画面が表示されます。M5Stack Core2とPCがWiFi接続されているので、USBケーブルは外してOKです。

ファーム書き込みが完了した際の、M5Stack側の表示内容の説明

③ APIキーの設定(configuration)

以下の画面でファームウェアの設定をします。M5Burnerで「Configuration」ボタンを押します。

M5Burnerの設定方法の説明1

表示された設定画面で以下の設定をします。

  1. ApiKeyをコピーする。
  2. Start Modeを「Internet Mode」に設定する
  3. SSIDとパスワードを入力する

ApiKeyは後述するUIFlowの設定に必要になるので、メモ帳などに張り付けておいてください。

※ 保全し忘れた場合は、Configurationボタンか、M5Stack Coreの画面に表示されています。

M5Burnerの設定方法の詳細説明

「Save」ボタンを押して、以下の画面が表示されたらAPIキーの設定は完了です。

M5Burnerの書き込み完了画面の説明

④UIFlowの設定

最後にUIFlowとM5Stack Core2を紐づけます。

UIFlowのサイトにアクセスして、表示された画面で以下の設定を行います。

  • メモしたApi Keyを入力
  • Languageを「日本語」に設定
  • Deviceの選択( M5Stack Core2)を選択
  • OKボタンを押す
UIFlowの設定方法の説明

OKボタンを押せば、すべてのセットアップは完了です。

UIFlowでのプログラミング

上記の手順が完了すると、UIFlow上で『MicroPython』『Blockly』によるプログラミングができるようになります。

プログラミングの方法については、以下の記事をご覧ください。Blocklyを使って「Hello M5」という文字表示するサンプルを解説しています。

Blocklyを使って作成するプログラムの実行結果の画像

まとめ

M5Stack Core2を、UIFlowから使う方法を解説しました。

公式サイトでは少し分かりづらいところがあったので、セットアップに苦戦している人や、これからM5Stack Core2・UIFlowを使う方の参考になればうれしいです。

M5Stack Core2 をはじめよう

M5Stack Core2は、USBケーブル(TypeA-TypeC)も付属なので、すぐに始めることができます。セットアップ方法については、こちらの記事をご覧ください。

¥5,990 (2022/03/30 18:04時点 | Amazon調べ)

こちらの記事で「おすすめ工具」も紹介しています。

「ユニット」でM5Stackを拡張しよう

M5Stackは「ユニット」で簡単に機能拡張ができます。

UIFlowにもユニット用の処理のブロックが用意されているので、好みのユニットを追加して、自分だけのM5Stackを作ってみてください。以下は、入門者でも使いやすいユニットです。

温湿度気圧センサユニット

I2Cで、温度・湿度・気圧の3つを測れるユニットです。温度/湿度系のセンサはプログラミングも簡単なので、初心者の方におすすめのユニットです。レゴ互換の穴も開いているので、センサの固定や配置にレゴが使えます。詳細な使い方はこちらの記事をご覧ください。

¥1,034 (2022/06/13 00:36時点 | Amazon調べ)

測距センサユニット

Time-of-Flight方式を使用して、最大2mまでの距離を計測できるユニットです。通信方式はI2Cです。こちらもレゴ互換の穴が開いています。

¥1,254 (2022/06/12 23:48時点 | Amazon調べ)

環境光センサユニット

周囲の明るさを細かい精度で計測できるユニットです。通信方式はI2Cです。こちらもレゴ互換の穴が開いています。

¥825 (2022/06/13 00:51時点 | Amazon調べ)

ユニットをつなぐ配線には、ポートA・B・Cの3種類があり、コネクタの色で判別できるようになっています。

Core2はデフォルトで「ポートA」のユニットをつなぐように設定されているため、初心者の方はポートA(赤色コネクタ、I2C通信)のユニットを使うと簡単です。

M5Stackを詳しく知るには

M5Stackをより詳しく知りたい方は、こちらの書籍がおおすすめです。書籍の中で使われているのは、M5Stack Basic + Arduino言語ですが、M5Stackの概要・構成などをより詳しく学べます。

¥2,420 (2022/09/22 10:54時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

質問・要望 大歓迎です

「こんな解説記事作って」「こんなことがしたいけど、〇〇で困ってる」など、コメント欄で教えてください。 質問・要望に、中の人ができる限り対応します。

使えたよ・設定できたよの一言コメントも大歓迎。気軽に足跡を残してみてください。記事を紹介したい方はブログ、SNSにバシバシ貼ってもらってOKです。

ABOUT ME
えす
現役のソフトウェアエンジニアです。 C++ C# Python を使ってます。10年ちょい設計/開発部門にいましたが、今はQAエンジニアっぽいことをしています。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です