夏休みの課題にプログラミングの学習をしながらラジコンを作ろう !

2021-07-05
日常で楽しむクラウドテクノロジー

市川 純

こんにちは、プロトタイピング ソリューション アーキテクトの市川 (@sparkgene) です。

我が家には小学生の子供がいるのですが、数年前からニュースでもたびたび取り上げられているように、小学校でのプログラミング教育の話がでております。このような職業についていることもあり、家でプログラミングを子供に教えろ圧がたびたび発生します。そんなこともあり、しばらく前から Scratch など利用して少しずつ触る機会を作ってきました。しかし、子供はなかなか集中力が続きません。そして私もやる気が続きません。

そこで、デバイスが有ったほうが子供 (私) が、興味を持って取り組むだろうと以下のようなニーズを満たすネタを考えてみました。

  • Scratch のようなブロックを使ってプログラミングの勉強ができる
  • デバイスを使う
  • 完成後も遊べる
manga-radio-control-car_title
manga-radio-control-car_01
manga-radio-control-car_02
manga-radio-control-car_03
manga-radio-control-car_04

1. 作るもの

先に挙げたニーズを満たしつつ、ブロックを使ったプログラミングができる物を探したら、M5Stack 社が自社で出しているデバイス向けの UIFlow という物を見つけ、さらに遊べるデバイスとして RoverC がちょうど良さそうでしたので、これを使ったラジコンを作ることを思いつきました。

読者の中にも 2020 年の re:Invent で公開された AWS IoT EduKit に興味を持って、M5Stack Core2 for AWS を購入した方もいらっしゃるかと思いますが、この記事ではそのデバイスをコントローラーとして利用します。

img_programmed-radio-control-car_01
RoverC を組み立てて、M5StickC を取り付けた状態

この記事の中で作成するラジコンのサンプルのソースはこちらからダウンロードしてください。


2. プログラミングについて

M5Stack 系では Arduino IDEPlatformIO を使い、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 が公開されていますので、お子さんと一緒に試してみるのをおすすめします。

* M5StickC 初心者でも簡単に ESP32 で IoT アプリケーションを開発 »


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 デバイスを選択します。

img_programmed-radio-control-car_02

クリックすると拡大します

5-1. RoverC Hat の追加

M5StickC から RoverC を操作するため、UIFlow IDE で Hat を選択し、“+” をクリックします。

img_programmed-radio-control-car_03

クリックすると拡大します

RoverC にチェックを付け保存します。

img_programmed-radio-control-car_04

クリックすると拡大します

これで、RoverC を操作するためのブロックが C-HAT > RoverC から利用できるようになります。

img_programmed-radio-control-car_05

クリックすると拡大します

RoverC はメカナムホイールと呼ばれる複数のローラーが取り付けられたホイールを使っており、4 つのホイールの回転方向や、回転させないといった制御をすることで、前・後・左・右、左前、右前、左後ろ、右後ろ、左回転、右回転を行うことができます。また、キットの中にはサーボを使って物をつかめるようなアームも入っています。

5-2. AWS IoT Core のブロック

RoverC をラジコンのように操作したいので、リモートからコマンドを送ってこのメカナムホイールとアームを操作します。今回は AWS IoT Core を経由してコマンドを送ってラジコンのように操作する為、AWS IoT Core を利用するためのブロック IoT Cloud > AWS にあるものを使います。

img_programmed-radio-control-car_06

クリックすると拡大します

これらのブロックは、以下のような役割をします。

① AWS IoT Core の MQTT ブローカーへの接続設定
② MQTT ブローカーへの接続を実行
③ MQTT トピックへのサブスクライブ
④ MQTT トピックへのパブリッシュ
⑤ サブスクライブしたトピックに届いたデータの取得

以下のように Setup のところにブロックを追加し、host、port、keepalive、keyFile、certFile を指定することで、プログラムが開始した時に AWS IoT Core に接続します。証明書はこのブロックの中にある + のアイコンをクリックしてデバイスに転送すると選択できます。AWS Start のブロックを忘れずに追加してください。

img_programmed-radio-control-car_07

