M5StackとPCの無線通信による「おしゃべり代行アプリ」を作る

こんにちは。

現役エンジニアの”はやぶさ”@Cpp_Learningです。

前回『M5Stackアバターおしゃべりアプリ』の作り方に関する記事を書きました。

【M5Stack入門】アバターおしゃべりアプリの作り方 -PlatformIO IDE for VSCode編-こんにちは。現役エンジニアの”はやぶさ”@Cpp_Learningです。前回『M5Stack初心者におすすめしたい情報ま...

Aボタン（一番左のボタン）を押すと”設定したセリフ”をしゃべるアプリです。

ただし、このアプリだと1フレーズしかしゃべれないので…

くるる

もっと色んなセリフをしゃべらせたーい♪

くるる

口内炎が痛いときに代行にしゃべらせたーい♪

と面白いアイデアを閃くフクロウの”くるる”ちゃん@kururu_owlがいるので…

作ってみました(*･ω･)ﾉ♪

#M5Stack とPCを無線通信させて実現したかった「おしゃべり代行アプリ(仮)」ができた！ pic.twitter.com/lkoKzvHV43

— はやぶさ (@Cpp_Learning) August 17, 2019

M5Stackと無線接続したPCのキーボードから文字を入力すると、その文字をアバターがおしゃべりしてくれます！

くるる

こういうの待ってた！

本記事で『おしゃべり代行アプリ』の作り方を説明します。

Contents

1 注意点
2 本記事を書くモチベーション（読み飛ばしOK）
3 機能検討
4 TelnetでWifiサーバ(M5Stack)とクライアント(PC)を通信
5 実践！M5Stackアバターによる「おしゃべり代行アプリ」を作る
6 Telenetのインストール方法
7 「おしゃべり代行アプリ」の使い方
- 7.1 M5Stackの通信状態を見ながらキーボードで遠隔操作
8 まとめ

注意点

最初に注意点を説明しておきます。

私の保有しているアクセスポイントとM5Stackの相性が良くないみたいで、通信が不安定な状態で動作確認しています…

また、M5Stack Grayを使っているのですが、M5Stack-AvatarやWifi接続などの複数機能を盛り込むとメモリ不足になるという情報をキャッチしています。

通信状態が不安定な環境
メモリ不足
ひょっとしたらソースコードにバグあり

以上3点により、ご紹介する「おしゃべり代行アプリ」が上手く動作しない可能性があります。

こんな状態でブログ記事を書いて良いのか少し悩みましたが…

私自身が「上手くいった事例」と同じくらい「上手くいかなかった事例」を欲しているので…

「良い所」も「悪い所」も情報共有したいと想い、本記事を書きました。

くるる

「おしゃべり代行アプリ」を試してみて、不具合が出たらごめんなさい

以上の注意点を考慮し、それでも興味を持ってくれる人は以降を読み進めて頂けると嬉しいです！

本記事を書くモチベーション（読み飛ばしOK）

はやぶさ

「良い所」も「悪い所」も情報共有したい

という理由以外にも本記事を書きたいと思った理由がありますので、少し小話を…

くるる

口内炎が痛いときに代行でしゃべらせたーい♪

その気持ち…分かる！

くるる

目が合うと上手く喋れない！でもメールだと味気ない…

うん。まぁ分かるかも…

あと少しだけ真面目な話をすると、口内炎に限らず「手は動くけど、口を上手く動かせない…」という人がいるかもしれない。。

くるる

可愛らしいM5Stackアバターが代行して、自分の言葉をしゃべってくれる！嬉しい！！

はやぶさ

”くるる”ちゃんのように笑顔になってくれる人が少しでもいたら嬉しいな！

とか考えながら「おしゃべり代行アプリ」を作成しました(*･ω･)ﾉ♪

（小話完）

以降から本編です。

機能検討

最初に『開発したいアプリ』を実現するための”機能”を検討します。

今回の場合『アバターにおしゃべりを代行してもらうアプリ』です。

