こんにちは。
現役エンジニアの”はやぶさ”@Cpp_Learningです。
前回『M5Stackアバターおしゃべりアプリ』の作り方に関する記事を書きました。
Aボタン(一番左のボタン)を押すと”設定したセリフ”をしゃべるアプリです。
ただし、このアプリだと1フレーズしかしゃべれないので…
と面白いアイデアを閃くフクロウの”くるる”ちゃん@kururu_owlがいるので…
作ってみました(*・ω・)ノ♪
#M5Stack とPCを無線通信させて実現したかった「おしゃべり代行アプリ(仮)」ができた! pic.twitter.com/lkoKzvHV43
— はやぶさ (@Cpp_Learning) August 17, 2019
M5Stackと無線接続したPCのキーボードから文字を入力すると、その文字をアバターがおしゃべりしてくれます!
本記事で『おしゃべり代行アプリ』の作り方を説明します。
Contents
注意点
最初に注意点を説明しておきます。
私の保有しているアクセスポイントとM5Stackの相性が良くないみたいで、通信が不安定な状態で動作確認しています…
また、M5Stack Grayを使っているのですが、M5Stack-AvatarやWifi接続などの複数機能を盛り込むとメモリ不足になるという情報をキャッチしています。
- 通信状態が不安定な環境
- メモリ不足
- ひょっとしたらソースコードにバグあり
以上3点により、ご紹介する「おしゃべり代行アプリ」が上手く動作しない可能性があります。
こんな状態でブログ記事を書いて良いのか少し悩みましたが…
私自身が「上手くいった事例」と同じくらい「上手くいかなかった事例」を欲しているので…
「良い所」も「悪い所」も情報共有したいと想い、本記事を書きました。
以上の注意点を考慮し、それでも興味を持ってくれる人は以降を読み進めて頂けると嬉しいです!
本記事を書くモチベーション(読み飛ばしOK)
という理由以外にも本記事を書きたいと思った理由がありますので、少し小話を…
その気持ち…分かる!
うん。まぁ分かるかも…
あと少しだけ真面目な話をすると、口内炎に限らず「手は動くけど、口を上手く動かせない…」という人がいるかもしれない。。
とか考えながら「おしゃべり代行アプリ」を作成しました(*・ω・)ノ♪
(小話 完)
以降から本編です。
機能検討
最初に『開発したいアプリ』を実現するための”機能”を検討します。
今回の場合『アバターにおしゃべりを代行してもらうアプリ』です。
”アバターおしゃべりアプリ”については、以下の記事で作り方を紹介しています。
なので、この記事で紹介した”おしゃべりアプリ”に”代行の機能”を追加してみます。
TelnetでWifiサーバ(M5Stack)とクライアント(PC)を通信
「手は動く」という前提で”おしゃべり代行の機能”を検討してみます。色んな方法がありますが…
使い易さなどを考慮すると、キーボード入力した文字列をM5Stackに読み上げてもらうのが良さそうです。
具体的には、ホームルータやスマホなどをアクセスポイントとしたネットワークを構築し、Telnetで通信を行います(以下がイメージ図です)
今回、Telnetを採用した理由については以下の通りです。
- 単純な文字データが送信できれば良い
- セキュリティよりも(私が)実現しやすい方法を優先
M5StackとPC間でTelnetを使う方法については、先駆者がいますので参考にさせて頂きます。
実践!M5Stackアバターによる「おしゃべり代行アプリ」を作る
m5stack-avatar/examples/talkとM5Stack/Telnetを組み合わせた「おしゃべり代行アプリ」のソースコードが以下です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
#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を使ってみます。セットアップ手順については、以下の記事が参考になりました。
「おしゃべり代行アプリ」の使い方
「おしゃべり代行アプリ」を使うときの手順は以下の通りです。
【おしゃべり代行アプリの使い方】
- 「おしゃべり代行アプリ」をインストールした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
※冒頭と同じ動画です。
M5Stackアバターに色んなセリフを喋らせてニコニコしてる”くるる”ちゃんが今日も可愛い♪
まとめ
M5Stackを使って「何かの役に立つアプリ」や「楽しいアプリ」を作りたいと思い…
『おしゃべり代行アプリ』を作ってみました。
不具合がでる可能性もありますが、このアプリを使ってくれた人が笑顔になってくれたら最高に嬉しいです。
誰に何を告白するのか気になるぞ!笑