クリックすると拡大します

RoverC では、クラウド側からのメッセージを受け取って、ホイールをどのように動かすかを判断するため、クラウドからメッセージを受け取ったら、何らかの処理を行えるようにします。

5-3. クラウドからのメッセージを表示する

試しに、メッセージをディスプレイに表示するプログラムを作成してみましょう。ディスプレイの文字を表示できるように、以下の操作をします。

  • Label をドラッグアンドドロップでディスプレイ上に配置
  • name をわかりやすいものに変更
  • ディスプレイの向きに合わせて回転させる
img_programmed-radio-control-car_08

クリックすると拡大します

これで、UI → Label とブロックを開くと、Label に対しての操作ができるブロックが使えるようになります。

img_programmed-radio-control-car_09

クリックすると拡大します

では、実際にプログラミングを進めていきます。以下のブロックをプログラミング画面に置きます。

  • IoT Cloud → AWS Subscribe 用のブロック
  • IoT Cloud → AWS から Get topic_data のブロック
  • UI → Label から Label に文字列を表示するブロック

Label ブロックの “Hello M5” となっている部分を見ると、さらにブロックの形になっている確認できると思いますが、そこに Get topic_data のブロックを入れます。最後に、サブスクライブする Topic に “msg/test” と入力します。

img_programmed-radio-control-car_10

クリックすると拡大します

一度、MicroPython で書かれたコードを見てみましょう。

プログラミング画面の上部にある “</>Python” を選択すると、ブロックから生成されたソースコードを確認することができます。Subscribe ブロックが別の関数として作成され、その関数を aws.subscribe で callback として登録されているのがわかります。このようにブロックと、MicroPython のコードを見比べられるので、コーディングの理解が早まるのではないかと思います。

img_programmed-radio-control-car_11

クリックすると拡大します

5-4. デバイスにプログラムを転送

UIFlow の IDE の左下をの状態を見て、デバイスが接続できているを確認します。接続されていなければ、デバイスを USB で接続し、COM に正しいデバイスを指定してください。 そして、右上の ▶ をクリックしてデバイスに転送します。

転送がされるとプログラムが実行されます。

img_programmed-radio-control-car_12

クリックすると拡大します

5-5. 動作確認

AWS の IoT コンソール を開き、左側のメニューから、テスト → MQTT テストクライアント と開き、トピックに公開する のタブを選択し、トピック名 に “msg/test”、メッセージペイロード に “Hello World” と入力したら、発行 をクリックします。

img_programmed-radio-control-car_13

クリックすると拡大します

設定が正しくされていれば、このように M5StickC に表示されます。

img_programmed-radio-control-car_14

6. RoverC を動かすプログラムの作成

RoverC は特定のトピックに動作を指示するメッセージを受信することで、ホイールやアームを動かす仕様にしたいと思います。
この図のように AWS IoT Core のメッセージブローカーを介すことで、コントローラーから操作します。(コントローラーがない場合は、先程の Hello World のメッセージを送信したように、AWS IoT Core のテスト機能を使って送ります)

img_programmed-radio-control-car_15

トピックを介して送信するメッセージは以下のような構造とします。