”アバターおしゃべりアプリ”については、以下の記事で作り方を紹介しています。

なので、この記事で紹介した”おしゃべりアプリ”に”代行の機能”を追加してみます。

TelnetでWifiサーバ(M5Stack)とクライアント(PC)を通信

「手は動く」という前提で”おしゃべり代行の機能”を検討してみます。色んな方法がありますが…

使い易さなどを考慮すると、キーボード入力した文字列をM5Stackに読み上げてもらうのが良さそうです。

具体的には、ホームルータやスマホなどをアクセスポイントとしたネットワークを構築し、Telnetで通信を行います（以下がイメージ図です）

今回、Telnetを採用した理由については以下の通りです。

単純な文字データが送信できれば良い
セキュリティよりも（私が）実現しやすい方法を優先

M5StackとPC間でTelnetを使う方法については、先駆者がいますので参考にさせて頂きます。

M5Stack(ESP32)のWiFiサーバーにPCからtelnetで繋いでSerialとtelnetでリモートエコーを受け取る｜Qiita

実践！M5Stackアバターによる「おしゃべり代行アプリ」を作る

m5stack-avatar/examples/talkとM5Stack/Telnetを組み合わせた「おしゃべり代行アプリ」のソースコードが以下です。

#include <AquesTalkTTS.h>
#include <Avatar.h>
#include <M5Stack.h>
#include <tasks/LipSync.h>
#include <WiFi.h>
#include <string>

#define N 15

using namespace m5avatar;

// AquesTalk License Key
// NULL or wrong value is just ignored
const char* AQUESTALK_KEY = "XXXX-XXXX-XXXX-XXXX";

// for wifi setup
const char* ssid     = "yourssid";
const char* password = "yourpassword";
const int port = ****;

Avatar avatar;
WiFiServer server(port);

void setup_wifi(){
	M5.Lcd.setTextColor(RED);
    M5.Lcd.setTextSize(2);
    M5.Lcd.setCursor(3, 10);
    M5.Lcd.print("Connecting to ");
    M5.Lcd.println(ssid);

	// wifi setup
    WiFi.mode(WIFI_STA);  // WIFI_AP, WIFI_STA, WIFI_AP_STA or WIFI_OFF
    WiFi.begin(ssid, password);
	// WiFi.begin();

	// Connecting ..
    while (WiFi.status() != WL_CONNECTED) {
        delay(100);
        M5.Lcd.print(".");
    }

    // run server
    server.begin();
}

void setup() {
    int iret;
    M5.begin();

	// setup wifi
	setup_wifi();

    // For Kanji-to-speech mode (requires dictionary file saved on microSD)
    // See http://blog-yama.a-quest.com/?eid=970195
    // iret = TTS.createK(AQUESTALK_KEY);
	iret = TTS.create(AQUESTALK_KEY);
    M5.Lcd.setBrightness(30);
    M5.Lcd.clear();
    avatar.init();
    avatar.addTask(lipSync, "lipSync");
}

void loop() {
	WiFiClient client = server.available();

	char c;
	char message[N];
	int i = 0;

	if (client) {
		while (client.connected()) {
			if (client.available()) {
				c = client.read();
				// push "c"
				if (c != '\n' && i < N-1) {
					message[i] = c;
					i++;
				}else{
					// Need to initialize with createK(AQUESTALK_KEY)
					// TTS.play("こんにちは。", 80);
					TTS.play(message, 80);
					avatar.setSpeechText(message);
					delay(1000);
					// clear "c"
					while (i >= 0){
						i--;
						message[i] = ' ';
					}
					i = 0;
				}
			}
		}
	}else{
		avatar.setSpeechText("Client Disconnected.");
		delay(1000);
		avatar.setSpeechText("");
	}
}

#include <AquesTalkTTS.h>

#include <Avatar.h>

#include <M5Stack.h>

#include <tasks/LipSync.h>

#include <WiFi.h>

#include <string>

#define N 15

using namespace m5avatar;

// AquesTalk License Key

