M5Stack

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

M5Stackおしゃべり代行アプリ

こんにちは。

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

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

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

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

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

くるる
くるる
もっと色んなセリフをしゃべらせたーい♪
くるる
くるる
口内炎が痛いときに代行にしゃべらせたーい♪

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

作ってみました(*・ω・)ノ♪

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

くるる
くるる
こういうの待ってた!

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

注意点

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

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

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

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

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

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

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

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

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

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

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

はやぶさ
はやぶさ
「良い所」も「悪い所」も情報共有したい

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

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

その気持ち…分かる!

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

うん。まぁ分かるかも…

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

くるる
くるる
くるる
可愛らしいM5Stackアバターが代行して、自分の言葉をしゃべってくれる!嬉しい!!
はやぶさ
はやぶさ
”くるる”ちゃんのように笑顔になってくれる人が少しでもいたら嬉しいな!

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

(小話 完)

以降から本編です。

スポンサーリンク

機能検討

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

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

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

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

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

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

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

M5StackとTelnet通信

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

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

ネットワークやIPアドレス

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

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

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

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

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

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

Telenetのインストール方法

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

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

スポンサーリンク

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

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

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

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

順番に説明しますね(*・ω・)ノ♪

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

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

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アバターが「おしゃべり代行」してくれます。

※冒頭と同じ動画です。

くるる
くるる
くるる
kururukawaii

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

まとめ

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

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

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

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

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

はやぶさ
はやぶさ
アプリの使い方はお任せします。楽しんでくれたら嬉しいです。
M5Stack
【M5Stack入門】初心者におすすめしたい情報まとめこんにちは。 現役エンジニアの”はやぶさ”@Cpp_Learningです。 先日、Maker Faire Tokyoや趣味T...
M5Stack Avatar Talk
【M5Stack入門】アバターおしゃべりアプリの作り方 -PlatformIO IDE for VSCode編-こんにちは。 現役エンジニアの”はやぶさ”@Cpp_Learningです。 前回『M5Stack初心者におすすめしたい情報ま...
LINEスタンプ配信中!

フクロウのLINEスタンプ

当サイトのマスコットキャラクター

「フクロウのくるる」が

LINEスタンプになりました!

勉強で疲れたあなたに癒しをお届け☆

お迎え待ってます(*・ω・)ノ♪

今すぐお迎えする

40個セットがたったの50コインとお得です