こんにちは、デザイナーの小高です。 現在、エンジニアのSさんに教えてもらいながらJavaScriptで動く子供向けロボットプログラミングにチャレンジしています。
きっかけは、「子供のころによくプログラミングができるレゴブロックを作っていた」というデザインエンジニアの方のエピソードを聞いた事。 「子供が学べるように、デザイナーの自分でもプログラミングを学べる…?」とSlackに相談。エンジニアのSさんと、プログラミングができるロボットを探すところからスタートしました。
ええ、JavaScriptなら何度も向き合った…はず…。 なのに何故、私は初心者マークを取ることができない…。まずは、 脱モヤモヤの理解度!が目標です。
登場人物
デザイナーK: UIデザイナー。 プログラミングレベル JavaScript★☆☆☆☆、 工作レベル ★★☆☆☆
エンジニアS: WEBよりもロボット系が好きなエンジニア。マイ半田ごてを会社に持ってきて、アマチュアIoT部を勝手に設立。
デザイナーK 「悩んだけど、このタミヤのにします。キャタピラーがいい感じですし、ロボットって無理に擬人化しなくても…と思いつつ、やっぱりちょっと顔っぽくなってるとかわいく見えてくる気がして。でも、回路的な工作は難易度が一気にあがるので、そのあたりはSさんの力を借りるからできる!って感じでいいのかな…?」
エンジニアS 「僕もロボット買ったことあるんですが、顔がある方が謎の愛着がわきますね。回路的な工作は任せてくれれば大丈夫ですよ。ただ、おそらく回路も大部分が出来上がってて回路同士を結線するだけっぽい。BBC micro:bit搭載で、MakeCodeでプログラムを書いていく感じですね。ビジュアルコードでもJavaScriptでも動くみたいです。」
デザイナーK 「…BBC micro:bit…って何でしょう…。」
エンジニアS 「BBC micro:bitは、イギリスの放送局BBCで開発された、教育用のマイクロコンピューターですね。いわゆる小さいコンピューターで、JavaScript で動きを制御できるのが特徴ですね。教育用だけあって、動かすための環境作りが他のものに比べて早いです。」
デザイナーK 「おお、そうなんですね(BBCって報道以外にも色々やってるんだなあ)。あと、MakeCodeって? scrachなら知ってますが…。」
エンジニアS 「MakeCodeはmicro:bit向けのビジュアルコードを作成できる環境(Webサービス)ですね。マイクロソフトさんが運営しているらしいです。ビジュアルコードでmicro:bitの動きを実装できるので、scratchやったことあれば動かし方はすぐに慣れると思いますよ!」

デザイナーK 「MakeCodeのUIの色づかい、好きです。マテリアルデザインのカラースキームと一緒なのかな。何より、JavaScriptで動くのがいいです。」
makecode.microbit.org

デザイナーK 「この目の部分のパーツは?」
エンジニアS 「笑。これは、目のようなモチーフに見えますけど、超音波センサーです。超音波を飛ばして、戻ってくるまでの時間を計測することで、距離を測定するための仕組みです。イルカとかコウモリが超音波を出して、周りの物体を検知するのと一緒です。」
デザイナーK 「てっきり、目のモチーフとして設計されたパーツだと思ってしまいました。笑」
エンジニアS 「超音波を発射する部分と、超音波を受信する部分の二つでできているから、目のように見えますね!micro:bitだけでは周りの物体を検知することができないので、こういったパーツが入っているようですね。」

デザイナーK 「まずは、組み立てですね。プラモデル、ほとんど初心者ですがやってみます!お手伝いお願いします。」
エンジニアS 「やってみましょう」






デザイナーK : 「できた! 自分で作ったのもあって、かわいいです。」
エンジニアS「いいですね。かわいらしいですねー。 次回から、プログラミング編になります。」
さてさて、デザイナーKはプログラミングできるようになるのか? 後編につづくよ、つづく…。(近いうちに)