// NULL or wrong value is just ignored

const char* AQUESTALK_KEY = "XXXX-XXXX-XXXX-XXXX";

// for wifi setup

const char* ssid = "yourssid";

const char* password = "yourpassword";

const int port = ****;

Avatar avatar;

WiFiServer server(port);

void setup_wifi(){

M5.Lcd.setTextColor(RED);

M5.Lcd.setTextSize(2);

M5.Lcd.setCursor(3, 10);

M5.Lcd.print("Connecting to ");

M5.Lcd.println(ssid);

// wifi setup

WiFi.mode(WIFI_STA); // WIFI_AP, WIFI_STA, WIFI_AP_STA or WIFI_OFF

WiFi.begin(ssid, password);

// WiFi.begin();

// Connecting ..

while (WiFi.status() != WL_CONNECTED) {

delay(100);

M5.Lcd.print(".");

}

// run server

server.begin();

}

void setup() {

int iret;

M5.begin();

// setup wifi

setup_wifi();

// For Kanji-to-speech mode (requires dictionary file saved on microSD)

// See http://blog-yama.a-quest.com/?eid=970195

// iret = TTS.createK(AQUESTALK_KEY);

iret = TTS.create(AQUESTALK_KEY);

M5.Lcd.setBrightness(30);

M5.Lcd.clear();

avatar.init();

avatar.addTask(lipSync, "lipSync");

}