{
  "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 のブロックに対して、それぞれのホイールに速度を指定 (負の数だと逆転する) することで、動かしたい方向に動くようになります。

img_programmed-radio-control-car_16

進む方向によって指定する数値 (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 用のものを指定してください。

img_programmed-radio-control-car_18

クリックすると拡大します

解説

① 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 とデバイスを指定します。

img_programmed-radio-control-car_19

クリックすると拡大します

コントローラー用の画像を全画面に表示したいので、UI エディタのところで、Image をドラッグ & ドロップして、表示位置の X, Y に 0 を指定し、画像のアイコンをクリックしてダウンロードしておいたサンプルソースに含まれている cursor.png を読み込んで指定します。

img_programmed-radio-control-car_20

クリックすると拡大します

コントローラーの UI としてこちらのように画面を分割して、指定した方向に進むための操作ボタンと、アームの開閉を行うボタンのレイアウトを画像となっています。

img_programmed-radio-control-car_21

クリックすると拡大します

表示した画像のタッチされた位置によって判定するようにプログラミングをするので、画面をタッチした時の情報を取得するブロックを使います。ブロックは、Hardwares > Touch にあります。タッチしたのか ? と x, y の座標を取得することができます。製品ページ を見ると液晶のサイズは 320 px * 240 px となっているので、1 マスが 80 px * 80 px で画像を作っているので、判定処理もそのように実装します。

img_programmed-radio-control-car_22

クリックすると拡大します

画面のタッチは、ボタンみたいにイベントが発生するわけではないので、初期化後に常に状態を取得ながら判定処理を行う必要があります。

サンプルを用意していますので、ダウンロードしたファイルの中にある Core2.m5f を UIFlow IDE の左下のフォルダみたいなアイコンから読み込むと、こちらのように出来上がったサンプルを読み込むことができます。

host 名、秘密鍵と証明書、Thing 名はコントローラー用のものを指定してください。

img_programmed-radio-control-car_23

クリックすると拡大します

解説

① Wi-Fi の接続を行い、AWS IoT Core とのコネクションを作成し、ループで判定処理を呼び出す
② 押された座標に合わせてどのコマンドを送るかを判定し、メッセージ送信の処理を呼び出す
③ 変数の初期化
④ JSON メッセージを作成し、AWS IoT Core に送信
⑤ ボタンを押したらホイールを止める

7-1. 動作確認

いきなり RoverC を動かすと危ないので、RoverC は電源を切っておきましょう。

まずは、AWS IoT Core のテスト画面で期待した MQTT メッセージが送信されるかを確認します。rover/action のトピックにサブスクライブして、デバイスの画面をタップしてみましょう。

こちらのように正しくメッセージが受信できれば成功です。

img_programmed-radio-control-car_24

クリックすると拡大します


8. RoverC とコントローラーで遊んでみよう

ここまでで、RoverC がメッセージを受信して動くことが確認できました。また、コントローラーからメッセージが届くのも確認できました。最後に、両方のデバイスにプログラムを書き込みましょう。

今までの手順では USB で接続して、プログラムを書き込むと使えましたが、電源を入れ直したりリセットすると使えなくなっていました。デバイスを起動した時にプログラムを実行させるには、デバイスにプログラム自体をダウンロードして、アプリモードで使えるようにします。

デバイスを USB で接続状態にして、UIFlow の IDE の左下にあるアイコンをクリックすることでこの作業を行います。

img_programmed-radio-control-car_25

これで、デバイスを再起動しても、プログラムが実行されます。(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 左回転)、停止の動きを割り当てれば、コントローラーとして使えますので、ぜひチャレンジしてみてください。(左回転をさせる場合は、左側のホイールを逆転、右側を前転させます。右回転の場合は、左ホイールを前転、右ホイールを逆転で動かします)

今回利用したデバイス向けには多くのセンサーも提供されており、ブロックも提供されています。人感センサーをつないで人が来たら通知したり、水分センサーをつないで植物の水やり時期を通知したり、多くの発展が可能になります。この記事をきっかけに、プログラミングやクラウドとの連携したモノ作りを楽しんでください。


builders.flash メールメンバーへ登録することで
AWS のベストプラクティスを毎月無料でお試しいただけます

筆者プロフィール

photo_ichikawa

市川 純
アマゾン ウェブ サービス ジャパン合同会社
技術統括本部 プロトタイピング ソリューションアーキテクト

2018年 に AWS へ入社した、Web サービスから家のデッキ作りまで、モノを作るという事であれば何でも好きな DIY おじさんです。最近は週末にバイクをイジるのにハマっています。

AWS のベストプラクティスを毎月無料でお試しいただけます

さらに最新記事・デベロッパー向けイベントを検索

下記の項目で絞り込む
絞り込みを解除 ≫
1

AWS を無料でお試しいただけます

AWS 無料利用枠の詳細はこちら ≫
5 ステップでアカウント作成できます
無料サインアップ ≫
ご不明な点がおありですか?
日本担当チームへ相談する