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

この記事は [Node-RED Advent Calendar 2020 ](https://qiita.com/advent-calendar/2020/node-red) 3日目の記事です。

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

![IMG_20201123_121113.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/53aee080-785a-f1aa-134a-f148aa760acc.jpeg)

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


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

![Untitled Diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/49217438-08fd-79a1-1903-99e9da2ceb78.png)
参加者のPC・スマホと TJBot は同一セグメントのネットワークにして作業していきます。

##手元のスマホで結果が見られる喜び
まずは「Hello!World」を体験します。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/624cc806-7206-67e4-60e9-b3099dc5a598.png)
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/f6afb86e-32a3-51f4-0ec9-954e39ac16ca.png)

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

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/4f575ab2-6653-117a-eaaf-1455a8720271.png)

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


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

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/7f26d5b7-941f-952e-d3c4-114f8b6ccdba.png)

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/c743c460-f0a8-ecfe-9b5d-1f1b50dbe09a.png)


![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/19c0ff1d-69a9-9116-a5cc-19c3758cad95.png)

TJBot zero のイメージに含まれているフローをもとに、`[UI button ノード]` を追加してリモコン画面を作っていきます。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/3ccd1f7a-b007-1272-40b1-520b95c6d747.png)


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

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


![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/41a67e88-4deb-6697-a197-ea56fcc0818f.png)

![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/275db221-f3cd-1a44-3c22-bf61eb409b7d.png)

スマホに入力した文章をロボットがしゃべってくれるっ！<br>
参加された皆さんの好奇心がさらに刺激されます。

ここで参加のしてる皆様の変化が…
![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/22026581-eec7-0ea5-ae73-fee41e02044a.png)
という声が聞こえると同時に、自由にフローをつなぎなおしたりＵＩのデザインをし始めました。

![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/49e6a5c0-d414-ad75-26b5-2475afb31145.png)
ＵＩのレイアウト変更については、事前に用意したハンズオンスライドには含まれていなかったのですが <br>
子供たちが自由に操作しながらＵＩレイアウト変更していました。 <br>
実はわたしは、デザイン画面でボタンの大きさを変更できることをしらなかったのですが、ハンズオン中に子供たちに教えてもらいました。
上記スライドは、ハンズオン後に子供たちから教わった操作方法を追記したものです。

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

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

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

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

##SpeakerDeck リンク
[![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/39096fd8-dead-eccd-730f-e628f2c6400a.png)](https://speakerdeck.com/kakimotyfield/tjbot-depuroguraminguwo-ti-yan-sitemiyou)