3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Node-REDAdvent Calendar 2020

Day 3

Node-RED モノとモノ、ヒトとヒトをつなぐ

Last updated at Posted at 2020-12-02

この記事は Node-RED Advent Calendar 2020 3日目の記事です。

技術的なお話はできないのですが「Node-REDの魅力」をお伝えしたいです。
##Node-RED はプログラミング入門にぴったり
先日、弊社社員の家族向けに TJBot-Zero をつかった「プログラミングハンズオン」を開催しました。

IMG_20201123_121113.jpg

社員への技術展開はモチロン、プログラミングをしたことが無いお子様たちにも興味を持ってもらって、楽しい時間を過ごせるようにと思い「Node-RED (TJBot-zero)」を使ったハンズオンにしました。

ハンズオンのインフラは以下の通りです。

Untitled Diagram.png
参加者のPC・スマホと TJBot は同一セグメントのネットワークにして作業していきます。

##手元のスマホで結果が見られる喜び
まずは「Hello!World」を体験します。
01.png
02.png

たった2ステップを踏んだあと、あらかじめ用意しておいた **QRコード([http in]ノードへのURLが記載されている)**をスマホで読み込むと…

03.png

子供たちからは「おぉ」という声が上がります。ハンズオンのつかみはOKです!

##手元のスマホがロボット動かせる喜び
TJBot を操作するUIを作成してスマホで表示するようにしました。

04.png

05.png

07.png

TJBot zero のイメージに含まれているフローをもとに、[UI button ノード] を追加してリモコン画面を作っていきます。
06.png

子供たちからは大歓声です。ハンズオンの場が暖まってきましたっ!

##自分のアイディアをすぐに形にできる喜び
スマホリモコンに「文字を入力できるエリア」を用意して、入力した文字をしゃべってくれるリモコンを作りました。

20.png

21.png

スマホに入力した文章をロボットがしゃべってくれるっ!

参加された皆さんの好奇心がさらに刺激されます。

ここで参加のしてる皆様の変化が…
30.png
という声が聞こえると同時に、自由にフローをつなぎなおしたりUIのデザインをし始めました。

31.png
UIのレイアウト変更については、事前に用意したハンズオンスライドには含まれていなかったのですが

子供たちが自由に操作しながらUIレイアウト変更していました。

実はわたしは、デザイン画面でボタンの大きさを変更できることをしらなかったのですが、ハンズオン中に子供たちに教えてもらいました。
上記スライドは、ハンズオン後に子供たちから教わった操作方法を追記したものです。

プログラミング未経験の子でも直感的に操作して自分のアイディアを形にできるということを、改めて実感させられる出来事でした

また、親子で参加されているので、子供たちが躓いたときにお父さんお母さんのサポートも入ることもあり、楽しみながら親子の絆や、「お父さん、お母さん、すごいっ!」というところも見せることができたのではないでしょうか。

Node-RED はモノとモノを簡単につなぐ架け橋ですが、親子の絆や技術者どおしの ヒトとヒトも繋ぐ素晴らしいツールだと思います。

これからもNode-RED 界隈が盛り上がるように、ハンズオンや技術紹介に取り組んでいきたいです。

##SpeakerDeck リンク
12.png

3
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?