M5Stackユーザーミーティング金沢 #2 『M5を使ったものづくりを社内で広げるためにオンラインでのハンズオンをした小話』

M5Stackユーザーミーティング金沢 #2での発表資料です。

・M5Stackユーザーミーティング金沢 #2
https://m5stack.connpass.com/event/307843

・ハンズオン資料『開発環境構築からはじめてLチカで終わらせないM5ハンズオン』
https://speakerdeck.com/tomit3/kai-fa-huan-jing-gou-zhu-karahazimeteltikadezhong-warasenaim5hanzuon

Transcript

1. M5を使ったものづくりを社内で広げるため にオンラインでのハンズオンをした小話 2024/2/10 初版 M5Stackユーザーミーティング金沢 #2
2. 今日の話す内容 • なぜM5のハンズオンを？行ったきっかけ • ハンズオンを行う上で考えたこと/失敗したことなど、同じよ うなハンズオンを企画・実施したい方向けへの参考情報
3. なぜM5のハンズオンを？ • 社内イベント/メーカースペースの一企画 • 「M5⾯⽩いな〜」⇒M5の⾯⽩さを伝えよう（≈推しの布教活動） • コミュニティの形成・活性化。この枠組み・仕組みは設計済。 • M5が出来ること・可能性を知ってもらい専門領域での利活用 • DX的な事を暗に期待。例：RPAをソフト外へ。HWと連携でプロセス改善など • ChatGPTを始めとした生成AIによるラピッドプロトタイピング • 従来は3Dプリンタなどハードウェア領域。生成AIの登場によりソフトウェ アも含めたプロトタイピングが加速。この流れは加速すると思う（主観有） • ロー/ノーコードとは異なりコードベースの開発とLLMは相性が良い。 [1] https://speakerdeck.com/tomit3/chatgptdemonodukuriwozhi-yuan-sitemoratutahua (accessed 2024/2/10) ２つに少し触れる⇒
4. 作る 見せる （公開/ 発表など） 楽しい/ 新しい刺激 Making is Connecting[1] “つくる”と“つながる“は一見無関係と思 うもしれない。作ったモノを見せること でつながりが生まれる。 ”つくる”ことで 楽しい/新しい刺激が得られる（場合がある） 。 これは、他社にも伝播し、創造的なこと を行おうという意欲・雰囲気につながる。 [1]John Baichtal, 野中. "物を作って生きるには ―23人のMaker Proが語る仕事と生活" オライリージャパン, 2015 [2]ワクワクする「ものづくり」の機会と環境を社員に提供！ https://designthinking-agile.jp.ricoh/n/n7781200ca016 (accessed 2024/2/10) [3]⼿を動かして⾃分の考えを形にすることで⾃分軸を鍛える！モノづくりの祭典「つくる〜むフェスティバル2023」とは, https://designthinking-agile.jp.ricoh/n/n4ee53ae940c3 (accessed 2024/2/10) ・社内メイカースペース[2] ・各種ワークショップ ・社内 発表イベント[3] ・MakerFaire、NT◦◦など ・個々人の業務の場 内発的動機 ※M5と関係なくすみませんorz
5. 生成AI（LLM）とM5 • M5のコーディングタスクとして検討（2023/3月当時）[1] • すぐに試作したい時には有効。 「モノづくりへの閾値」を下げた感。 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です。 [1] https://speakerdeck.com/tomit3/chatgptdemonodukuriwozhi-yuan-sitemoratutahua (accessed 2024/2/10)
6. というわけでハンズオンを企画 • 考えたこと • オンライン開催（発表者が遠方のため） • 現地参加に近いコンテンツ • ハイブリッド開催を見据える • Lチカ以外のハンズオン • 様々な機能を例を通して知る場 （M5Unifiedも（少し）触れる） • 想定参加者 • 何かしら開発経験がありM5は知 らない/名前を知っているを想定。 • M5の貸し出しをしよう！ • 開発環境構築も含めたハンズオンをや ろう！ • カメラを用意してハンズオンを実際に 見てもらおう！ • 相互参加できるネタも入れてみよう。 • M5のLCD、ボタン、ネットワーク機能 を使うハンズオンとしよう！ • UIFlowも触れてみよう！ • 生成AIも触れてみよう！ やってみたいこといっぱい😄！
7. というわけでハンズオンを企画 • 考えたこと • オンライン開催（発表者が遠方のため） • 現地参加に近いコンテンツ • ハイブリッド開催を見据える • Lチカ以外のハンズオン • 様々な機能を例を通して知る場 （M5Unifiedも（少し）触れる） • 想定参加者 • 何かしら開発経験がありM5は知 らない/名前を知っているを想定。 • M5の貸し出しをしよう！ • 開発環境構築も含めたハンズオンをや ろう！ • カメラを用意してハンズオンを実際に 見てもらおう！ • 相互参加できるネタも入れてみよう。 • M5のLCD、ボタン、ネットワーク機能 を使うハンズオンとしよう！ • UIFlowも触れてみよう！ • 生成AIも触れてみよう！ やってみたいこといっぱい😄！
8. ハンズオン中の手元を参加者に見せる • USBカメラは広角ではない。⼿元を見せるための取り付けが難しい • アクションカメラ＋三脚で解決。広角で高画質なUSBカメラとして使用 AKASO Brave7 LE を使用
9. 「考えたこと」を元にハンズオン資料を作る • 開発環境の構築、Lチカ以外のハンズオンを行う。 • 後から見直してもできるように図を多めにした。 • 約140枚となった。資料作りは楽しいが、作りすぎた。 コンテンツ • VisualStduioCodeとPlatformIOのインス トールと開発環境の構築 • ハンズオン UIFlowを用いてLCDチカ • ハンズオン①LCDとボタンを使う • ハンズオン②PCとシリアル通信 • ハンズオン③M5にWiFi経由でデータ送信 • ハンズオン④LINE Notifyを用いた通知 • （参考）ChatGPTを用いたM5開発支援
10. 「考えたこと」を元にハンズオン資料を作る • オンライン参加者との双方向なハンズオン LINE Notifyを用いた通知 事前準備のトークンで発表者スマホへ通知 UIFlow 「リモコン＋」 作成したURLを参加者に公開。発表者M5を参加者が操作
11. M5の貸し出し • 実際に体験してもらうため⼿元の M5Stack、M5StickCを貸出用に準備（6台） • しかし、、、 • 募集してみるとM5を持っている人が多かった（4人/6人中） • M5ユーザー多かった。。。 • 最終的にM5Stack Core2、M5StickCplus、M5Stack、M5StickCに対応 • 種類が増えたPlatformIO（ini変更）とM5Unified（コード同じ）で対応
12. 実際にハンズオンをやってみた • 今回はオンライン会議ツール oViceを使用 • ハンズオン資料とカメラ並べてみることが出来る。
13. 実際にハンズオンをやってみた • 準備は万全。順調にいく、、、
14. 実際にハンズオンをやってみた • 準備は万全。順調にいく、、、かなかった。 • 実際に起きたトラブル • ハンズオン中のビルドが遅くなった • oVice＋カメラ使用でCPU利用率がほぼ100%へ。 ビルドが非常に遅くなりハンズオンの時間配分に支障をきたす。 • 適宜カメラOFFや高速なWSなど対策が必要 • ハンズオン資料のボリューム • UIFlow 2例、PlatformIO 4例 ハンズオンとしては多すぎた。
15. まとめ • M5開発のハンズオンはオンラインでも出来る。 • ハンズオン資料はご⾃由にお使いください。 ハンズオンソースコードはMITライセンスで公開しています。 https://speakerdeck.com/tomit3/kai-fa-huan-jing-gou-zhu-karahazimeteltikadezhong-warasenaim5hanzuon