void loop() {

WiFiClient client = server.available();

char c;

char message[N];

int i = 0;

if (client) {

while (client.connected()) {

if (client.available()) {

c = client.read();

// push "c"

if (c != '\n' && i < N-1) {

message[i] = c;

i++;

}else{

// Need to initialize with createK(AQUESTALK_KEY)

// TTS.play("こんにちは。", 80);

TTS.play(message, 80);

avatar.setSpeechText(message);

delay(1000);

// clear "c"

while (i >= 0){

i--;

message[i] = ' ';

}

i = 0;

}

}else{

avatar.setSpeechText("Client Disconnected.");

delay(1000);

avatar.setSpeechText("");

}

通信アプリを作るとき、送信側と受信側でそれぞれアプリを作成する場合が多いけど、今回は受信側（M5Stack）のアプリのみでOKです！

Telenetのインストール方法

「おしゃべり代行」を使う前準備として、PC側でTelenetが使えるようにしておきます。

今回はWindow10からTelnetを使ってみます。セットアップ手順については、以下の記事が参考になりました。

Windows10でTelnetを使用する｜ぱそまき

「おしゃべり代行アプリ」の使い方

「おしゃべり代行アプリ」を使うときの手順は以下の通りです。

【おしゃべり代行アプリの使い方】

「おしゃべり代行アプリ」をインストールしたM5Stackの電源ON
PCのTelenet起動
キーボードで文字入力（14文字以内）
「Enterキー」を押すとM5Stackが入力した文字を読み上げます

順番に説明しますね(*･ω･)ﾉ♪

M5Stackの通信状態を見ながらキーボードで遠隔操作

PCとの通信状態に応じて、M5Stackアバターの表示が以下のように変化します。

「おしゃべり代行アプリ」をインストールしたM5Stackを電源ONすると「PC通信待ち」の状態になります。M5Stack側の操作はこれだけで、以降はPC側の操作になります。

コマンドプロンプトに以下のコマンドを入力してTelnetを起動します。

telnet M5StackのIPアドレス [ポート番号]

例えば、こんな感じです。

telnet 192.168.2.3 5555

ただし、これだとローカルエコー（キーボード入力した文字の表示）がないため、以下のコマンドでローカルエコーを有効にする方が個人的に好きです。

telnet
set localecho
o 192.168.2.3 5555

PCがM5Stackとの通信接続に成功すると「文字入力待ち」状態になるので、14文字以内のフレーズを入力します。例えば「kururu」と入力してみます。

kururu

するとM5Stackアバターに入力した文字が表示されます。最後に「Enterキー」を押すとM5Stackアバターが入力した文字を読み上げます。

Telnetの起動は最初の1度だけで良く、「キーボード文字入力」→「Enter」を繰り返すことで、M5Stackアバターが「おしゃべり代行」してくれます。

#M5Stack とPCを無線通信させて実現したかった「おしゃべり代行アプリ(仮)」ができた！ pic.twitter.com/lkoKzvHV43

— はやぶさ (@Cpp_Learning) August 17, 2019

※冒頭と同じ動画です。

くるる

kururukawaii

M5Stackアバターに色んなセリフを喋らせてニコニコしてる”くるる”ちゃんが今日も可愛い♪

まとめ

M5Stackを使って「何かの役に立つアプリ」や「楽しいアプリ」を作りたいと思い…

『おしゃべり代行アプリ』を作ってみました。

不具合がでる可能性もありますが、このアプリを使ってくれた人が笑顔になってくれたら最高に嬉しいです。

くるる

これはM5Stackによる告白代行が流行る予感！

誰に何を告白するのか気になるぞ！笑

はやぶさ

アプリの使い方はお任せします。楽しんでくれたら嬉しいです。

M5Stack Gray（9軸IMU搭載）

スイッチサイエンス

M5StackとPCの無線通信による「おしゃべり代行アプリ」を作る

注意点

本記事を書くモチベーション（読み飛ばしOK）

機能検討

TelnetでWifiサーバ(M5Stack)とクライアント(PC)を通信

実践！M5Stackアバターによる「おしゃべり代行アプリ」を作る

Telenetのインストール方法

「おしゃべり代行アプリ」の使い方

M5Stackの通信状態を見ながらキーボードで遠隔操作

まとめ

プライム感謝祭セールを完全攻略！事前準備やお得キャンペーンを徹底解説

【アマゾンプライムデー2023年】完全攻略！事前準備やお得キャンペーンを徹底解説

【2023年版】アマゾンプライム会員のメリット・デメリットを紹介！

Golang × WebAssembly（wasm）入門

【Python】最適化フレームワークのCodable Model Optimizerで回帰モデルのパラメータ調整を自動化する

【GitHub】シンプルなREADME.mdの書き方 -コピペで使えるテンプレート付き-

【Pyxel】Pythonでレトロゲームを作ろう！総集編 -まるっと1週間でゲーム開発入門-

【仕事効率化】Visual Studio Code で Markdown を使いこなす

【深層学習入門】画像処理の基礎(画素操作)からCNN設計まで

【Pyxel】Pythonでレトロゲームを作ろう！ Day 1 -画像の扱い方-

注意点

本記事を書くモチベーション（読み飛ばしOK）

機能検討

TelnetでWifiサーバ(M5Stack)とクライアント(PC)を通信

実践！M5Stackアバターによる「おしゃべり代行アプリ」を作る

Telenetのインストール方法

「おしゃべり代行アプリ」の使い方

M5Stackの通信状態を見ながらキーボードで遠隔操作

まとめ

プライム感謝祭セールを完全攻略！事前準備やお得キャンペーンを徹底解説

【アマゾンプライムデー2023年】完全攻略！事前準備やお得キャンペーンを徹底解説

【2023年版】アマゾンプライム会員のメリット・デメリットを紹介！

Golang × WebAssembly（wasm）入門

【Python】最適化フレームワークのCodable Model Optimizerで回帰モデルのパラメータ調整を自動化する

【GitHub】シンプルなREADME.mdの書き方 -コピペで使えるテンプレート付き-

【Pyxel】Pythonでレトロゲームを作ろう！ 総集編 -まるっと1週間でゲーム開発入門-

【仕事効率化】Visual Studio Code で Markdown を使いこなす

【深層学習入門】画像処理の基礎(画素操作)からCNN設計まで

【Pyxel】Pythonでレトロゲームを作ろう！ Day 1 -画像の扱い方-

【Pyxel】Pythonでレトロゲームを作ろう！総集編 -まるっと1週間でゲーム開発入門-