UX/UI
やってみた

デザイナーが学ぶロボットプログラミング工作部 ―JavaScriptで動く子供向けロボット 工作編―

こんにちは、デザイナーの小高です。 現在、エンジニアの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やったことあれば動かし方はすぐに慣れると思いますよ!」

micro:bit説明書画像
BBC micro:bitの説明書。色使いがかわいい

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

超音波センサー
この緑色のパーツは、目?

デザイナーK 「この目の部分のパーツは?」

エンジニアS 「笑。これは、目のようなモチーフに見えますけど、超音波センサーです。超音波を飛ばして、戻ってくるまでの時間を計測することで、距離を測定するための仕組みです。イルカとかコウモリが超音波を出して、周りの物体を検知するのと一緒です。」

デザイナーK 「てっきり、目のモチーフとして設計されたパーツだと思ってしまいました。笑」

エンジニアS 「超音波を発射する部分と、超音波を受信する部分の二つでできているから、目のように見えますね!micro:bitだけでは周りの物体を検知することができないので、こういったパーツが入っているようですね。」

ロボット構成図
このロボットの構成図を説明してくれました(エンジニアK 作)。 こんな感じの作りになっているらしい

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

エンジニアS 「やってみましょう」

ロボットパーツ
K : 初心者でもつくれるのか?! アシアルのみんな、超音波センサーなどに興味を持って声をかけてくれます。
工具が充実
K : こ、工具が充実している! S: 趣味の電子工作で揃えていたもので、最近は会社の3Dプリンタで色々作ったりする時用に使っています。 バリ取りしましょうか。
K : う、う〜ん。グリースって意味あるんでしょうか…(面倒と思ったらだめなのか…) S: はい、潤滑油として使います。無くても動くんですが、摩擦音がひどくなり、摩擦熱もより発生するのでパーツの寿命が短くなります。
キャタピ��ラー画像
K: キャタピラー!! だいぶ仕上がってきました
プログラミングロボット画像
K: もうちょっとです。 もう、超音波センサーは目にしかみえてませんよ!
プログラミングロボット画像
K: やったー! 仕事終わりに2日間かけて完成しました!!

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

author img for Fumko Kodaka
Fumko Kodaka

グラフィックデザイン事務所、新聞社Webデザインチーム等を経て、2018年12月よりアシアルへ入社。UIデザイナーとしてデザインチームに所属。 経歴が、グラフィック → Web → UI という変遷のため、デザインの表層分野を得意としているが、骨格・構造・UXリサーチなど広い範囲でのデザインを担えるよう、日々取り組んでいる。 オンライン会議中に、飼っている猫が急にインサートしてくる事もあり、ご迷惑をかけている!?

記事一覧

前の記事へ

次の記事へ

一覧へ戻る

「UX / UI」カテゴリの最新記事

PAGE TOP