Node-RED MCU Edition版 #スタックチャン (Stack-chan)の作例①

# はじめに

Node-RED MCU Edition版 #スタックチャン (Stack-chan)の動作に必要なモジュールが揃ってきたので、作例を紹介します。

サーボモーターノードは @background さんが作成しています。

https://flows.nodered.org/node/@background404/node-red-contrib-mcu-servo

Faceノードは @mshioji さんが作成しています。

https://flows.nodered.org/node/@mshioji/node-red-contrib-mcu-draw-face

TTS(Text to Speech)ノードです。

Elevenlabs版

https://flows.nodered.org/node/@kitazaki/node-red-contrib-mcu-elevenlabs

OpenAI Stream版

https://flows.nodered.org/node/@kitazaki/node-red-contrib-mcu-openaistream

mp3再生ノードです。

https://flows.nodered.org/node/@kitazaki/node-red-contrib-mcu-mp3

## Moddable SDKの開発環境を構築します

技術書典16で頒布した「はじめてのNode-RED MCU Edition補足書 (2024年5月12日版)」の環境構築部分を公開します。こちらの手順を参考にして開発環境を構築します。

https://techbookfest.org/product/46zXPBxGAEdcF5zcxK5MD1

https://github.com/kitazaki/mcu-stackchan/blob/09fe81b19a17f0fa63192f8f3027ce72d17a43ad/Node-RED-MCU_20240512_install.pdf

## Node-RED MCU Editionの開発環境を構築します

Node.jsがインストールされていることを前提とします。
新しいディレクトリを作成して、package.jsonを作成します。

```json:package.json
{
  "name": "mcustackchan",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@background404/node-red-contrib-mcu-servo": "^0.1.0",
    "@kitazaki/node-red-contrib-mcu-mp3": "^0.0.2",
    "@kitazaki/node-red-contrib-mcu-elevenlabs": "^0.0.1",
    "@kitazaki/node-red-contrib-mcu-openaistream": "^0.0.1",
    "@mshioji/node-red-contrib-mcu-draw-face": "^0.1.2",
    "@moddable-node-red/mcu": "file:node_modules/@ralphwetzel/node-red-mcu-plugin/node-red-mcu/nodes/mcu",
    "@ralphwetzel/node-red-mcu-plugin": "github:ralphwetzel/node-red-mcu-plugin",
    "node-red": "^4.0.2"
  },
  "description": ""
}
```

必要なモジュールをインストールします。コマンドプロンプトでnpmコマンドを実行します。

```bash
$ npm i
```

## enebular

enebularのアカウントを作成します。
enebularのクラウド実行環境の機能を利用して、定期的に(10分毎)にポモドーロタイマーを起動します。

https://www.enebular.com/

# 作例① (10分ポモドーロ)

## 構成

全体構成は下図のようになっています。
10分毎に時刻を教えてくれます。

![スクリーンショット 2024-09-01 23.11.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/377a1c42-304c-f96e-0b54-205ab29c7045.png)

### 左

enebularのクラウド実行環境の機能を利用して、毎時10分毎(00分、10分、20分、30分、40分、50分)にNode-REDフローを実行しています。
インターネット上のMQTTブローカー(中央のNode-RED)へ接続し、音声(時刻)と顔(表情)の情報を送信します。

「時間」と「分」の発話情報(mp3ファイル)は分けてウェブサーバー(中央のストレージ)に保存しています。
「時間」と顔(口を開いて動かす表情)の情報を送信し、一定時間(1.2秒)経過後に「分」の情報を送信します。
一定時間(1秒)経過後に顔(口を閉じる表情)の情報を送信します。

### 中央

Node-REDでAedesノード(MQTTブローカー)を動かしています。
ウェブサーバに発話情報(mp3ファイル)を保存しています。

### 右

音声(時刻)と顔(表情)の情報を受信します。
「時間」の情報(mp3ファイルのURL)をもとにウェブサーバーからmp3ファイルを取得して再生します。
顔(表情)の情報をもとにディスプレイ表示を変更し、サーボモーターを動かします。
一定時間(1.2秒)経過後に「分」の情報(mp3ファイルのURL)をもとにウェブサーバーからmp3ファイルを取得して再生します。
一定時間(1秒)経過後に顔(表情)の情報をもとにディスプレイ表示を変更し、サーボモーターを動かします。

## 右(デバイス側)

![image20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/0d4be672-274a-9ab7-a205-d80656715371.jpeg)

## 中央(MQTTブローカー)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/57634204-d392-84fd-b503-071a02ea6a8c.png" width="50%">

## 中央(ウェブサーバー)

01、02フォルダに時間(00〜23時)の情報、03フォルダに分(00分、10分、20分、30分、40分、50分)の情報(mp3ファイル)を保存しています。
(01フォルダは「00時です。」02フォルダは「00時」の情報を保存しています。02フォルダと03フォルダを組み合わせて、「00時」「ちょうどです。」を発話させています。)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/048663ad-73db-772d-2987-68c4b7b3f1bd.png" width="30%">

![スクリーンショット 2024-09-01 23.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/2edbe865-dc92-fa31-f6e7-50b22a51bbec.png)

![スクリーンショット 2024-09-01 23.41.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/581bc1df-932d-e8de-be7a-c6a1ae4bfe66.png)

## 左(クラウド側)

![image17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/56b9aa11-1927-5f6c-d00a-e5b51c07394a.jpeg)

## デモ動画

![スクリーンショット 2024-09-01 23.34.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/31ca4811-09a2-4034-d39b-e829a907065a.png)

https://youtu.be/8kahvIsXlrY