enebularからMQTTを使ってオンラインロボットワークショップをした

コロナ禍でもロボットプログラミングを体験できるワークショップをenebularを使って行いました。

## Why

### なぜこの研究を行っているのか?
所属している小池研究室では**社会構成主義**という人と人との関係性の中で社会が構成されていくという考え方をもとに研究しています。
その中でも、私たちのプロジェクトではマグボットという小池研究室で開発されたソーシャルロボットを利用し、人と人のコミュニケーションの間にロボットを置いたときの人間やロボットの変化を研究しています。


### 今回のフィールドワークに至った経緯
今まで研究していたフィールドである東京都市大学横浜キャンパス図書館がコロナで利用者が減ってしまったため、研究ができなくなってしまいました。しかし、以前研究室がお世話になっていた[株式会社たまらば](http://tamalover.jp/)さんからのお誘いがあり、**オンラインでマグボットを利用したプログラミング教育**を行うことになりました。またオンラインで行うにあたってマグボットの遠隔操作が行える環境、お互いがZoomでコミュニケーションを取れる環境が備わっていたため実施することができました。



## What
### マグボットとは？
マグボットとは、東京都市大学小池研究室が開発したオープンソースのソーシャルロボットです。
![S__6356998.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179030/2454a873-fefe-3a63-d03e-b7c2b86bd59d.jpeg)

> - RaspberryPi と Node-RED によって制御している。
> - 100 円均一ショップな どで材料を購入でき、誰でも材料を用意することができ比較的**安価で製作できる**ロボットです。
> - 自在にデザイン変更が可能。
> - 社会、コミュニティで役割を持って働くことを目的としており、ロボットが人間の代替として働くのではなく、**人と人を繋ぐ役割**になることを期待されています。  

製作方法や最新の情報は、以下をご覧ください。

- [マグボットFacebook](https://www.facebook.com/SocialRobotics/)
- [マグボット公式サイト](http://www.mugbot.com/)
- [Mugbot のNode-RED化](https://qiita.com/mha03030/items/6b99a7ca95359576f685)



### ワークショップ
事前に[株式会社たまらば](http://tamalover.jp/)様に参加者を募っていただき、不登校の生徒2名に集まっていただきました。

2人におよび、たまらばスタッフ様に対し、**今困っていることを解決できるマグボットの方法や機能および用途を考え、プログラムしてもらうワークショップを行った。**

生徒に対してはできる限り既存のマグボットの活動フィールドや用途を伝えずどのような利用方法があるかを考えてもらいました。

壊れる恐れもあるため、被験者にマグボットは送らず大学内からmqtt経由で操作をしてもらい、動きや音声などはZoomで繋ぎました。

enebularもDashboardを使うため、Web版を利用させていただきました。

*ワークショップのZoomの様子:*
![online mugbot2021.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179030/94dfe9d5-7f2e-5c9e-96ae-5dcad62c0c68.png "ワークショップのZoomの様子")

## When

生徒たちが来やすいよう、土曜日に3回開催。


## Where
- 東京都市大学の学生・先生…横浜キャンパス内のパソコンルームから
- たまらばの方、参加生徒…自宅やコミュニティスペースから

 Zoom オンラインミーティングにてつながる

## How
- Zoomを使って長崎と福島の参加者と
- enebularとマグボット内のNode-REDをで接続。遠隔で操作を可能にした。
- [マグボットじゃんけん](#じゃんけんフロー)や[あっち向いてホイ](#あっち向いてホイフロー)でアイスブレイクを行った。

## 技術面
### 環境

- [enebular][]（Web版）
- [Beebotte][]
- マグボット
  - Raspberry Pi 3 Model B Ver 1.2+
  - Node-RED
  - [Open JTalk][]
  - 100均のマグカップ
  - 100均の乾物ケース
  - [Zoom][]
        - マグボット1台につきパソコン1台

[enebular]:https://www.enebular.com/ja/
[Beebotte]:https://beebotte.com/
[Zoom]:https://zoom.us/
[Open JTalk]:http://open-jtalk.sourceforge.net/


### マグボットのNode-RED
各パーツに向かってmqttノードから信号が届く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179030/54516f7b-ef5f-865b-fc7b-921b9fcf3731.png)

パーツの動作確認が簡単にできる様にDashboardも設定。

[Open JTalk][]のインストールはこちらの記事を参考にさせていただきました。

https://qiita.com/coffiego/items/4fc3b0be78fcded3eef0

templateノードで`msg.payload`内の言葉を再生できるようにコマンドを整え、execノードに向かって送ります。

```shell
echo "{{payload}}" | open_jtalk -x /var/lib/mecab/dic/open-jtalk/naist-jdic -m /usr/share/hts-voice/nitech-jp-atr503-m001/nitech_jp_atr503_m001.htsvoice -ow /dev/stdout | aplay --quiet
```

### enebular

用途に分けてフローを４つ用意しました。

#### メインフロー
Dashboardに
- 首・頭サーボ用のsliderノード
- 目・口ライト用のswitchノード
- 発話用のformノード
- 発話テンプレート（例. 「こんにちは」「小池研究室で作られました」）のbuttonノード

を設置しました。
（[こちら](https://qiita.com/mha03030/items/6b99a7ca95359576f685#json%E3%81%AE%E3%83%87%E3%83%A2%E3%83%87%E3%83%BC%E3%82%BF "マグボットのNode-RED化")のJSONデモデータを改良しました。）
![enebular_main.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179030/d844dc2e-70cf-64d0-cd43-689a662378aa.png)

*Dashboard用のフロー:*
![enebular_flow1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179030/50ff74c4-3a75-12b3-0727-ba0464700e32.png "Dashboard用のフロー")

*enebularのDashboard:*
![enebular_Dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179030/204de490-fd14-41cf-3f4f-f5deb59ba6d8.png)

#### じゃんけんフロー

Dashboardの「グー」「チョキ」「パー」ボタンと、「勝ち」「負け」ボタンを設置しました。  
手を選んで押すと、「じゃんけん、、、グー」と発する 。
勝敗ボタンは勝利数をカウントできる様にはなっているが、そこまでやらなかった。

![enebular_janken.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179030/5fd49ea8-e7b6-69b6-4926-c1858a28afc1.png)
#### あっち向いてホイフロー
Dashboardに上下左右それぞれのボタンを設置。Font-awesomeのアイコンをつけ、さらに大きさを調整し視認性を上げました。
「Reset」ボタンを設置したが、上下左右てボタンを押して3.5s後に元の位置に戻る様にしていたため使わなかった。
![enebular_lookthatway.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179030/2b887a0b-8897-ae18-5c1b-c7ca402bf572.png)

#### ワークスペースフロー

ここで参加生徒にそれぞれ考えたマグボットの機能をプログラムしてもらった。
手始めに、こちらで用意していた「日本時間取得」functionノードを使いマグボットに現在の時間を喋る（debugに出す）体験をしてもらった。

```javascript:日本時間取得functionノード
// ペイロードから日付オブジェクトを生成
var date = new Date(Date.now() + ((new Date().getTimezoneOffset() + (9 * 60)) * 60 * 1000));
// 日付文字列に変換して再度ペイロードをセット
msg.payload = date.toLocaleString({ timeZone: 'Asia/Tokyo' });
// 次のノードへmsgオブジェクトを返す
return msg;
```

### MQTT(Beebotte)
マグボットとenebularを繋ぐ際に、[Beebotte][]さんのMQTTブローカーを使って遠隔でデータの送受信を行いました。  
マグボットにそれぞれChannelを作り、Publisherをenebular側、Subscriberをマグボットに設定。
![mqtt_channel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179030/f57e0097-257f-de22-f86a-2257da49e3ee.png)
それぞれのChannel内に各パーツのResourceを設定。
![mqtt_resource.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179030/21de9b6d-9420-19d8-a243-de6d367dc865.png)


## おわりに
小池研究室では長年マグボットを使った研究を行ってきましたが、オンラインで何か行うという試みが初でした。参加者も中学生でPCにもプログラミングにもあまり触れていない子たちでしたが、enebular(Node-RED)のおかげで簡単にマグボットを操作でき、とても感動してくれていました。
enebularきっかけでロボットやプログラミングに興味を持って、そこからスーパーエンジニアが誕生してくれたら嬉しいですね。