開発環境構築からはじめてLチカで終わらせないM5ハンズオン

M5Stack、M5StickCなどのM5シリーズをVisualStduioCode＋PlatformIOで開発を行うハンズオン資料になります。
下記のハンズオンを行いました。
・VisualStduioCodeとPlatformIOの環境構築
・UIFlowを使った開発
・LCD・ボタンを使った例
・ネットワーク機能を使った例
・LINE Notifyを用いた呼び鈴の作成

ハンズオンで使用するソースコードは下記
https://github.com/tomitomi3/M5DevelopmentHandson

Transcript

1. 開発環境構築からはじめてLチカ で終わらせないM5ことはじめ 2024/1/17 初版 2024/1/24 修正 2024/2/2 修正 2024/2/9 修正
2. この資料について • M5シリーズをVisualStduioCodeとPlatformIOを用いて開発する ハンズオンを行いました。その時の資料になります。 • 資料に用いられている図、文献は教育目的で引用の範囲内で使用 しています。
3. ハンズオンについて • 大まかな構成は「準備編」と「ハンズオン編」 • 準備編 VisualStduioCodeとPlatformIOのインストールと開発環境の構築 • ハンズオン編 開発環境を使った開発 • 開発環境 • Windowsを想定。Macでも可能（パス等は異なるので注意）。 • ハンズオンで使用するM5 • 「M5Stack BASIC」と「M5StickC」 • 適宜設定を書き換えることで他にも対応可能 • 準備編、ハンズオン編で使用するソースコード • 下記からCloneまたはダウンロード • https://github.com/tomitomi3/M5DevelopmentHandson
4. 準備編
5. VisualStudioCodeインストール PlatformIOインストール
6. VisualStudioCodeとPlatformIO • VisualStudioCodeとPlatformIO[1]を用いる • VisualStudioCode（VSCode） • 軽量 (?) なエディタであり統合開発環境 • マルチプラットフォームで動作（Windows、MAC、Linux） • 拡張機能で様々な開発言語に対応する • 詳しくは⇒https://code.visualstudio.com/docs/ • 最も人気のある開発者環境ツール[2] • PlatformIO • 組み込みソフトウェア開発のVSCode拡張機能 • 開発に必要なSDK、ライブラリを手軽に管理できる [1] https://platformio.org/ (2024/1/10 accessd) [2] https://ja.wikipedia.org/wiki/Visual_Studio_Code (2021/8/5 accessd)
7. 時間、使用するディスク容量の目安 • インストール時間（目安） • VisualStudioCode インストール 5分 • PlatfotmIO インストール＋初期設定 10分 • 使用するディスク容量（目安） • VisualStudioCode 0.4GB • PlatformIO+M5に関するSDK 4GB〜5GB
8. ①VSCodeのインストーラをダウンロードする https://code.visualstudio.com/ • ページは遷移するが、同時にインストー ラもダウンロードされる • 資料作成時は「1.85.1」 • VSCodeUserSetup-x64-1.85.1.exe ※システム、ユーザーインストーラがある。デフォルト ではユーザーのインストーラ
9. ②VSCodeをインストールする 「Codeで開く」を追加
10. VSCodeを設定する • VSCodeは拡張性が高いエディタ • エディタ自体の拡張性も高い • 「拡張機能」で様々な開発言語に対応、補助機能を拡張 • 拡張機能で下記をインストール • 日本語化 • PlatformIO IDE
11. ③VSCodeを日本語化する。 初回起動時は英語になっている。日本語パックのインストールを行う。 お好みでテーマを変更する （スキップしてもよい。後から変更可能。説明のため明るくする。） Extensionを選択する 「EXTENTIONS MARKETPLACE」 検索に「JAPANESE」と入れて検索し、 「Japanese Language Pack for Visual〜」を表⽰・選択する。
12. ③（続）VSCodeを日本語化する。 VSCodeが再起動される。 再起動後にメニュー等が日本語される。 右下にポップアップが表⽰される。 「Change〜」をクリックする 「Install」をクリックする
13. ④PlatformIO IDEをインストールする。 拡張機能で「PlatformIO IDE」を検索する。 ※資料作成時のVerは「3.3.2」 「インストール」をクリックする。 「PlatformIO Installer: Finished〜」のポップアップが出たら VSCodeを再起動する。 ※インストールをクリックしてから10分ほどかかります。
14. 【参考】VSCodeの設定。フォント、インデントなどを変更する。 お好みで・・・ ①[ファイル]->[ユーザー設定]->[設定]を開く ②VSCodeの設定（お好みで） Editor: Guides Indentation ☑ （インデントガイド表⽰） Format On Save Mode ☑ （セーブ時にフォーマット設定） Editor: RenderControlCharacters ☑ （制御文字を表⽰） Window: Title ⇒ ${activeEditorLong} （フルパス表⽰） Workbench: Color Theme （テーマを変えられる） Window: Restore Windows ⇒ folders （直近のフォルダを開く） Editor: Mouse Wheel Zoom ☑ （マウスホイールでズームを有効） Editor: Insert Spaces □ （タブをスペースにしない。 Editor Detect Indentationと関連） Editor: Tab Size ⇒ 4 Editor: Detect Indentation ☑ （Insert Spaces、Tab Sizeの設定をファイルコンテンツによらず設定） 「設定の検索」に キーワードを入れて設定を変更
15. M5とPCの接続
16. M5とPCの接続 • これからは使用する機種によって手順が異なるので事前に持っ ているM5を確認する。 M5Core2/2.1を使用する場合、platform.iniのboard を変更する。 M5StackBASIC 2.6 2.7 M5Core2 M5Core2.1 M5StickC plusはM5StickCのコードを流用できる M5StickC M5StickC plus 写真
17. M5とPCの接続 • M5内のUSB-シリアル通信ICドライバをインストールする • M5にソフトウェア（ファームウェア）を書き込むため使用 • M5内のMCU（Micro Controller Unit） にソフトウェアを書き込み、M5上で動 くことで各種機能が実現される。 • PCからみるとM5はシリアルポートとして見える • M5->PC、PC->M5のシリアル通信にも使う。 Windowsキー＋Xキーを押す デバイスマネージャーを開く 「ポート(COMとLPT)」を展開 下記の例では”USB Serial Port(COM12)”が接続しているM5 M5によって使用する ドライバが異なるので注意
18. [1] https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/schematic/Core/M5-Core-Schematic(20171206).pdf (2024/1/10 accessd) USB-シリアル通信 IC （PCから見えているのはここ） USB Type-C ESP32 40、41がシリアル通信 M5 Stack USB Type-C ケーブル ※参考 PCとM5Stackの内部の接続 回路図[1]
19. • M5Stack BASICの場合 • 製造時期により3種類 • 搭載されている構成が異なる。 • 準備編で影響する構成 「USBシリアルドライバ」 • モデルに合わせてドライバを選択 • BASIC • CH2104 ※今回の説明はこれ • BASIC V2.6, V2.7 • CH9102F • M5Stack Core2の場合 • 製造時期により2種類[1] • 搭載されている構成が異なる。 • 準備編で影響する構成 「USBシリアルドライバ」 • モデルに合わせてドライバを選択 • CH2104 ※今回の説明はこれ • CH9102F [1] https://docs.m5stack.com/ja/core/core2 (accessed 2024/1/21)
20. M5Stack BASIC/Core2/GOの場合 ①ドライバを入手する M5Stack BASIC ドキュメントページ アクセス https://docs.m5stack.com/ja/core/basic ②「CP210x_VCP_Windows」をダウンロードする ③ダウンロードしたファイルを展開する。 ④「CP210xVCPInstaller_x64_v6.7.0.0.exe」を実行し、 ドライバをインストールする。 M5 Stack USB Type-C ケーブル 側面にUSB Type-Cコネクタ ④PCとM5をUSBケーブルで接続する。 ※初めて接続した場合 右の表⽰が出る。 ⑤デバイスマネージャーを開く 「Windowsキー＋Xキー」を押下してメニュー選択 ⑤「ポート(COMとLPT)」を展開 「Silicon Labs CP210x〜」があることを確認
21. ※⻩⾊△の場合 ①PCとM5を抜き差ししてみる M5 Stack USB Type-C ケーブル ①⻩⾊△のデバイスでメニューを展開 「ドライバーの更新」を選択 ※前ページのインストーラと本手順を行う場合がある。 ②ドライバーの探索方法 「ドライバーを自動的に探索」を選択 ②デバイスマネージャーを確認する ⻩⾊△となっていないことを確認
22. ※初めて接続した場合 右の表⽰が出る。 M5StickCの場合 ※自動的に適切なドライバがインストールされる。 ②、⑩を確認して他はスキップしてもよい ①PCとM5をUSBケーブルで接続する M5 Stick C USB Type-C ケーブル 側面にUSB Type-Cコネクタ ②デバイスマネージャーを開く 「Windowsキー＋Xキー」を押下してメニュー選択 ③⻩⾊△があるデバイスを確認する ④ドライバを入手する FTDI社ダウンロードページ アクセス https://ftdichip.com/drivers/vcp-drivers/ ⑤赤破線枠のファイルをダウンロードする（x64) ⑥ダウンロードしたファイルを展開する
23. M5StickCの場合 ⑦⻩⾊△があるデバイスを右クリックし 「ドライバーの更新」を選択 ⑨「参照」で展開したドライバのフォルダを選択 「次へ」を選択する ⑧ドライバーの探索方法で、 「コンピューターを探索してドライバーを探索」を選択 ⑩デバイスマネージャー⻩⾊△ が無いことを確認する ※⻩⾊△の場合2ページ前の「⻩⾊△の場合」を参照
24. ※参考 M5とCOMポート番号は調べておく • M5に書き込み時 • １つの場合は特に困らない（Autoで自動でM5を接続可能） • 2台以上接続する場合はCOMポート番号を指定する。 • 何が接続されているか事前に把握しておくorポート番号を変更する。 Windowsキー＋Xキーを押す デバイスマネージャーを開く 6台接続されている状態 ← (COM◦)がCOMポート番号
25. ※参考 M5 本体の電源ON/OFF • M5Stack BASIC • 電源ON • 側面ボタンを1回押す • 電源OFF • USB Type-Cのケーブルを抜き、側面ボタンを連続2回押す • M5StickC • 電源ON • 左側面ボタンを⻑押しする • 電源OFF • 左側面ボタンを⻑押しする M5 Stack M5 Stick C
26. PlatformIOによるM5開発環境 の構築
27. M5の開発環境の構築と確認 • M5の開発環境構築をPlatformIOで行う • 開発環境のダウンロード、ビルド環境の構築、ファームウェアをM5に アップロードする仕組みなど開発環境の設定を行う。 • 手作業で行う事は可能だが、事前準備したプロジェクトをPlatformIOで開 くことで環境構築を自動的に行う[1]。 • PlatformIO（platformio.ini）によるライブラリなどを含めたパッケージ管理[2] • rustのcargo.toml、Pythonのrequirements.txtに環境構築を加えたような機能 • 【参考】開発環境（コンパイラなどツールチェーン）の構築・保存先 • C:¥Users¥[ユーザー名]¥.platformio • 作業時間（目安） • プロジェクト設定 30分 [1] https://docs.platformio.org/en/latest/what-is-platformio.html?utm_source=github&utm_medium=core#how-does-it-work (accessed 2024/1/21) [2] https://docs.platformio.org/en/latest/projectconf/index.html (accessed 2024/1/21)
28. ①ハンズオンのソースコードを展開する 「Preparation_sourcecode」フォルダを開く。 （慣例にならうとパス名に日本語を含まない場所に置くのが良い。デスクトップでも動作することは確認済） M5Stack BASIC/GO用 M5Stack Core2に対応する場合は “異なるM5への対応”ページ参照 M5StickC/Cplus用 ②プロジェクトをVSCodeで開く VSCodeから フォルダーを開く フォルダーのメニュー から開く 開く方法は２つ下記いずれかでもよい。 PlatformIOからも開くことも可能（今回の手順では略） 「はい、作成者を信頼します」を選択する。 ※フォルダ内に実行ファイル等が生成され る場合がある。その場所から実行してよい かの確認 or
29. ③PlatformIOによる環境構築が始まる ポップアップが随時表⽰される。初回の場合は10分〜20分。 VSCodeのタスクバーが下記の様になったら構築 完了 ④サンプルソースのビルドを行う 「☑」のマークをクリックする。ターミナルが立ち上がる。 下記のポップアップは「×」または 「今はしない」を選択する。 ビルドが成功すれば下記の表⽰となる。
30. ※参考 PlatformIOで環境構築が進まない場合 • 環境作成を邪魔している可能性がある[1] • 監視対象から開発環境があるフォルダ（core_dir）を除外すること で対応可能な場合がある。 • core_dir：C:¥Users¥[ユーザー名]¥.platformio [1]https://docs.platformio.org/en/stable/faq/troubleshooting.html (accessed 2024/1/21) Windowsセキュリティ->ウイルスと驚異の防止 「除外の追加または削除」を選択 「除外の追加」で 「フォルダー」を選択 選択ダイアログで下記フォルダを選択 C:¥Users¥[ユーザー名]¥.platformio WindowsDefenderの場合
31. [1] https://lang-ship.com/blog/work/m5unified-1/#toc22 (accessed 2024/1/7) ; PlatformIO Project Configuration File ; ; Build options: build flags, source filter ; Upload options: custom upload port, speed and extra flags ; Library options: dependencies, extra library storages ; Advanced options: extra scripting ; ; Please visit documentation for the other options and examples ; https://docs.platformio.org/page/projectconf.html [env:m5stick-c] platform = espressif32 board = m5stick-c framework = arduino PlatformIOのBoard M5シリーズ m5stack-atom ATOM LITE m5stack-atom ATOM MATRIX m5stack-atom ATOM ECHO m5stack-atom ATOM U m5stack-core-esp32 BASIC m5stack-grey GRAY m5stack-core-esp32 M5GO m5stack-fire FIRE m5stack-core2 CORE2 m5stack-core2 CORE2 for AWS m5stack-coreink CORE.INK (m5stick-c) M5PAPER m5stick-c M5StickC (m5stick-c) M5StickC PLUS (m5stack-core2) TOUGH m5stack-station STATION 485 m5stack-station STATION BAT m5stack-atoms3 AtomS3 m5stack-atoms3 AtomS3 Lite (esp32-s3-devkitc-1) CORES3 (m5stick-c) STAMP PICO (esp32-c3-devkitc-02) STAMP C3 (esp32-c3-devkitc-02) STAMP C3U m5stack-stamps3 StampS3 m5stack-atom Atom Display m5stack-atom Atom Display Lite (m5stick-c) Timer CAM (m5stick-c) Unit CAM (m5stick-c) PoE CAM platform.iniのWORKINGセクションの “board”を変更する。 M5シリーズと”platform.ini” boardの対応 [1]を元に改変 [env:m5stack-core2] platform = espressif32 board = m5stack-core2 framework = arduino [env:m5stack-core-esp32] platform = espressif32 board = m5stack-core-esp32 framework = arduino M5Stack BASIC/GOからCore2に変更してビルドする場合 「board」を「m5stack-core2」に変更 ※参考 異なるM5への対応 env:◦◦も同じにしておく
32. 環境構築の確認 M5へのアップロード
33. 環境構築の確認 • 環境構築したVSCodeを用いてM5に「Hello World」を表⽰する • ソースコードをビルドしファームウェアを書き込み動作確認 左のように文字 が表⽰される
34. ①M5とPCを接続し、アップロードを行う。 ②ソースコードを一部変更してビルド、アップロードを行う。 背景⾊を赤⾊に変更する。ビルド＋アップロードを行いM5のLCDが赤色になることを確認する。 アップデートが成功すれば下記の表⽰となる。M5本体がリセットされ書き込んだソフトウェアが起動する。 「→」のマークをクリックする。ビルドとM5へのアップロードを行う。 ビルドがされている場合は、ビルドしたファームウェアのみをアップデートする。 auto bgColor = M5.Lcd.color888(0, 0, 0); // RGB指定 M5.Lcd.color888(255, 0, 0); // RGB指定 黒から赤に変更する コード変更後にアップロードを行う。 M5Stackの場合はプツっ と音が鳴るが正常動作
35. アップロードできない場合 • 使用するソースコードとM5のモデルが合っているか • M5StickCのプロジェクトを開いて、M5Stackに書き込むとエラーとなる （platform.iniのboardを変更で対応可能。「異なるM5への対応」参照） • M5Stack/StickをON/OFFしてみる。 • PCを再起動してみる。 • COMポートを他のプロセスが握ったままになっている場合
36. WiFi環境の確認
37. 準備 WiFi環境を準備する。 • M5が使用するWiFiを準備する。 • IEEE802.11G(2.4GHz)が必要 • 自宅にWiFiのAPがあればSSID、パスワードを準備する。 • 無ければ下記の「モバイルホットスポット」が使用可能か確認する。 Windows PC をモバイル ホットスポットとして使用する 1. [スタート] を選択し、[設定] > [ネットワーク & インター ネット >モバイル ホットスポット] を選択します。 2. [インターネット接続を共有する] で、共有するインターネッ ト接続を選択します。 3. 必要に応じて、[ 編集] を選択>新しいネットワーク名とパス ワードを入力> 保存します。 4. [インターネット接続を他のデバイスと共有します] をオンに します。 5. 他のデバイスで接続するには、そのデバイスのWi-Fi設定に移 動し、ネットワーク名を見つけて選択し、パスワードを入力 して接続します。 ONにできるかを確認 VPNはOFFにする。 [編集]で2.4GHzを選ぶ SSID、パスワードを記録
38. WEBサービスの利用
39. ハンズオンで使用するWEBサービス • ハンズオンで使用するWEBサービス • LINE Notify WEB API • LINEへの通知に使用するWEB API（LINEを使っていない方すみません） • https://notify-bot.line.me/ja/ • AIチャットボットサービス • 代表的なOpenAI社のChatGPT以外に、Copilot(Bing AI)、Bard、Claudeなどがある。 • 利用にはアカウント作成が必要なのもある。 • https://chat.openai.com/ • https://copilot.microsoft.com/ • https://bard.google.com/chat • https://claude.ai/chats
40. LINE Notifyのアクセストークン取得 • LINE Notifyのトークン取得 • 下記WEBページからLINE IDでログイン （QRコードログインが手軽） • https://notify-bot.line.me/ja/ • 画面右上から マイページ->アクセストークンの発行 ・トークン名 （LINEで表⽰される名前） ・トークルームを選択/入力 「1:1〜」を選択して、 アクセストークンを発行する。
41. ハンズオン編
42. ハンズオンで行うこと • ハンズオンで行うこと • M5を知る • M5の開発方法 • UIFlowを用いたM5開発 • ハンズオン UIFlowを用いてLCDチカ • VisualStudioCodeとPlatformIOを用いたM5開発 • ハンズオン①LCDとボタンを使う • ハンズオン②PCとシリアル通信 • ハンズオン③M5にWiFi経由でデータ送信 • ハンズオン④LINE Notifyを用いた通知 • （参考）ChatGPTを用いたM5開発支援 • まとめ
43. M5を知る ※M5Stack Technology社が販売するControllerを本ハンズオンでは「M5」と 一括りで表現しています。
44. M5Stackとは何か？ • M5Stack Technology社が製造・販売するモジュール[1] • Stack/Stick/Atom/Stamp/E-paper M5シリーズがある • 最初のM5Stack BASICは2017/7[2] • M5シリーズ 特徴 • UI（LCD、ボタンなど）、センサー、I/O、Wi-Fi/BLEをコンパクトにまと め、電子回路な見た目を隠したセンス◎なオープンソースなHW（主観有） • はんだ付け不要の機能拡張。容易なソフトウェア開発環境の提供。 • アイディアを早々に形にする（ラピッド）プロトタイピング用途 • コミュニティが盛ん（作品事例が多い、スタックちゃん[4]） [1] https://m5stack.com/ (accessed 2024/1/20), [2] Modular IoT Development Platform, https://m5stack.com/about-us (accessed 2024/1/20) [3] M5Stack's Story: From Shenzhen to the World, https://shop.m5stack.com/blogs/news/m5stack-s-story-from-shenzhen-to-the-world (accessed 2024/1/20), [4] https://protopedia.net/prototype/2345 (accessed 2024/1/20)
45. M5Stack/Coreシリーズは 重ねて機能拡張が可能
46. https://shop.m5stack.com/collections/m5-controllers • シリーズ • Stack • Stick • Atom • Stamp • E-paper などがある • 公式WEBサイトによる用途 • STACK シリーズ • For comprehensive application • STICK シリーズ • For IoT edge application • ATOMシリーズ • For smart home and industry control application
47. https://shop.m5stack.com/collections/m5-sensor https://shop.m5stack.com/collections/m5-modules ※M5Stack社は毎週金曜日何かしら 新製品を発表している。
48. M5で何が出来るのか？具体例 • 作品投稿サイト • プロトペディア • https://protopedia.net/ • M5Stack/M5Stickcを キーワードに検索
49. M5で何が出来るのか？具体例 • 作品投稿サイト • Hackster.io - The community dedicated to learning hardware. • https://www.hackster.io/ • M5Stack/M5Stickcをキー ワードに検索
50. M5で何が出来るのか？具体例 • 短期開発、プロトタイピング • 魔改造の夜 Rコー[1] [1]NHK BSプレミアム「魔改造の夜」 “Rコー”開発マシンに迫る, https://jp.ricoh.com/technology/40days_challenge (accessed 2024/1/20) PENTA-X 縄検出、モーター制御M5Stack Core2 THOOTA-R ローラーモーターの回転数PID制御、回転数表示UI
51. M5で何が出来るのか？具体例 [1]「あの作業いつ終わる？」のモヤモヤを解消 スパコン「京」を支えた町工場の生産性改革, https://news.yahoo.co.jp/articles/b6ccc663b352d47e3b5148a28ae8c8771cc443b5 (accessed 2024/1/6) • 製造現場：機械の稼働状況の記録と可視化 • 「うちでは機械が停止する際の信号を検知する ようにプログラミングして、機械のパネルに取 り付けました。機械が止まるとセンサーが信号 を検知し、『稼働ストップ』の情報が停止の原 因とともにボードに表⽰され、slackでも全社員 に通知される流れです。・・・」[1] • M5で状態を「見せる化」⇒稼働が「見える化」
52. 例：◦◦したら通知する。 • 既存の家電製品をIoT化 • コーヒーメーカーの電源ランプをカラーセンサーで取得し、 LINE通知 • 洗濯機の音をマイクユニットor内臓マイクで拾い、LINE通知 • 音に対する工夫が少し必要。例えばパターン認識など • スマートホームを自ら作る • 気圧変化を取得し、LINE通知 • CO2濃度を取得し、LINE通知 • 温度と湿度から熱中症になりそうな場合、赤外線LEDを使用 してエアコンのON/OFFを制御する ※余談「既存の物のインターネット」と題して音などIFにパターン認 識してトリガーにするHWをMFT2016に応募したが落選orz
53. 例：◦◦したら通知する。 • 既存の家電製品をIoT化 • コーヒーメーカーの電源ランプをカラーセンサーで取得し、 LINE通知 • 洗濯機の音をマイクユニットor内臓マイクで拾い、LINE通知 • 音に対する工夫が少し必要。例えばパターン認識など • スマートホームを自ら作る • 気圧変化を取得し、LINE通知 • CO2濃度を取得し、LINE通知 • 温度と湿度から熱中症になりそうな場合、赤外線LEDを使用 してエアコンのON/OFFを制御する ※余談「既存の物のインターネット」と題して音などIFにパターン認 識してトリガーにするHWをMFT2016に応募したが落選orz アイディア＋M5 M5を使うことで いろいろな事が手軽に出来る
54. （ゆるい）まとめ • M5はいろいろな機能が凝縮したモジュール、M5社が販売する モジュールで機能拡張も容易 • アイディア次第でいろいろなことが出来る
55. M5の開発方法
56. ローカル ローカル（クラウドもある） クラウド（ローカルもある） 開発環境 やや煩雑 比較的簡単 ArduinoIDEダウンロード 簡単 UIFlowのファームを書き込む 環境構築難易度 Arduino or C/C++ (Frameworkによる) Arduino言語 (≒C/C++) Blockly[1](ビジュアルプログ ラミング言語)、Micro Python 開発言語 ◦高い ◦高い △ブロック依存（拡張可）。 UIFlowのみの機能も有る。 開発自由度 有り パッケージ管理あり（自動） ※共同開発・コード共有で便利 有り パッケージ管理あり（手動） 無し パッケージ管理 （ライブラリなど） Arduinoで出来ることは可能 VSCodeでのモダンな開発環境 Arduinoの標準開発環境 M5の標準開発環境 公式なので新しいモジュール、 センサーの対応が早い 備考 M5の統合開発環境（IDE）の比較 • 代表的なIDE UIFlow(M5Flow)、Arduino IDE、PlatformIO • 良い悪いはなく、それぞれ特徴がある。 開発言語として nanoFramework(c#)、 Micro Pythonがある。 （割愛） [1] https://developers.google.com/blockly (accessed 2024/1/21)
57. VisualStudioCodeとPlatformIO • VisualStudioCode（VSCode） • 軽量 (?) なエディタであり統合開発環境 • マルチプラットフォームで動作（Windows、MAC、Linux） • 拡張機能で様々な開発言語に対応する • 詳しくは⇒https://code.visualstudio.com/docs/ • 最も人気のある開発者環境ツール[1] • PlatformIO[2] • 組み込みソフトウェア開発向けのVSCode拡張機能 • 開発に必要なSDK、ライブラリを手軽に管理できる [1] https://ja.wikipedia.org/wiki/Visual_Studio_Code (2021/8/5 accessd) [2] https://platformio.org/ (2024/1/10 accessd)
58. PlatformIOをなぜ使うのか？ • What is PlatformIO?[1]のProblematicの章を翻訳 • 組み込みの世界から人々を遠ざけている主な問題は、特定のMCU/ボード 用に開発ソフトウェアをセットアップするための複雑なプロセスです： ツールチェーン、独自のベンダーのIDE（時には無料ではありません）、そ してさらに、そのソフトウェアがサポートされているOSを搭載したコン ピュータを入手することです。 • 複数のハードウェア・プラットフォーム（MCUやボード）があると、それ ぞれ異なるツールチェーンやIDEなどが必要になり、新しい開発環境の習得 に時間を費やすことになる。 • 一般的なセンサやアクチュエータなどの使用方法を示す適切なライブラリ やコードサンプルを見つけること。 • オペレーティングシステムに関係なく、チームメンバー間で組込みプロ ジェクトを共有する。 [1] https://docs.platformio.org/en/latest/what-is-platformio.html (accessed 2024/1/21) ※参考
59. PIC(Microchip) AVR(Atmel->Microchipが買収) Propeller(Parallax) H8(日立->ルネサス エレクトロニクス) STM(STMicro) PSoc(Cypress) RL78（78Kの改良,ルネサス エレクトロニクス） RX（ルネサス エレクトロニクス） SH(日立製作所) MSP(Texas Instruments) M16,M32,R8C/Tiny (三菱電機->ルネサス エレクトロニクス) 78K(NEC->ルネサス エレクトロニクス) FR（富士通） Quark(Intel, x86アーキテクチャ) ML(Oki->ラピスセミコンダクタ(ROHM)) マイコンの開発 • 手軽には作れなかった（主観有） • 開発環境がメーカー毎に異なる • Microchip PICの例 • 公式開発環境（MPLAB IDE[1]） • サードパーティーの開発環境 （mikroC PIC[2]） • Atmel • 公式開発環境（AVR Studio） • OSS Cコンパイラ（avr-gcc） • ファームウェアは互換性無し • MCUに書き込みするHW（ライタ[3]） • 動作させる為の周辺回路を準備、作る • クロック、センサーなど LPC(NXPセミコンダクターズ) HC08(Freescale->NXPセミコンダクターズが買収) 一般でマイコンと呼ばれるもの メーカー、マイコンを抜粋 [1] https://www.microchip.com/en-us/tools-resources/develop/mplab-x-ide (accessed 2024/1/21) [2] https://www.mikroe.com/mikroc-pic (accessed 2024/1/21) [3] https://akizukidenshi.com/catalog/c/cpicw (accessed 2024/1/21) 多くのメーカーが用途に応じ開発・販売 ※参考
60. 開発環境も含めてプラットフォーム化 Ichigo jam GR-SAKURA micro Bit Mbed Arduino(2005〜)有名 プロトタイピング用途 （Raspbery PI） Intel Galileo(Intel) プログラミング専用こどもパソコン/ プロトタイピング用ワンボードマイコン/ シングルボードコンピュータ とも M5シリーズ 今回ハンズオンの対象 PIC(Microchip) AVR(Atmel->Microchipが買収) Propeller(Parallax) H8(日立->ルネサス エレクトロニクス) STM(STMicro) PSoc(Cypress) RL78（78Kの改良,ルネサス エレクトロニクス） RX（ルネサス エレクトロニクス） SH(日立製作所) MSP(Texas Instruments) M16,M32,R8C/Tiny (三菱電機->ルネサス エレクトロニクス) 78K(NEC->ルネサス エレクトロニクス) FR（富士通） Quark(Intel, x86アーキテクチャ) ML(Oki->ラピスセミコンダクタ(ROHM)) LPC(NXPセミコンダクターズ) HC08(Freescale->NXPセミコンダクターズが買収) 一般でマイコンと呼ばれるもの メーカー、マイコンを抜粋 多くのメーカーが用途に応じ開発・販売 ※参考
61. Arduinoについて Arduinoボード Arduino IDE Arduinoプラットフォーム • AruduinoボードとArudino IDE • Arduinoボード • MCU、動作に必要な回路、入出力をまとめ、拡張性（シールド）を有したHW • ArduinoIDE 統合開発環境 ※参考 • ボードとIDEで開発、書き込みが可能 • IDEは無償 • 豊富なサンプルコード • setup(), loop()の記法 • M5も同様にプラットフォーム化。 開発の敷居を下げている。
62. ローカル クラウド（ローカルもある） 開発環境 やや煩雑 簡単 UIFlowのファームを書き込む 環境構築難易度 Arduino or C/C++ (Frameworkによる) Blockly[1](ビジュアルプログ ラミング言語)、microPython 開発言語 ◦高い Blockly[1](ビジュアルプログ ラミング言語)、Micro Python 開発自由度 有り パッケージ管理あり（自動） ※共同開発・コード共有で便利 無し パッケージ管理 （ライブラリなど） Arduinoで出来ることは可能 VSCodeでのモダンな開発環境 M5の標準開発環境 公式なので新しいモジュール、 センサーの対応が早い 備考 ハンズオンではUIFlowとVSCode+PlatformIO [1] https://developers.google.com/ (accessed 2024/1/21)
63. LCD(80x160) LCD(320x240) LCD 2ボタン、（電源ボタン） 3ボタン、（電源ボタン） ボタン 赤⾊LEDx1、赤外線LEDx1 無し LED 無し 有り スピーカー 有り 無し マイク 6軸IMU(加速度・角速度センサー) 無し 内臓センサー ← WiFi(IEEE802.11G 2.4GHz)、BLE ネットワーク ← リチウムポリマー電池 バッテリー ・GROVE(I2C+I/O+UART)×1 ・HAT ・TypeC×1 ・GROVE(I2C+I/O+UART)×1 ・ボトムポート ・TypeC×1 ポート/GPIO RTC（正確な時計） MicroSDカードスロット その他 [1] https://docs.m5stack.com/ja/core/basic (accessed 2024/1/21), [2] https://docs.m5stack.com/ja/core/m5stickc (accessed 2024/1/21) ハンズオンで使用するM5 • M5Stack BASIC、M5StickCの機能抜粋[1][2] • 共通の機能（赤破線）を使用するハンズオンを行う M5Core2 M5StickC Plus 随時説明します。
64. UIFlowを用いたM5開発
65. UIFlowを用いた開発 • 作るもの • ボタンを押しているときだけ LCD背景⾊が変わる。 （ボタンLCDチカ） • 準備 • M5とPCを接続する。 • COMポート番号を調べておく。 • WiFi環境を準備する。 • 開発の流れ 1. M5Burnerを用いてM5にUIFlow ファームウェアを書き込む 2. UIFlow(https://flow.m5stack.com /)にAPI Keyを設定する。 3. Blocklyを用いて開発を行う。 4. ソフトウェアをM5へ書き込み、動 作確認を行う。
66. 準備 COMポート番号の調べ方 Windowsキー＋Xキーを押す デバイスマネージャーを開く 「ポート(COMとLPT)」を展開 下記の例では”USB Serial Port(COM12)”が接続しているM5
67. 準備 WiFi環境を準備する。 • M5が使用するWiFiを準備する。 • IEEE802.11G(2.4GHz)が必要 • 自宅にWiFiのAPがあればSSID、パスワードを準備する。 • 無ければ下記のモバイルホットスポットが使用可能か確認する。 Windows PC をモバイル ホットスポットとして使用する 1. [スタート] を選択し、[設定] > [ネットワーク & インター ネット >モバイル ホットスポット] を選択します。 2. [インターネット接続を共有する] で、共有するインターネッ ト接続を選択します。 3. 必要に応じて、[ 編集] を選択>新しいネットワーク名とパス ワードを入力> 保存します。 4. [インターネット接続を他のデバイスと共有します] をオンに します。 5. 他のデバイスで接続するには、そのデバイスのWi-Fi設定に移 動し、ネットワーク名を見つけて選択し、パスワードを入力 して接続します。 ONにできるかを確認 VPNはOFFにする。 [編集]で2.4GHzを選ぶ SSID、パスワードを記録
68. M5Burnerを用いてM5にUIFlow ファームウェアを書き込む 1. M5Burnerをダウンロード、展開 • https://docs.m5stack.com/en/download 2. M5Burnerを実行する。 3. 使用するM5を左メニューから選択し、 UIFlowのファームウェアをダウンロード 4. Burnをクリックし、WiFiの接続情報を入力する。Nextをクリックする。 1. M5Burnerを用いてM5にUIFlowファームウェアを書き込む 2. UIFlow(https://flow.m5stack.com/)にAPI Keyを設定する。 3. Blocklyを用いて開発を行う。 4. ソフトウェアをM5へ書き込み、動作確認を行う。 M5StackBASICの場合 CORE M5Core2の場合 CORE2 M5StickC/Cplustの場合 StickC M5Core2の場合 UIFlow2.0（1.0も可） M5StickCplusの場合 UIFlow_StickC_Plus コンピュータマークをクリックすることで PCに接続されているWiFiから選択可能 ダウンロードするとアイコンが変わる
69. M5Burnerを用いてM5にUIFlow ファームウェアを書き込む 5. COMポート番号を選択して、Startをクリックする。 6. M5とWiFi接続を確認する。 • 正常に接続された場合「API KEY」が表⽰される。 ファームウェアがM5に書き込まれる。 • 正常接続 API KEYが表⽰ • API KEYはデバイスを特定し、 コードをアップロードするた めのもの。不特定多数には教 えない方がよい（変更可能） • 接続できない場合 • 側面電源ボタンでリセット（再接続） • ReConnectと表⽰する場合 ボタン（⻘⽮印）を押すことで再接続 1. M5Burnerを用いてM5にUIFlowファームウェアを書き込む 2. UIFlow(https://flow.m5stack.com/)にAPI Keyを設定する。 3. Blocklyを用いて開発を行う。 4. ソフトウェアをM5へ書き込み、動作確認を行う。
70. 1. M5Burnerを用いてM5にUIFlowファームウェアを書き込む 2. UIFlow(https://flow.m5stack.com/)にAPI Keyを設定する。 3. Blocklyを用いて開発を行う。 4. ソフトウェアをM5へ書き込み、動作確認を行う。 UIFlow(https://flow.m5stack.c om/)にAPI Keyを設定する。 1. UIFlowにアクセスする。 • https://flow.m5stack.com/ 2. 使用するUIFlow verを選択し、Confirmを選択する。 • M5Burnerで書き込んだUIFlowのバージョンに合わせる。 3. Api keyをクリックし、Api Keyの入力、デバイス選択を行う。 OKをクリックする。 4. 接続済みになることを確認する。 M5に表⽰されているAPI KEY を入力する。 Languageは日本語を選択する。 接続するDeviceを選択する。
71. 1. M5Burnerを用いてM5にUIFlowファームウェアを書き込む 2. UIFlow(https://flow.m5stack.com/)にAPI Keyを設定する。 3. Blocklyを用いて開発を行う。 4. ソフトウェアをM5へ書き込み、動作確認を行う。 Blocklyを用いて開発を行う 1. 下記の様にブロックを構成する。 • ブロックの詳細は次のページ
72. • 「ずっと」/「ボタン[A]が[pressed]である」 • イベントパネル • 「もし〜であれば〜そうでなければ」 • 論理パネル • 「画面の背景⾊を〜（略）」 • UI->画面パネル • ブロック同士を接続する
73. 1. M5Burnerを用いてM5にUIFlowファームウェアを書き込む 2. UIFlow(https://flow.m5stack.com/)にAPI Keyを設定する。 3. Blocklyを用いて開発を行う。 4. ソフトウェアをM5へ書き込み、動作確認を行う。 ソフトウェアをM5へ 書き込み、動作確認を行う。 1. Runボタンをクリックする。 • 接続されているM5にコードがアップロードされ実行される。 from m5stack import * from m5ui import * from uiflow import * setScreenColor(0x111111) while True: if btnA.isPressed(): setScreenColor(0x99ff99) else: setScreenColor(0x000000) wait_ms(2) 下記のコードが転送されてM5上で実行されている（はず） 「ダウンロード」を選んだ場合はそのコード を常に実行するようにM5の設定を書き換える。
74. ハンズオン • サンプルソース • Handson_sourcecodeフォルダ参照 • UIFlow_Handson¥m5handson_uiflow_lcdchika.m5f
75. UIFlow独自機能 リモコン+（Remote+） • スマホなどから操作可能なUIをUIFlowでWEBページとしてデザイン • UIへのアクセスはM5に表⽰されるQRコードまたはURLからアクセス UIFlow上でUIをデザイン （固定リンクが生成される） スマホからアクセス （Chrome表⽰ iPhoneSE相当） デザインしたUIにあるスイッチを切り替 えることでLCD⾊を切り替える [1] https://docs.m5stack.com/en/uiflow/iotservice/remote+ (accessed 2024/1/21) 「Run」 M5上 にQRコードが 表⽰。QRコー ドからUIにア クセスが出来 る。
76. ハンズオン • サンプルソース • Handson_sourcecodeフォルダ参照 • UIFlow_Handson¥m5handson_uiflow_remoconplus.m5f
77. ブロックから生成されるコード • ブロックの接続形状 • if/else, for/whileのネスト、 =（代入）, ==（比較） 〜略〜 while True: if btnA.isPressed(): setScreenColor(0x99ff99) else: setScreenColor(0x000000) wait_ms(2) 解説
78. 参考 M5Stackが提供するクラウドサービス • UIFlow • 統合開発環境 • リモコン＋（Remote+） • WEBベースのM5操作 UI • EzData[1] • トークン（アクセスキー）を元にM5で取得した値をクラウドへ保存、 読み込み可能なキュー型のストレージサービス ※データの保持期間 半年アクセスが無ければデータは消える “If no data operation is performed within half a year, the data queue corresponding to the token will be cleared.” [1] https://docs.m5stack.com/en/arduino/iotservice/ezdata (accessed 2024/1/21) ※Remote+のUIの固定URLの保持期間 API KEYと関連付けて保存。⻑い期間とある。 “This page is associated with the API KEY of the device and will be stored in the M5 service for a long time, and a fixed access link is provided.” 解説
79. （ゆるい）まとめ • UIFlowはM5の開発環境の１つでありビジュアルプログラミングに 特化 • UIFlowにのみある独自機能もある • （UIFlowだけでもいろいろ・手軽に出来るが、今回は割愛）
80. VisualStudioCodeと PlatformIOを用いたM5開発
81. 準備編 “HelloWorld”の表示 • 準備編でVisualStudioCodeとPlatformIOのインストール、使用す るM5に対する設定は完了しているはず。 略 同じソースコードで 異なるM5に “HelloWorld”を表⽰
82. ハンズオン M5Unified を使用 （ハンズオンでは固有機能はほぼ使っていない） • “M5Stack製品をArduinoFrameworkで扱うためのライブラリ”[1] • 機種間の差を吸収する統一ライブラリ • 従来はM5ごとにライブラリがある例：M5StackはM5Stack.hなど M5Unifiedは１つのライブラリで共通のAPIで各種M5の開発を可能にする。 • 豊富・強力なUIを提供するライブラリ、今後も保守される（らしい） [1] https://docs.m5stack.com/ja/quick_start/m5unified/helloworld (accessed 2024/1/21), [2] https://github.com/m5stack/M5Unified (accessed 2024/1/21) [3] https://docs.google.com/presentation/d/1a_PSTQC-5HFejekAp_ExxMcwR8apyax_pxPR6dsnbnY/ (accessed 2024/1/21) M5Unifiedハンズオン資料[3]抜粋 • 機種間の相違点の例 • 内臓LCD • 使用可能なボタン など
83. ハンズオン①LCDとボタンを使う • 作るもの • ボタンを押しているときだけ “HelloWorld”を表⽰する。 • 準備 • M5とPCを接続する。 • COMポート番号を調べておく。 • 開発の流れ 1. VSCodeでプロジェクトを作成する。 2. コーディング 3. コードのビルドとM5へのアップ ロードを行い、動作確認を行う。 • 狙い • VSCodeとPlatformIOを用いた開発 流れを知る。 Hello World Hello World
84. 1. VSCodeでプロジェクトを作成する。 2. コーディング 3. コードのビルドとM5へのアップロードを行い、動作確認を行う。 VSCodeでプロジェクトを作成する。 1. アクティビティバーから PlatformIOアイコンをクリック 2. メニューからOpenをクリック 3. スタートページ 「New Project」をクリック 4. Project Wizardで下記を入力後、Finish をクリックする Name：プロジェクト名 Board：使用するM5（次ページ表参照） Framework：Arduino ※補足 Use default locationがチェックの時、プロジェクトは下記に作成 C:¥Users¥[ユーザー名]¥Documents¥PlatformIO¥Projects¥[Name]
85. 1. VSCodeでプロジェクトを作成する。 2. コーディング 3. コードのビルドとM5へのアップロードを行い、動作確認を行う。 VSCodeでプロジェクトを作成する。 5. プロジェクトが作成される PlatformIO Board M5シリーズ m5stack-atom ATOM LITE m5stack-atom ATOM MATRIX m5stack-atom ATOM ECHO m5stack-atom ATOM U m5stack-core-esp32 BASIC m5stack-grey GRAY m5stack-core-esp32 M5GO m5stack-fire FIRE m5stack-core2 CORE2 m5stack-core2 CORE2 for AWS m5stack-coreink CORE.INK (m5stick-c) M5PAPER m5stick-c M5StickC (m5stick-c) M5StickC PLUS (m5stack-core2) TOUGH m5stack-station STATION 485 M5シリーズとBoardの対応 [1]を元に改変 [1] https://lang-ship.com/blog/work/m5unified-1/#toc22 (accessed 2024/1/7) PlatformIO Board M5シリーズ m5stack-station STATION BAT m5stack-atoms3 AtomS3 m5stack-atoms3 AtomS3 Lite (esp32-s3-devkitc-1) CORES3 (m5stick-c) STAMP PICO (esp32-c3-devkitc-02) STAMP C3 (esp32-c3-devkitc-02) STAMP C3U m5stack-stamps3 StampS3 m5stack-atom Atom Display m5stack-atom Atom Display Lite (m5stick-c) Timer CAM (m5stick-c) Unit CAM (m5stick-c) PoE CAM 4. （続き）Boardは下記を選択 よく使うファイルは下記 src/main.cpp platformio.ini
86. コーディング 1. VSCodeでプロジェクトを作成する。 2. コーディング 3. コードのビルドとM5へのアップロードを行い、動作確認を行う。 1. PIO HomeからLibrariesをクリック 2. “M5Unified”を検索する 3. 「Add to Project」を クリック 4. ライブラリを追加するプロジェクトを 選択し、「Add」をクリックする M5Unifiedライブラリをプロジェクトに追加 5. “platforom.ini”にライブラリが追加 ※直接記述してもよい
87. 1. VSCodeでプロジェクトを作成する。 2. コーディング 3. コードのビルドとM5へのアップロードを行い、動作確認を行う。 “Hello World”を表示するコードを書く 1. 「main.cpp」を開く デフォルトコードは削除してよい。 2. 下記のコードを入力する。 #include <Arduino.h> #include <M5Unified.h> void setup() { // 初期化 auto cfg = M5.config(); M5.begin(cfg); } void loop() { // ボタン入力を更新するために呼び出す M5.update(); M5.Display.startWrite(); if (M5.BtnA.isPressed()) { // ボタンが押されている // 続く↗ // 文字色とフォントサイズ auto fColor = M5.Lcd.color888(255, 255, 255); M5.Lcd.setTextColor(fColor); // TFT_WHITE というマクロもある M5.Lcd.setTextSize(2); // 描画 M5.Lcd.setCursor(0, 0); M5.Lcd.println("Hello"); M5.Lcd.setCursor(0, 20); M5.Lcd.println("World"); } else { // ボタンが押されていない // 背景色 黒で塗りつぶす auto bgColor = M5.Lcd.color888(0, 0, 0); M5.Lcd.fillScreen(bgColor); } M5.Display.endWrite(); }
88. • コードのビルドとM5へのアップロードを行 い、動作確認を行う。 1. VSCodeでプロジェクトを作成する。 2. コーディング 3. コードのビルドとM5へのアップロードを行い、動作確認を行う。 1. M5とPCを接続し、アップロードを行う。 「→」のマークをクリックする。ビルドとアップロードを行う。 2. アップデートが成功すれば下記の表⽰となる。 M5本体がリセットされ書き込んだソフトウェアが起動する。 ※M5Stackの場合はプツっと 音が鳴るが正常動作 Hello World Hello World 3. 動作確認を行う。 M5StackBasicの場合は本体左ボタン、M5StickC/Plusの場合はLCD下のボタン ※PROJECT TASK Uploadでも可能
89. ハンズオン • サンプルソース • Handson_sourcecodeフォルダ参照 • Handson_LCDBUTTON
90. M5 Stack USB Type-C ケーブル ソースコード ファームウェア コンパイラ ツールチェーン 三 ESP32 M5 Stick C ファームウェアを書き込む （ESP32に書き込む） ファームウェアのアップロード • UIFlowと異なりファームウェアがM5に書き込まれる • ライブラリ等のビルド時間とファームウェアの転送に時間を要する ビルドされたファームウェアがある場所 [プロジェクト]/.pio/build/[env name]/firmware.bin 解説
91. コードにあるSetup()とLoop() • 「Framework：Arduino」で開発する場合2つの関数を記載 • setup() • 初期化。M5が起動/リセット後に1度のみ実行。 • loop() • 繰り返す。Setup()後に実行。 • ArduinoがProcessing[1]を元にしたためこの記法となっている。 • “Arduino framework”のコード記法は2つの関数を必ず記載 • 他Frameworkに“ESP-IDF” • FreeRTOSによる開発となる。 [1] https://processing.org/ (accessed 2024/1/21), [2] https://github.com/espressif/esp-idf (accessed 2024/1/21) 解説
92. #include <Arduino.h> #include <M5Unified.h> void setup() { // 初期化 auto cfg = M5.config(); M5.begin(cfg); } void loop() { // ボタン入力を更新するために呼び出す M5.update(); M5.Display.startWrite(); if (M5.BtnA.isPressed()) { // ボタンが押されている // 文字色とフォントサイズ auto fColor = M5.Lcd.color888(255, 255, 255); M5.Lcd.setTextColor(fColor); M5.Lcd.setTextSize(2); // 描画 M5.Lcd.setCursor(0, 0); M5.Lcd.println("Hello"); M5.Lcd.setCursor(0, 20); M5.Lcd.println("World"); } else { // ボタンが押されていない // 背景色 黒で塗りつぶす auto bgColor = M5.Lcd.color888(0, 0, 0); M5.Lcd.fillScreen(bgColor); } M5.Display.endWrite(); } setup()冒頭で実施 M5のデバイスの初期化 キー入力状態取得のための更新 LCD表示の準備 startWrite()〜endWrite()の間にLCDを書き込む関数を書き込む M5Unified固有の関数 [1] https://docs.google.com/presentation/d/1a_PSTQC-5HFejekAp_ExxMcwR8apyax_pxPR6dsnbnY/ (accessed 2024/1/21) フォント色・サイズ の設定 文字の書き込み位置 文字の出力 キーが押されている間 True ※startWrite(), endWrite()は[1]参照 無駄な処理を省いている。 解説 ⿊で塗りつぶす （＝画面クリア） ※M5Unifiedを使った恩恵はあまり無いコード
93. [1] https://docs.google.com/presentation/d/1a_PSTQC-5HFejekAp_ExxMcwR8apyax_pxPR6dsnbnY/ (accessed 2024/1/21) M5Unifiedによるボタン定義と状態の取得 • ボタン定義：“Btn[A/B/C/PWR/Ext]”がM5毎に事前定義 • ボタン状態：押している、話している、押した、離された等がある • 多数の状態（ダブルクリックなど）がある。[1]資料参照。 解説
94. ※参考 準備編を行う事で省略したこと • 開発環境をPlatformIOにインストール。準備編は自動で実施。 • 手動で行う場合、PIO Home->Platforms->Embedded->Espressif 32 導入 [env:m5stick-c] ～略～ platform = espressif32 ～略～ “platform.ini”に下記記述があれ ば自動的に最新のEspressif 32が インストールされる。 1. Platforms->Embeddedをクリック 2. 「Espressif」を検索キーに入れる 3. 「Espressif 32」をクリックし、 「Install」をクリック 解説
95. [1] https://lang-ship.com/blog/work/m5unified-1/#toc22 (accessed 2024/1/7) ; PlatformIO Project Configuration File ; ; Build options: build flags, source filter ; Upload options: custom upload port, speed and extra flags ; Library options: dependencies, extra library storages ; Advanced options: extra scripting ; ; Please visit documentation for the other options and examples ; https://docs.platformio.org/page/projectconf.html [env:m5stick-c] platform = espressif32 board = m5stick-c framework = arduino PlatformIOのBoard M5シリーズ m5stack-atom ATOM LITE m5stack-atom ATOM MATRIX m5stack-atom ATOM ECHO m5stack-atom ATOM U m5stack-core-esp32 BASIC m5stack-grey GRAY m5stack-core-esp32 M5GO m5stack-fire FIRE m5stack-core2 CORE2 m5stack-core2 CORE2 for AWS m5stack-coreink CORE.INK (m5stick-c) M5PAPER m5stick-c M5StickC (m5stick-c) M5StickC PLUS (m5stack-core2) TOUGH m5stack-station STATION 485 m5stack-station STATION BAT m5stack-atoms3 AtomS3 m5stack-atoms3 AtomS3 Lite (esp32-s3-devkitc-1) CORES3 (m5stick-c) STAMP PICO (esp32-c3-devkitc-02) STAMP C3 (esp32-c3-devkitc-02) STAMP C3U m5stack-stamps3 StampS3 m5stack-atom Atom Display m5stack-atom Atom Display Lite (m5stick-c) Timer CAM (m5stick-c) Unit CAM (m5stick-c) PoE CAM platform.iniのWORKINGセクションの “board”を変更する。 M5シリーズと”platform.ini” boardの対応 [1]を元に改変 [env:m5stack-core2] platform = espressif32 board = m5stack-core2 framework = arduino [env:m5stack-core-esp32] platform = espressif32 board = m5stack-core-esp32 framework = arduino M5Stack BASIC/GOからCore2に変更してビルドする場合 「board」を「m5stack-core2」に変更 ※参考 異なるM5への対応 env:◦◦も同じにしておく
96. （ゆるい）まとめ • VSCode＋PlatformIOを用いた開発方法と流れ • プロジェクト作成 • “platform.ini”による開発環境構築、ライブラリ管理 • コーディング、ビルド、アップロード • Arduino frameworkの記法 setup()、loop()の役割 • M5Unifiedを用いたLCD、ボタン制御
97. ハンズオン②PCとシリアル通信 • 作るもの • ボタンを押したときにPC側に”PushBtn”をシリアル通信で送信する。 • 狙い • M5のデバッグ。シリアル通信でprintfデバッグはよく行われる。 • センサーで計測した値をPCに送り記録する。ロガーなど。 Hello World Hello World PushBtn PushBtn PushBtn
98. 1. プロジェクトを新規作成 2. 前回のLCDとボタンのコードが実行できるようにする。 3. シリアル通信のコードを追加する。ビルドとアップロードを行う。 // 文字色とフォントサイズ auto fColor = M5.Lcd.color888(255, 255, 255); M5.Lcd.setTextColor(fColor); M5.Lcd.setTextSize(2); // 描画 M5.Lcd.setCursor(0, 0); M5.Lcd.println("Hello"); M5.Lcd.setCursor(0, 20); M5.Lcd.println("World"); } else { // ボタンが押されていない // 背景色 黒で塗りつぶす auto bgColor = M5.Lcd.color888(0, 0, 0); M5.Lcd.fillScreen(bgColor); } M5.Display.endWrite(); // 連続送信を防ぐため100ms止まる delay(100); } #include <Arduino.h> #include <M5Unified.h> void setup() { // 初期化 auto cfg = M5.config(); M5.begin(cfg); // シリアル通信の初期化 Serial.begin(9600); } void loop() { // ボタン入力を更新するために呼び出す M5.update(); M5.Display.startWrite(); if (M5.BtnA.isPressed()) { // ボタンが押されている // シリアル通信で "PushBTN" と改行を送信 static int count = 0; Serial.printf("PushBTN : %d¥n", count++);
99. 4. PlatformIOのSerial Monitorを起動する。 ↓シリアルモニタが立ち上がる Hello World Hello World 5. M5のBtnAをクリックし、M5から送られたシリアル通信を確認する。 使い終わったら ターミナル上でCtrl+C または ターミナルを終了する。
100. ハンズオン • サンプルソース • Handson_sourcecodeフォルダ参照 • Handson_BTNwithSerial
101. // 文字色とフォントサイズ auto fColor = M5.Lcd.color888(255, 255, 255); M5.Lcd.setTextColor(fColor); M5.Lcd.setTextSize(2); // 描画 M5.Lcd.setCursor(0, 0); M5.Lcd.println("Hello"); M5.Lcd.setCursor(0, 20); M5.Lcd.println("World"); } else { // ボタンが押されていない // 背景色 黒で塗りつぶす auto bgColor = M5.Lcd.color888(0, 0, 0); M5.Lcd.fillScreen(bgColor); } M5.Display.endWrite(); // 連続送信を防ぐため100ms止まる delay(100); } #include <Arduino.h> #include <M5Unified.h> void setup() { // 初期化 auto cfg = M5.config(); M5.begin(cfg); // シリアル通信の初期化 Serial.begin(9600); } void loop() { // ボタン入力を更新するために呼び出す M5.update(); M5.Display.startWrite(); if (M5.BtnA.isPressed()) { // ボタンが押されている // シリアル通信で "PushBTN" と改行を送信 static int count = 0; Serial.printf("PushBTN : %d¥n", count++); シリアル通信の初期化 引数が通信速度。 デバイス同士で合わせる必要がある。 書式設定で文字整形 文字をシリアル通信で送信 解説 loop()は高速に実行 意図的に止めている ボタンが 押されているとき
102. シリアル通信 • シンプルなデータ通信方法 • シリアル通信は送信・受信で計２本による通信方法 • 通信速度を合わせる必要有り • ハンズオンではM5、シリアルモニターともに9600 bps • “platfom.ini”に記載がない場合、PC側は9600 bps • 有線（BLE Serialもあるが一般なのは有線） • 応用（[2][3]資料参照） • 効率化のためにバイナリで送る。 • チェックサムなど通信プロトコルを作るなどがある。 解説 [1] https://docs.platformio.org/en/latest/projectconf/sections/env/options/monitor/monitor_speed.html (accessed 2024/1/21) [1] Lチカで終わらせないArduino シリアル通信 Part1, https://speakerdeck.com/tomit3/ltikadezhong-warasenaiarduino-siriarutong-xin-part1 (accessed 2024/1/21) [2] Lチカで終わらせないArduino シリアル通信 Part2, https://speakerdeck.com/tomit3/ltikadezhong-warasenaiarduino-siriarutong-xin-part2 (accessed 2024/1/21) 例：ヘッダーにチェックサムを 入れ、受信先でデータが正しい か確認が出来る[3] [env:m5stack-core-esp32] 略 monitor_speed = 115200 略 PC側のシリアル通信速度は “platfom.ini”の、 monitor_speedで変更可能[1]
103. （ゆるい）まとめ • M5とPCのシリアル通信 • M5からPCへ、PCからM5へ通信が可能。 • シリアル通信は対象デバイスの通信速度を合わせる。
104. ハンズオン③M5にWiFi経由でデータ送信 • 作るもの • PCからWiFi経由でM5にデータをUDPで送信する。 • UDP ポート番号 12345 • ‘1’で”HelloWorld”を表⽰する。’2’で背景⾊を変える。 • 狙い • WiFiを用いた通信を行う。 Hello World Hello World WiFi
105. 1. プロジェクトを新規作成 2. M5に接続可能なWiFiのSSID、パスワードを準備する。 3. 下記のコードをビルド、アップロードする。 void loop() { // WiFiが接続されていない場合はloopを回す if (WiFi.status() != WL_CONNECTED) { return; } // UDP 受信 int rcvPacketSize = udp.parsePacket(); if (rcvPacketSize) { // UDP 1バイト受信 char receivedData = 0; auto nokoriBufferlen = udp.read(&receivedData, 1); // UDP 受信後 バッファをクリア udp.flush(); // 黒背景 M5.Lcd.startWrite(); M5.Lcd.fillScreen(TFT_BLACK); #include <Arduino.h> #include <M5Unified.h> #include <WiFi.h> #include <WiFiUdp.h> const char *ssid = ""; // Wi-FiのSSID const char *password = ""; // Wi-Fiのパスワード WiFiUDP udp; unsigned int localUdpPort = 12345; void setup() { // 初期化 auto cfg = M5.config(); M5.begin(cfg); // WiFiの初期化 WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); M5.Lcd.print("."); } M5.Lcd.println("Connected!"); // IPアドレス表示 IPAddress ip = WiFi.localIP(); M5.Lcd.println("IP Address:"); M5.Lcd.println(ip); // UDPサーバーを開始 udp.begin(localUdpPort); } // 受信データにより処理を変更 if (receivedData == '1') // 0x31 = 49 { // 文字色とフォントサイズ M5.Lcd.setTextColor(TFT_WHITE); M5.Lcd.setTextSize(2); // 描画 M5.Lcd.setCursor(0, 0); M5.Lcd.println("Hello"); M5.Lcd.setCursor(0, 20); M5.Lcd.println("World"); } else if (receivedData == '2') // 0x31 = 49 { M5.Lcd.fillScreen(TFT_BLUE); } M5.Lcd.endWrite(); } delay(10); }
106. 4. IPアドレスを調べる。 M5のLCDに表⽰されたIPアドレス、モバイルホットスポットで接続されたIPアドレス 5. M5にUDP通信で’1’、’2’を送るためにPowerShellのスクリプトを用いる。 下記のコードを「sendUDPPacket.ps1」として保存する（「¥UDPパケットを送るスクリプト」にあり） param ( [Parameter(Mandatory=$true)] [string]$ipAddress, [Parameter(Mandatory=$true)] [int]$port, [Parameter(Mandatory=$true)] [string]$message ) # IPアドレスとポート番号 $endpoint = New-Object System.Net.IPEndPoint ([System.Net.IPAddress]::Parse($ipAddress), $port) $udpclient = New-Object System.Net.Sockets.UdpClient $byteData = [Text.Encoding]::ASCII.GetBytes($message) $udpclient.Send($byteData, $byteData.Length, $endpoint) $udpclient.Close() ESP◦◦ 192.168.1.100 ◦◦: 6. コマンドプロンプトまたはPowerShellでスクリプトを保存し た場所に移動する。 >cd [スクリプトがあるフォルダ位置] 7. スクリプトを実行し、M5へUDPでデータを送る。 ・’1’を送る場合 >powershell .¥sendUDPPacket.ps1 [IPアドレス] 12345 1 ・’2’を送る場合 >powershell .¥sendUDPPacket.ps1 [IPアドレス] 12345 2
107. ハンズオン • サンプルソース • Handson_sourcecodeフォルダ参照 • Handson_M5WiFiRcvHellorWorld
108. void loop() { // WiFiが接続されていない場合はloopを回す if (WiFi.status() != WL_CONNECTED) { return; } // UDP 受信 int rcvPacketSize = udp.parsePacket(); if (rcvPacketSize) { // UDP 1バイト受信 char receivedData = 0; auto nokoriBufferlen = udp.read(&receivedData, 1); // UDP 受信後 バッファをクリア udp.flush(); // 黒背景 M5.Lcd.startWrite(); M5.Lcd.fillScreen(TFT_BLACK); #include <Arduino.h> #include <M5Unified.h> #include <WiFi.h> #include <WiFiUdp.h> const char *ssid = ""; // Wi-FiのSSID const char *password = ""; // Wi-Fiのパスワード WiFiUDP udp; unsigned int localUdpPort = 12345; void setup() { // 初期化 auto cfg = M5.config(); M5.begin(cfg); // WiFiの初期化 WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); M5.Lcd.print("."); } M5.Lcd.println("Connected!"); // IPアドレス表示 IPAddress ip = WiFi.localIP(); M5.Lcd.println("IP Address:"); M5.Lcd.println(ip); // UDPサーバーを開始 udp.begin(localUdpPort); } // 受信データにより処理を変更 if (receivedData == '1') // 0x31 = 49 { // 文字色とフォントサイズ M5.Lcd.setTextColor(TFT_WHITE); M5.Lcd.setTextSize(2); // 描画 M5.Lcd.setCursor(0, 0); M5.Lcd.println("Hello"); M5.Lcd.setCursor(0, 20); M5.Lcd.println("World"); } else if (receivedData == '2') // 0x31 = 49 { M5.Lcd.fillScreen(TFT_BLUE); } M5.Lcd.endWrite(); } delay(10); } 解説 UDP通信開始 WiFi接続 UDPでデータを受信 バッファのデータ有無で判断 1バイトデータ受信後 バッファクリア（必須） ‘1’という文字列 ASCIIコードで49という数字と等価
109. 解説 WiFi通信 • シリアル通信と異なる無線による通信 • WiFiと同じネットワークに接続しているPCと通信 • ネットワークプロトコル（TCP、UDP）[1]による通信 • シリアル通信には無かった通信の共通ルール。 • TCPは送信を保証、UDPは到達の保証無し（即時、多数向け） • M5はTCP、UDPでの通信対応可能 • 今回はM5がサーバー、PCがクライアントの構成。その逆も可能。 WiFi サーバー クライアント 例：IPアドレス 192.168.1.100 例：IPアドレス 192.168.1.101 M5がWEBサーバーになる事も可能 M5がWiFiのアクセスポイントになる事も可能 ソフト次第 [1] https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%83%BB%E3%83%97%E3%83%AD%E3%83%88%E3%82%B3%E3%83%AB%E3%83%BB%E3%82%B9%E3%82%A4%E3%83%BC%E3%83%88 (accessed 2024/1/10)
110. （ゆるい）まとめ • M5とPCでWiFiを用いたネットワーク通信が可能 • M5がサーバー、PCがクライアントまたはその逆の構成も可能
111. ハンズオン④LINE Notifyを用いた通知 • 作るもの • ボタンを押したときにLINEに”PushBtn”とメッセージ通知する。 • 狙い • 身近な通知デバイスとしてスマホのLINEを使う。 • WebAPIを使用しM5とWEBサービス連携
112. LINE Notify APIについて • LINE Notify API[1] • LINEが公開しているWeb APIで、LINEへの通知に特化。 • トークルームにトークン発行（１：１、複数人がいるトークルームなど） • トークンはLINE 1IDにつき100トークンまで発行可能 • APIの呼び出し制限 1000回/h • 他に Message API がある。[3] • Notify APIと異なりメッセージに対して呼応などが可能 • Power ShellのcurlをLINE通知可能[4] • 下記のコマンド >curl –X POST –H “Authorization: Bearer [取得トークン]” -F “message= [メッセージ]" https://notify-api.line.me/api/notify [1] https://notify-bot.line.me/ja/ (accessed 2023/10/30), [2] https://notify-bot.line.me/doc/ja/ (accessed 2024/1/21) [3] https://developers.line.biz/ja/services/messaging-api/ (accessed 2024/1/25) [4]コマンドラインから LINE にメッセージを送れる LINE Notify, https://engineering.linecorp.com/ja/blog/using-line-notify-to-send-messages-to-line-from-the-command-line (accessed 2023/10/30)
113. LINE Notifyのアクセストークン取得 • LINE Notifyのトークン取得 • 下記WEBページからLINE IDでログイン （QRコードログインが手軽） • https://notify-bot.line.me/ja/ • 画面右上から マイページ->アクセストークンの発行 ・トークン名 （LINEで表⽰される名前） ・トークルームを選択/入力 「1:1〜」を選択して、 アクセストークンを発行する。
114. 1. プロジェクトを新規作成 2. M5に接続可能なWiFiのSSID、パスワードを準備する。 3. 下記のコードをビルド、アップロードする。 void loop() { M5.update(); // WiFiが接続されていない場合はloopを回す if (WiFi.status() != WL_CONNECTED) return; // ボタン確認 if (M5.BtnA.wasPressed()) { HTTPClient http; // メッセージ String myMessage("PushBtn"); // POST http.begin(LINE_NOTIFY_URL); http.addHeader("Authorization", "Bearer " + String(LINE_NOTIFY_TOKEN)); http.addHeader("Content-Type", "application/x-www-form-urlencoded"); int httpCode = http.POST("message=" + myMessage); String payload = http.getString(); M5.Lcd.fillScreen(TFT_BLACK); M5.Lcd.setCursor(0, 0); M5.Lcd.println(payload); http.end(); } // M5リセット if (M5.BtnB.wasPressed()) ESP.restart(); delay(10); } #include <Arduino.h> #include <M5Unified.h> #include <WiFi.h> #include <HTTPClient.h> const char *ssid = ""; // Wi-FiのSSID const char *password = ""; // Wi-Fiのパスワード // LINE Notify URL const char *LINE_NOTIFY_URL = "https://notify-api.line.me/api/notify"; // LINE Notifyのトークン const char *LINE_NOTIFY_TOKEN = "LINENotyfiから入手したトークンを入れる"; void setup() { // 初期化 auto cfg = M5.config(); M5.begin(cfg); // WiFiの初期化 WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); M5.Lcd.print("."); } M5.Lcd.println("Connected!"); // IPアドレス表示 IPAddress ip = WiFi.localIP(); M5.Lcd.println("IP Address:"); M5.Lcd.println(ip); }
115. ハンズオン • サンプルソース • Handson_sourcecodeフォルダ参照 • Handson_LINENotify
116. 解説 WEB API • TCP/UDPより上位のHTTPプロトコルを使用した通信 • HTTPプロトコルのPOSTメソッドを用いてLINEサーバーにデータ送信 • 様々な企業がWEB APIを公開 • 天気予報、時刻調整（NTPプロトコルによる）、 Google Apps Script（M5からスプレッドシートに書き込み可能） • IFFFT（WEBサービスの連携） 略 // POST http.begin(LINE_NOTIFY_URL); http.addHeader("Authorization", "Bearer " + String(LINE_NOTIFY_TOKEN)); http.addHeader("Content-Type", "application/x-www-form-urlencoded"); int httpCode = http.POST("message=" + myMessage); String payload = http.getString(); 略
117. （ゆるい）まとめ • HTTPプロトコルを用いた通信が可能 • WEB APIを利用することで様々な機能拡張が可能
118. （参考） ChatGPTを用いたM5開発支援
119. ChatGPTとM5の開発 • コーディング支援タスクの１つとしてM5にも使用可能 • ChatGPTは資料[1]が分かりやすい • ChatGPTとプロトタイピング⇒相性が良い[2]（発表者の主観あり） • アイデアを形にするまでの「しきい値」が下がる（◦◦を調べないと・・・が減る）。 早々に形にするPoCやプロトタイピングに有用と思う。 • 今回のハンズオンコードでも使用 • ChatGPTをはじめとして生成AIで気を付けること • 正しそうな返答（幻覚）をするため、前提知識/ドメイン知識は必須 • 正しさを判断できる知識は必要 • 正しく適切な要求定義、要件定義と言語化力 • プロンプトエンジニアリングにより幻覚を出しにくく、適切な返答を狙う [1]明治大学理工学部 特別講義: 2023年のAIの大事な話 - ChatGPT を知ろう -, https://speakerdeck.com/dahatake/ming-zhi-da-xue-li-gong-xue-bu-te-bie-jiang-yi-2023nian-noainoda-shi-nahua-chatgpt-wozhi-rou?slide=51 (accessed 2024/1/21) [2]ChatGPTでモノづくりを支援してもらった話, https://speakerdeck.com/tomit3/chatgptdemonodukuriwozhi-yuan-sitemoratutahua?slide=47 (accessed 2024/1/21)
120. ChatGPTとM5の開発 • LLMは大量のテキストデータを元に学習しているため、抽象的 な問いかけは学習元データから頻度が高い回答を生成する。 • 開発支援（コーディングのタスク）においては行いたいことを 仕様として加え絞っていく。 • ハードウェア • 使用するHW • システム構成 など • ソフトウェア • 使用するライブラリ • 使用する環境 • 使用する開発言語 など
121. 主要なAIチャット 2024/1月現在 • ChatGPT • https://chat.openai.com/ • 有償である「GPT-4」は他のLLM性能ベンチマークになっている。 • Bard AI Chat • https://bard.google.com/ • 2024/2/2から日本語でも最新モデルGEMINIが使用できるようになった。 • Claude AI Chat • https://claude.ai/chats • Copilot(BING AI Chat) • https://copilot.microsoft.com/
122. プロンプトエンジニアリング例 • 深津式汎用プロンプト[1][2] • 役割と何をしたいかを冒頭に書く、仕様（制約条件）箇条書きにする [1] https://www.youtube.com/watch?v=ReoJcerYtuI&ab_channel=note (2023/3/27) [2] https://delaymania.com/202302/webservice/chatgpt-fukatsu-prompt/ (2023/3/27) 下記の仕様を満たす回路図を作成してください。 ## 仕様 1. LEDを点滅させる。 1. タイマIC 555を使用する。 1. 電源電圧は5V USBから供給する。 1. 抵抗の定数は適切な抵抗値としてください。 2023/3月 検討時資料
123. ChatGPT+IoT with M5 • 題目：M5StickCの加速度をサーバーに送る • クライアント M5StickC • サーバー WindowsPC • クライアント • M5StickC内の加速度（Z軸）を取得 • サーバーに1秒毎に送る • サーバー • WindowsPCでPythonコード • クライアントから送られた値を出力する • クライアントとサーバーは同一ネットワーク • ポートは8888 WiFi (WindowsPCをホットスポット） M5StickC WindowsPC WiFi WiFi MPU6886 加速度センサ 2023/3月 検討時資料
124. M5StickCとPCを用いてデータを送受信するシステムを開発します。下記クラ イアント仕様とサーバー仕様を満たすクライアントとサーバーのコードを作成 してください。 ## クライアント仕様 1. クライアントのコードはArduino（PlatformIOを用いる）で書く。 1. M5StickCの加速度センサー（MPU6886）のZ軸を読み取る。 1. 加速度は1秒毎に読み取る。 1. M5StickCのwifiを使用して同一ネットワーク内にあるサーバーに送信する。 1. 接続状態はLCDに表⽰してください。 1. 計測した加速度をLCDに表⽰してください。 1. 使用するポートは8888です。 ## サーバー仕様 1. サーバー側のコードはPythonを使用する。 1. サーバーは起動してクライアント側の通信が来るまで待機します。 1. クライアントから送られた値を受信してコンソールに随時表⽰する。 1. サーバーは同一ネットワークにあるWindowsのPCになります。 1. サーバーはキーボードのQ+Enterキーの入力で切断とサーバーを終了する。 1. 使用するポートは8888です。 ChatGPT+IoT with M5 • ChatGPT 依頼文 • 返答結果 • クライアント側コードは ビルド時にエラー。修正が必要 • サーバー側コードは 動作するが修正が必要 2023/3月 検討時資料
125. 返答結果 2023/3月 検討時資料
126. #include <M5StickC.h> #include <WiFi.h> #include <WiFiClient.h> const char* ssid = "your_SSID_here"; const char* password = "your_PASSWORD_here"; const char* serverAddress = "your_SERVER_IP_here"; const int serverPort = 8888; WiFiClient client; void setup() { M5.begin(); M5.Lcd.setRotation(3); M5.Lcd.fillScreen(BLACK); M5.Lcd.setTextColor(WHITE, BLACK); M5.Lcd.setTextSize(1); Serial.begin(115200); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); } M5.Lcd.println("Connected to WiFi!"); M5.Lcd.println("Connecting to server..."); while (!client.connect(serverAddress, serverPort)) { delay(500); } M5.Lcd.println("Connected to server!"); } void loop() { float acceleration = M5.IMU.getAccZ(); M5.Lcd.setCursor(0, 20); M5.Lcd.printf("Acceleration (Z): %.2f m/s^2", acceleration); client.print(acceleration); client.flush(); delay(1000); } #include <M5StickC.h> #include <WiFi.h> #include <WiFiClient.h> 略 void setup() { 略 Serial.begin(115200); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); } M5.Lcd.println("Connected to WiFi!"); M5.Lcd.println("Connecting to server..."); while (!client.connect(serverAddress, serverPort)) { delay(500); } M5.Lcd.println("WiFi connected."); M5.Lcd.print("IP address: "); M5.Lcd.println(WiFi.localIP()); M5.IMU.Init(); M5.Lcd.println("Connected to server!"); delay(3000); } void loop() { M5.Lcd.fillScreen(TFT_BLACK); float accel_x = 0.0; float accel_y = 0.0; float accel_z = 0.0; M5.IMU.getAccelData(&accel_x, &accel_y, &accel_z); M5.Lcd.setCursor(0,0); M5.Lcd.printf("Acceleration (Z): %.2f m/s^2", accel_z); client.print(accel_z); client.flush(); delay(1000); } ・IPアドレス表⽰ ・IMU 初期化 ・加速度取得 修正 クライアント側コード 表⽰ 2023/3月 検討時資料
127. import socket HOST = '' # 全てのネットワークインターフェースで接続を受け付ける PORT = 8888 # 使用するポート番号 with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as server_socket: server_socket.bind((HOST, PORT)) # サーバーを指定のIPアドレスとポート番号にバインドする server_socket.listen() # 接続を受け付ける準備をする print(f"Server is running on port {PORT}...") # クライアントからの接続を待つ connection, address = server_socket.accept() print(f"Connected by {address}") # クライアントからのデータを受信して表示する while True: data = connection.recv(1024) if not data: break print(f"Received: {data.decode('utf-8')}") # 接続を切断する connection.close() print("Connection closed.") ⇒サーバーで受信したタイミングで出力 VSCode ターミナルは下記のように出力 サーバー側コード 2023/3月 検討時資料
128. ChatGPT+IoT with M5 • まとめて表⽰できるようにクライアントとサーバー側を修正 • 改行コードをデリミタ（区切り）にする。デリミタまで受信・出力する修正 コードを修正してください。 現在のコードでは1行毎に値が出力 されています。クライアントから送られたデータをまとめて出力 するようにしてください。 * クライアント側で加速度と改行コードを付けて送信する。 * サーバー側は改行コードまでコンソールに文字列を出力する。 ChatGPT 依頼文 2023/3月 検討時資料
129. #include <M5StickC.h> #include <WiFi.h> #include <WiFiClient.h> 略 void setup() { 略 Serial.begin(115200); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); } M5.Lcd.println("Connected to WiFi!"); M5.Lcd.println("Connecting to server..."); while (!client.connect(serverAddress, serverPort)) { delay(500); } M5.Lcd.println("WiFi connected."); M5.Lcd.print("IP address: "); M5.Lcd.println(WiFi.localIP()); M5.IMU.Init(); M5.Lcd.println("Connected to server!"); delay(3000); } void loop() { M5.Lcd.fillScreen(TFT_BLACK); float accel_x = 0.0; float accel_y = 0.0; float accel_z = 0.0; M5.IMU.getAccelData(&accel_x, &accel_y, &accel_z); M5.Lcd.setCursor(0,0); M5.Lcd.printf("Acceleration (Z): %.2f m/s^2", accel_z); client.print(accel_z); client.print('¥n'); client.flush(); delay(1000); } import socket HOST = '' # 全てのネットワークインターフェースで接続を受け付ける PORT = 8888 # 使用するポート番号 with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as server_socket: server_socket.bind((HOST, PORT)) # サーバーを指定のIPアドレスとポート番号にバインドする server_socket.listen() # 接続を受け付ける準備をする print(f"Server is running on port {PORT}...") # クライアントからの接続を待つ connection, address = server_socket.accept() print(f"Connected by {address}") # クライアントからのデータを受信して表示する data_buffer = "" # 受信したデータを一時的に格納するためのバッファ while True: data = connection.recv(1024) if not data: break data_buffer += data.decode('utf-8') # 改行が含まれるかチェックし、改行が含まれている場合は受信したデータを出力する if '¥n' in data_buffer: lines = data_buffer.split('¥n') for line in lines[:-1]: # 最後の行は改行のみであるため、出力しない print(f"Received: {line}") data_buffer = lines[-1] # 最後の行はバッファに残す # 接続を切断する connection.close() print("Connection closed.") クライアント側 コード サーバー側 コード 改行コードを送信 改行コードまで出力 修正したサーバーコードの出力 2023/3月 検討時資料
130. VSCodeの拡張機能 • VSCodeからLLMを呼び出す「Genie AI」 • VSCodeからChatGPTを使用できる。 • Open AIのAPI KEY（有料）でGPT-4が使用できる。 例：コードからコメントを付与 他にも、 コードの最適化 バグ発見 などがある。 ※ポイント 設定で「日本語でお願いします」 を加えると日本語が出てくる。
131. まとめ
132. シリアルポート（USB） Bluetooth プロファイルでシリアル、マウス/キーボードなど WiFi(2.4GHz) ハンズオンで紹介した機能はM5の一部 無線 有線 受信 送信 −（ハンズオン未実施） ボタン押下の通知とコンソール表示 シリアル通信 −（ハンズオン未実施） −（ハンズオン未実施） TCP PCからUDPのデータ送信とM5で受信 −（ハンズオン未実施） UDP −（ハンズオン未実施） LINE Notifyを使った例 HTTP/NTPなど −（ハンズオン未実施） −（ハンズオン未実施） Bluetoothシリアル “通信”機能だけでも一部 M5が持つ外部インターフェース
133. ハンズオンで紹介した機能はM5の一部 • 拡張ユニットなどを用いると様々なことが出来る • 家電制御（赤外線LED使用） • アクチュエータ • モーター駆動など • スピーカーで音、声を鳴らす • 音声認識なども • センサーを用いた開発 • 温度・湿度・気圧、CO2、PM2.5、9軸IMU（加速度、角速度、磁束方向）など
134. 身近な“ちょっと”したことをM5で 簡単にする/解決する/便利にしようを考えてみる • Lチカ/”HelloWorld”の表⽰ • Lチカ/”HelloWorld”の表⽰は環境構築の確認、開発の入り口に立ったこと を意味する。極端な使い方をしなければLチカ/”HelloWorld”そのもので便 利になる事は無い。 • 思いついたら形にしてみる プロトタイピング • “初めてエレクトロニクスに触れる初心者は、一からすべてを作り上げなく てはいけないと考えがちなのですが、それはエネルギーの無駄遣いという ものです。あなたにとっては大事なのは、自分のやる気が消えてしまう前 に、あるいは誰かがあなたにお金を払いたいと思ってくれているうちに、 すばやく何かを作り上げることのはずです。”[1] [1]Massimo Banzi著,船田 巧訳,Arduinoをはじめよう 第2版,株式会社オライリー・ジャパン,初版第1刷,p4
135. 身近な“ちょっと”したことをM5で 簡単にする/解決する/便利にしようを考えてみる • モノづくりはゆるくてもよい。 • 石川 大樹、ギャル電、藤原 麻里菜 著 • 雑に作る―電子工作で好きなものを作る近道集 • アイデア/モノづくりマインド、事例がまとめられた本 • 「サンプルコードは神からの贈り物」など表現が好み • アイディアを出す・温めてみる • 普段何気なくしていることを簡単にできないか？ • 身近なちょっとしたことを楽に/便利に出来ないか？ • ◦◦が出来たらいいのにな。
136. 身近な“ちょっと”したことをM5で 簡単にする/解決する/便利にしようを考えてみる • アイデアは突然降ってくるものでも、湧いてくるものではない • アイデアとは既存の要素の組み合わせ（＝新しい組み合わせ） • アイデアの作り方[1] • 資料集め 情報探索、知る、手を動かす • 資料整理 • 組み合わせ • 思いつく 無意識。点と点が結ばれる • アイデアのチェック 多数作ってその上澄みが良いアイデア [1]ジェームスWヤング, “アイデアの作り方” [2]https://www.u-tokyo.ac.jp/ja/about/president/b_message2023_03.html (accessed 2024/1/21) オンリーワンなモノはあなただけが出来る。 「いくつかの重要な分野の経験やスキルを、自分だけにユニークな組合せとして持っていて、それら を掛け算して問題解決に使えるのは自分だけという「オンリーワン」には、なることができます。」 [2] 東京大学 入学式 祝辞より ハンズオンでは M5の出来ることを知る ことに重き
137. 作る 見せる （公開/発 表など） 楽しい/新 しい刺激 [1]John Baichtal, 野中. "物を作って生きるには ―23人のMaker Proが語る仕事と生活" オライリージャパン, 2015 Making is Connecting[1] “つくる”と“つながる“は一見無関係と思 うもしれない。作ったモノを見せること でつながりが生まれる。 ”つくる”ことで 楽しい/新しい刺激が得られる（場合がある） 。 これは、他社にも伝播し、創造的なこと を行おうという意欲・雰囲気につながる。 このハンズオンがきっかけになればいいなと思っている事
138. M5を使ったオンリーワンなモノづくりを 始めてみてください。そして、作ったモノ を周りに見せたりしてみてください。 本ハンズオンが皆様の何かにお役に立てた ら幸いです。 ご清聴ありがとうございました
139. 参考文献・素材 • 参考文献 • 各ページに記載 • 素材 • https://icon-rainbow.com/ • https://www.irasutoya.com/
140. 注意事項・補足
141. M5製品を購入時の注意 • 電波を発す製品は技適マークがあるものを使用or申請 • “技適マークは、電波法令で定めている技術基準に適合している無線機であ ることを証明するマークで、個々の無線機に付けられています。”[1] • M5製品群はWiFiとBluetoothが使用できる。そのため、国内で使用する場合は技適が 通ったものを使用する。または申請する[2]。 • 技適を通したものは国内のECサイトから購入する。 • スイッチサイエンス社 • https://www.switch-science.com/ • マルツ電波 • https://www.marutsu.co.jp/ • 秋月電子 • https://akizukidenshi.com/catalog/c/cm5stack/ [1] https://www.tele.soumu.go.jp/j/adm/monitoring/summary/qa/giteki_mark/ (accessed 2024/1/20) [2] https://internet.watch.impress.co.jp/docs/column/shimizu/1258174.html (accessed 2024/1/20)
142. 公開されているコードを使用する時の注意 • 製品に取り込んだ場合・公開する場合はライセンスに注意する。 • 商用、公開する時に注意。個人使用（例：家で使用）は含まれない（であってる？） • オープンソースのライセンスには寛容なライセンスとコピーレフト のライセンスがある[1] • GPL v3[2] • コピーレフトライセンス ソースコードを公開する必要がある。 • MIT[3] • 寛容なライセンス 使用したことを提⽰する必要がある。 [1] https://www.hitachi-solutions.co.jp/sbom/sp/blog/2021100103/ (accessed 2024/1/20) [2] https://opensource.org/license/gpl-3-0/ (accessed 2024/1/20) [3] https://opensource.org/license/mit/ (accessed 2024/1/20)
143. クラウドサービスを利用する時の注意 • トークン、API KEYなどは不特定多数に漏らさない。 • 利用分課金されるなどリスクあり • 業務で利用（データ収集など）する場合はクラウドサービスの利 用可否と情報セキュリティのリスクアセスメントを行う • リスク低減策を行って使用するなど • データ漏洩、データ消失の可能性を考慮した上で利用する。 • 総務省 クラウドサービス利用上の注意点[1] [1] https://www.soumu.go.jp/main_sosiki/cybersecurity/kokumin/enduser/enduser_security02_06.html (accessed 2024/1/21)