夏休みの課題にプログラミングの学習をしながらラジコンを作ろう !
市川 純
こんにちは、プロトタイピング ソリューション アーキテクトの市川 (@sparkgene) です。
我が家には小学生の子供がいるのですが、数年前からニュースでもたびたび取り上げられているように、小学校でのプログラミング教育の話がでております。このような職業についていることもあり、家でプログラミングを子供に教えろ圧がたびたび発生します。そんなこともあり、しばらく前から Scratch など利用して少しずつ触る機会を作ってきました。しかし、子供はなかなか集中力が続きません。そして私もやる気が続きません。
そこで、デバイスが有ったほうが子供 (私) が、興味を持って取り組むだろうと以下のようなニーズを満たすネタを考えてみました。
- Scratch のようなブロックを使ってプログラミングの勉強ができる
- デバイスを使う
- 完成後も遊べる
目次
1. 作るもの
2. プログラミングについて
3. プログラミングの準備
5-1. RoverC Hat の追加
5-2. AWS IoT Core のブロック
5-3. クラウドからのメッセージを表示する
5-4. デバイスにプログラムを転送
5-5. 動作確認
ご注意
本記事で紹介する AWS サービスを起動する際には、料金がかかります。builders.flash メールメンバー特典の、クラウドレシピ向けクレジットコードプレゼントの入手をお勧めします。
このクラウドレシピ (ハンズオン記事) を無料でお試しいただけます »
毎月提供されるクラウドレシピのアップデート情報とともに、クレジットコードを受け取ることができます。
1. 作るもの
先に挙げたニーズを満たしつつ、ブロックを使ったプログラミングができる物を探したら、M5Stack 社が自社で出しているデバイス向けの UIFlow という物を見つけ、さらに遊べるデバイスとして RoverC がちょうど良さそうでしたので、これを使ったラジコンを作ることを思いつきました。
読者の中にも 2020 年の re:Invent で公開された AWS IoT EduKit に興味を持って、M5Stack Core2 for AWS を購入した方もいらっしゃるかと思いますが、この記事ではそのデバイスをコントローラーとして利用します。
- ラジコン(必須)
- コントローラー (AWS IoT Core に他の方法でメッセージが送れるのであれば不要)
- Wi-Fi (2.4GHz) の接続環境
この記事の中で作成するラジコンのサンプルのソースはこちらからダウンロードしてください。
2. プログラミングについて
M5Stack 系では Arduino IDE や PlatformIO を使い、C 言語で書く事が多く、サンプルもたくさんあります。しかし、プログラミングに慣れていない人には少しハードルが高いと思います。また、MicroPython も使うことができますが、同じく慣れていない人がいきなり書くにはハードルが高いと思います。M5Stack では、UIFlow というプログラミングツールが提供されており、Blocky と呼ばれるビジュアル・プログラミングが可能です。
これであれば、ドラッグ & ドロップでプログラミングができ、Scratch を使ったことがあればすぐに理解することができます。UIFlow では MicroPython も利用可能であり、Blocky で作成したプログラムを MicroPython でも表示できるため、ビジュアル・プログラミングと一般的なコーディングを見比べることが出来、一般的なコーディングをする場合の参考になります。
3. プログラミングの準備
UIFlow では、PC に UIFlow の IDE をインストールして、M5Stack を USB でつないで利用する方法と、ブラウザ上でプログラミングができる UIFlow を利用し、インターネット経由で M5Stack にプログラムを転送する方法があります。
どちらの方法も、M5Burner を使って M5Stack Core2 と M5StickC に UIFlow 用のファームウエアをインストールして使います。
これらのツールは、頻繁にアップデートされるため、公式のサイト を参照しながらセットアップしてください。以降の手順では、以下の設定が終わっている前提で説明をしていきます。
- M5Burner で UIFlow 用のファームがデバイスにセットアップ済み
- USB モードが設定がされている (Web を利用する場合は Web モード)
- Wi-Fi の設定がされている
また、この記事執筆時のバージョンは、以下のバージョンを利用しています。
- UIFlow IDE v1.0.17
- ファームウエア
- UiFlow_StickC v1.7.8
- UIFlow_Core2 v1.7.8-core2
この記事では IDE の操作やビジュアル・プログラミングについて詳細に手順を紹介しませんので、初めて UIFlow に触れたりする場合は、IDE の操作に慣れるためにも、公式のドキュメントで HelloWorld が公開されていますので、お子さんと一緒に試してみるのをおすすめします。
4. AWS IoT Core の設定
RoverC をラジコンにすると言いましたが、どのように操作するかというと、デバイスを AWS IoT Core に接続させることで、リモートからの操作を行えるようにします。(ネットに繋がりさえすれば、地球の裏側から操作もできる ! )
この作業はお子さんではなく、親のかっこいいところを見せるという意味でも、ご自身がが作業をしましょう。もし、クラウドネイティブなお子さんに育てるのであれば、AWS のコンソールをお子さんに操作させるのもよいかと思います。
AWS IoT Core のコンソールで必要な作業は、以下のとおりです。
- AWS IoT Core のエンドポイントを確認
- Thing の作成 (Rover と指定)
- IoT Policy の作成
- 証明書の発行
AWS IoT Core の操作に慣れていない場合は、AWS IoT Core 初級ハンズオンの AWS IoT Core のセットアップ の手順を参考に進めてください。ダウンロードした証明書と秘密鍵は、それぞれ以下のように名前を変更します。(UIFlow で使えるファイル名の長さに制限があるため)
- 証明書
- ユニークな文字列-public.pem.key → r_cert.pem
- 秘密鍵
- ユニークな文字列-private.pem.key → r_key.pem
これで RoverC で利用する情報が準備できました。
次にコントローラーも作る場合は、AWS IoT Core のコンソールで、コントローラー用に以下の設定を繰り返します。(コントローラーを作成しない場合は、この手順は飛ばしてください)
- Thingの作成 (RoverController と指定)
- IoT Policy の作成
- 証明書の発行
証明書と秘密鍵の名前も以下のように変更します。
- 証明書
- ユニークな文字列-public.pem.key → rc_cert.pem
- 秘密鍵
- ユニークな文字列-private.pem.key → rc_key.pem
これで、コントローラーで利用する物が準備できました。
5. RoverC のプログラミング
ここからはデバイス側のプログラミングを進めます。ここからは手を出したい気持ちを抑えて、お子さんに作業をしてもらいましょう。
M5StackC を PC の USB につないで UIFlow の IDE を開きます。COM のところでデバイスを選択し、M5Stick デバイスを選択します。
クリックすると拡大します
5-1. RoverC Hat の追加
M5StickC から RoverC を操作するため、UIFlow IDE で Hat を選択し、“+” をクリックします。
クリックすると拡大します
RoverC にチェックを付け保存します。
クリックすると拡大します
これで、RoverC を操作するためのブロックが C-HAT > RoverC から利用できるようになります。
クリックすると拡大します
RoverC はメカナムホイールと呼ばれる複数のローラーが取り付けられたホイールを使っており、4 つのホイールの回転方向や、回転させないといった制御をすることで、前・後・左・右、左前、右前、左後ろ、右後ろ、左回転、右回転を行うことができます。また、キットの中にはサーボを使って物をつかめるようなアームも入っています。
5-2. AWS IoT Core のブロック
RoverC をラジコンのように操作したいので、リモートからコマンドを送ってこのメカナムホイールとアームを操作します。今回は AWS IoT Core を経由してコマンドを送ってラジコンのように操作する為、AWS IoT Core を利用するためのブロック IoT Cloud > AWS にあるものを使います。
クリックすると拡大します
これらのブロックは、以下のような役割をします。
① AWS IoT Core の MQTT ブローカーへの接続設定
② MQTT ブローカーへの接続を実行
③ MQTT トピックへのサブスクライブ
④ MQTT トピックへのパブリッシュ
⑤ サブスクライブしたトピックに届いたデータの取得
以下のように Setup のところにブロックを追加し、host、port、keepalive、keyFile、certFile を指定することで、プログラムが開始した時に AWS IoT Core に接続します。証明書はこのブロックの中にある + のアイコンをクリックしてデバイスに転送すると選択できます。AWS Start のブロックを忘れずに追加してください。
クリックすると拡大します
RoverC では、クラウド側からのメッセージを受け取って、ホイールをどのように動かすかを判断するため、クラウドからメッセージを受け取ったら、何らかの処理を行えるようにします。
5-3. クラウドからのメッセージを表示する
試しに、メッセージをディスプレイに表示するプログラムを作成してみましょう。ディスプレイの文字を表示できるように、以下の操作をします。
- Label をドラッグアンドドロップでディスプレイ上に配置
- name をわかりやすいものに変更
- ディスプレイの向きに合わせて回転させる
クリックすると拡大します
これで、UI → Label とブロックを開くと、Label に対しての操作ができるブロックが使えるようになります。
クリックすると拡大します
では、実際にプログラミングを進めていきます。以下のブロックをプログラミング画面に置きます。
- IoT Cloud → AWS Subscribe 用のブロック
- IoT Cloud → AWS から Get topic_data のブロック
- UI → Label から Label に文字列を表示するブロック
Label ブロックの “Hello M5” となっている部分を見ると、さらにブロックの形になっている確認できると思いますが、そこに Get topic_data のブロックを入れます。最後に、サブスクライブする Topic に “msg/test” と入力します。
クリックすると拡大します
一度、MicroPython で書かれたコードを見てみましょう。
プログラミング画面の上部にある “</>Python” を選択すると、ブロックから生成されたソースコードを確認することができます。Subscribe ブロックが別の関数として作成され、その関数を aws.subscribe で callback として登録されているのがわかります。このようにブロックと、MicroPython のコードを見比べられるので、コーディングの理解が早まるのではないかと思います。
クリックすると拡大します
5-4. デバイスにプログラムを転送
UIFlow の IDE の左下をの状態を見て、デバイスが接続できているを確認します。接続されていなければ、デバイスを USB で接続し、COM に正しいデバイスを指定してください。 そして、右上の ▶ をクリックしてデバイスに転送します。
転送がされるとプログラムが実行されます。
クリックすると拡大します
5-5. 動作確認
AWS の IoT コンソール を開き、左側のメニューから、テスト → MQTT テストクライアント と開き、トピックに公開する のタブを選択し、トピック名 に “msg/test”、メッセージペイロード に “Hello World” と入力したら、発行 をクリックします。
クリックすると拡大します
設定が正しくされていれば、このように M5StickC に表示されます。
6. RoverC を動かすプログラムの作成
RoverC は特定のトピックに動作を指示するメッセージを受信することで、ホイールやアームを動かす仕様にしたいと思います。
この図のように AWS IoT Core のメッセージブローカーを介すことで、コントローラーから操作します。(コントローラーがない場合は、先程の Hello World のメッセージを送信したように、AWS IoT Core のテスト機能を使って送ります)
トピックを介して送信するメッセージは以下のような構造とします。
{
"arm":"open",
"direction":"front",
"speed":20
}それぞれの値は以下の通りです。
| 要素 | 値 | 意味 |
| arm | open | 全開 |
| close | 閉じる | |
| half | 半分閉じる | |
| direction | front | 前へ進む |
| front_right | 右前に進む | |
| right | 右に進む | |
| back_right | 右後ろに進む | |
| back | 後ろに進む | |
| back_left | 左後ろに進む | |
| left | 左に進む | |
| front_left | 左前に進む | |
| speed | 20 | 速度 |
これらの情報を受け取ったら、RoverC のブロックに対して、それぞれのホイールに速度を指定 (負の数だと逆転する) することで、動かしたい方向に動くようになります。
進む方向によって指定する数値 (speed の値) ホイールについてはこの表を参考にしてください。speed の値を大きい数字にすると速く動きます。
| ホイール | ||||
| 方向 | front-left | front-right | rear-left | rear-right |
| front | speed の値 | speed の値 | speed の値 | speed の値 |
| front_right | speed の値 | 0 | 0 | speed の値 |
| right | speed の値 | speed の値 * -1 | 10 | speed の値 * -1 |
| back_right | 0 | speed の値 * -1 | speed の値 * -1 | 0 |
| back | speed の値 * -1 | speed の値 * -1 | speed の値 * -1 | speed の値 * -1 |
| back_left | speedの値*-1 | 0 | 0 | speed の値 * -1 |
| left | speedの値*-1 | speed の値 | speed の値 | speed の値 * -1 |
| front_left | 0 | speed の値 | speed の値 | 0 |
アームのプログラムはこちらのブロックを使い角度を指定することで、全開、半分閉じる、閉じるを指定します。
ダウンロードしたファイルの中にある RoverC.m5f を UIFlow IDE の左下のフォルダみたいなアイコンから読み込むと、以下のように出来上がったサンプルを読み込むことができます。
host 名、秘密鍵と証明書、Thing 名は Rover 用のものを指定してください。
クリックすると拡大します
解説
① AWS IoT Core とのコネクションを作成し、画面の表示を初期化
② サブスクライブの処理。受け取った JSON データからそれぞれの値を取得し、走行とアームの処理を呼びだす
③ メッセージの direction と speed から、ホイールをどのように動かすかを判定し、実行する
④ メッセージの arm から、どの角度に動かすかを判定し、実行する
⑤ ボタンを押したらホイールを止める
6-1. 動作確認
AWS IoT Core のマネージメントコンソールから、動作を指示する JSON を rover/action というトピックに対してパブリッシュすると、RoverC が動くのが確認できるかと思います。止めたい場合は JSON メッセージを送ってもいいですし、M5StickC の横についている B ボタンを押すと、止めることができます。
注) M5Stack Core2 for AWS を持っていない場合は、以下の手順は不要です。
7. コントローラーの作成
ここからは、M5Stack Core2 for AWS を使って、RoverC を動かすためのコントローラーを作成します。M5Stack Core2 はタッチパネルとなっているので、画面のタッチで RoverC を操作することが可能です。では早速、作っていきましょう。
M5Stack Core2 for AWS を USBにつないで、新しく UIFlow の IDE を開きます。COM とデバイスを指定します。
クリックすると拡大します
コントローラー用の画像を全画面に表示したいので、UI エディタのところで、Image をドラッグ & ドロップして、表示位置の X, Y に 0 を指定し、画像のアイコンをクリックしてダウンロードしておいたサンプルソースに含まれている cursor.png を読み込んで指定します。
クリックすると拡大します
コントローラーの UI としてこちらのように画面を分割して、指定した方向に進むための操作ボタンと、アームの開閉を行うボタンのレイアウトを画像となっています。
クリックすると拡大します
表示した画像のタッチされた位置によって判定するようにプログラミングをするので、画面をタッチした時の情報を取得するブロックを使います。ブロックは、Hardwares > Touch にあります。タッチしたのか ? と x, y の座標を取得することができます。製品ページ を見ると液晶のサイズは 320 px * 240 px となっているので、1 マスが 80 px * 80 px で画像を作っているので、判定処理もそのように実装します。
クリックすると拡大します
画面のタッチは、ボタンみたいにイベントが発生するわけではないので、初期化後に常に状態を取得ながら判定処理を行う必要があります。
サンプルを用意していますので、ダウンロードしたファイルの中にある Core2.m5f を UIFlow IDE の左下のフォルダみたいなアイコンから読み込むと、こちらのように出来上がったサンプルを読み込むことができます。
host 名、秘密鍵と証明書、Thing 名はコントローラー用のものを指定してください。
クリックすると拡大します
解説
① Wi-Fi の接続を行い、AWS IoT Core とのコネクションを作成し、ループで判定処理を呼び出す
② 押された座標に合わせてどのコマンドを送るかを判定し、メッセージ送信の処理を呼び出す
③ 変数の初期化
④ JSON メッセージを作成し、AWS IoT Core に送信
⑤ ボタンを押したらホイールを止める
7-1. 動作確認
いきなり RoverC を動かすと危ないので、RoverC は電源を切っておきましょう。
まずは、AWS IoT Core のテスト画面で期待した MQTT メッセージが送信されるかを確認します。rover/action のトピックにサブスクライブして、デバイスの画面をタップしてみましょう。
こちらのように正しくメッセージが受信できれば成功です。
クリックすると拡大します
8. RoverC とコントローラーで遊んでみよう
ここまでで、RoverC がメッセージを受信して動くことが確認できました。また、コントローラーからメッセージが届くのも確認できました。最後に、両方のデバイスにプログラムを書き込みましょう。
今までの手順では USB で接続して、プログラムを書き込むと使えましたが、電源を入れ直したりリセットすると使えなくなっていました。デバイスを起動した時にプログラムを実行させるには、デバイスにプログラム自体をダウンロードして、アプリモードで使えるようにします。
デバイスを USB で接続状態にして、UIFlow の IDE の左下にあるアイコンをクリックすることでこの作業を行います。
これで、デバイスを再起動しても、プログラムが実行されます。(IDE からプログラミングをする場合は、起動時にモードを切り替えるか、M5Burner でモードを切り替えてください)
8-1. デモ動画
9. トラブルシューティング
プログラムを実行してもメッセージが届かない/RoverCが動かない
- RoverC にはサーボ用の電源スイッチがついています。スイッチが ON になっていることを確認してください。
- M5Stick や M5Stack Core2 で利用されている ESP32 の Wi-Fi モジュールは、2.4 GHz の Wi-Fi を利用しますので、接続しようとしているアクセスポイントが対応しているか確認してください。
- AWS IoT Core に接続するための情報が正しいか確認してください。プログラムを実行したタイミングで AWS IoT Core に接続するので、接続のイベントが発生しているかを確認してください。AWS IoT のコンソールのテスト画面で $aws/events/# にサブスクライブして、プログラム実行時に connect のメッセージ が発行されるか確認します。
10. まとめ
いかがでしたでしょうか ?
プログラミングにあまり慣れていない人でも、GUI ベースのブロックプログラミングであれば、だいぶ敷居が低くなり自分の力でプログラミングが出来るのではないでしょうか。ブロックベースでも、条件分岐、変数の使い方、イベントなど様々なことを学ぶことができますので、プログラミングの楽しさを感じてきたら、実際のコードを書くプログラミングにステップアップするのもいいかと思います。
RoverC は記事で紹介した動き方以外にも、右回転、左回転もすることができます。もし、手元に M5Stack Core2 ではなく、M5Stack しか無い場合は、3 つのボタンを使って、前進、右回転 (or 左回転)、停止の動きを割り当てれば、コントローラーとして使えますので、ぜひチャレンジしてみてください。(左回転をさせる場合は、左側のホイールを逆転、右側を前転させます。右回転の場合は、左ホイールを前転、右ホイールを逆転で動かします)
今回利用したデバイス向けには多くのセンサーも提供されており、ブロックも提供されています。人感センサーをつないで人が来たら通知したり、水分センサーをつないで植物の水やり時期を通知したり、多くの発展が可能になります。この記事をきっかけに、プログラミングやクラウドとの連携したモノ作りを楽しんでください。
筆者プロフィール
市川 純
アマゾン ウェブ サービス ジャパン合同会社
技術統括本部 プロトタイピング ソリューションアーキテクト
2018年 に AWS へ入社した、Web サービスから家のデッキ作りまで、モノを作るという事であれば何でも好きな DIY おじさんです。最近は週末にバイクをイジるのにハマっています。
さらに最新記事・デベロッパー向けイベントを検索
AWS を無料でお試しいただけます