M5Stack

【M5Stack入門】アバターおしゃべりアプリの作り方 -PlatformIO IDE for VSCode編-

M5Stack Avatar Talk

こんにちは。

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

前回『M5Stack初心者におすすめしたい情報まとめ』の記事を書きました。

M5Stack
【M5Stack入門】初心者におすすめしたい情報まとめこんにちは。 現役エンジニアの”はやぶさ”@Cpp_Learningです。 先日、Maker Faire Tokyoや趣味T...

この記事を読んだらアプリ自作したくなっちゃうよね(*・ω・)ノ♪

くるる
くるる
う~ん。。自作したいけど、どんなアプリを作ろうかな?

と悩んでいるフクロウの”くるる”ちゃん@kururu_owlがいるので…

はやぶさ
はやぶさ
『アバターがしゃべるアプリ』などはいかがですか?

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

本記事で『アバターに好きな言葉をしゃべらせるアプリ』の作り方を説明します。

機能検討

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

今回の場合アバターに好きな言葉をしゃべらせるアプリ』なので、以下の機能で実現できます。

アバターお喋りアプリの機能
  • アバター表示(アニメーション)
  • テキストを読み上げる(音声合成)

アバター表示については、M5Stack-Avatarというライブラリがあります!

テキスト読み上げについては、音声合成エンジンAquesTalk pico for ESP32があります!

先人の知恵を借りる

先に種明かしすると、m5stack-avatar/examples/talkのソースコードを使えば、簡単に『好きな言葉をしゃべらせる』を実現できました。

Aruduino IDEにAquesTalk-ESPをセットアップする方法は、以下のサイトで紹介しています。

スポンサーリンク

本記事を書くモチベーション

くるる
くるる
くるる
サンプルコードがあって、セットアップ手順の紹介記事もあるなら、本記事を書く意味が…ない?

うむ!『M5Stackのアバターにしゃべらせる』ことが目的だと本記事を書く意味はないね(備忘録としては役に立つ)

ただ、”くるる”ちゃんVisual Studio Code好きでしょう?

くるる
くるる
すきー♪

PlatformIO IDE for VSCodeから『アバターに好きな言葉をしゃべらせる』アプリの開発ができたら嬉しい?

くるる
くるる
嬉しいー♪

もっと言うと、30分くらいでサンプルコード動かせたら…どうかな?

くるる
くるる
最高ー♪

というわけで、本記事は以下のモチベーションで書き上げました。

本記事の役割

PlatformIO IDE for VSCodeを使って、手軽に『M5Stackアバターお喋りアプリ』を動かす方法を伝えること

動作確認

今回は、Windows10にPlatformIO IDE for VSCodeをインストールしました。また、M5Stack Grayで動作確認しました。

PlatformIO IDE for VSCodeインストール方法や基本的な使い方については、以下の記事で説明済みなので割愛します。

M5Stack
【M5Stack入門】初心者におすすめしたい情報まとめこんにちは。 現役エンジニアの”はやぶさ”@Cpp_Learningです。 先日、Maker Faire Tokyoや趣味T...
くるる
くるる
環境構築OK!今から30分でアプリ動かすよー

くるるやる気満々の”くるる”ちゃんが今日も可愛い(*・ω・)ノ♪

スポンサーリンク

実践!M5Stack-AvatarのTalkアプリを動かす

先に手順を確認しておきます。

  1. 各種ダウンロード
  2. 各種設定
  3. プロジェクト生成
  4. ソースコード生成
  5. 動作確認

順番に説明していきます!

各種ダウンロード

最初に、M5Stack-Avatarをダウンロードします。

M5Stack_Avatar続いて、AquesTalk-ESPをダウンロードします。

AquesTalk-ESP

いずれもZIPファイルなので、適当な場所に展開してください。

各種設定

「m5stack-avatar-master」フォルダをリネームして、そのままプロジェクトとして使うので、今回は「m5stack-avatar-master」 ⇒ 「m5stack-avatar-kururu」とリネームしました。

AquesTalk-ESP解凍後にできる「aquestalk_esp32」を「m5stack-avatar-kururu/lib/」に移動させます。

M5Stack_Avatar

本来なら、platformio.ini(設定ファイル)を新規で作成するのですが、今回は既に用意してあるものを使います!

以上で前準備完了です。

くるる
くるる
10分経過~

プロジェクト生成

PlatformIO IDEを起動して「Import Arduino Project」をクリック

PlatformIO IDE for VSCode

以下の手順で「Import」します

PlatformIO IDE for VSCode
Import Arduino Project
  1. お使いのボード(M5Stack)を選択
  2. チェックを入れる
  3. Importしたいプロジェクトフォルダ(m5stack-avatar-kururu)を選択
  4. Importをクリック

ソースコード生成

「m5stack-avatar-kururu」が表示され、▷をクリックすると中身が確認できます。以下の手順で「main.cpp」を作成します

PlatformIO IDE for VSCode
ファイル追加
  1. srcをクリック
  2. 「新規ファイル作成ボタン」をクリック
  3. main.cpp作成

m5stack-avatar/examples/talkのソースコードをmain.cppにコピペします。そのままでも問題ありませんが、少し改良したものが以下です。

改良ポイントは以下の通り。

M5Stack LovyanLauncher対応】

  • 5行目:SD-Updater用のヘッダーファイル追記
  • 17~22行目:binファイル生成用コード追記

【好きな言葉をしゃべらせる】

  • 38行目:「喋らせたい言葉」と「喋る速さ」を変更
  • 39行目:アバターに表示する「吹き出し文字列」を変更
くるる
くるる
20分経過~

動作確認

左下の「チェックボタン」クリックでビルドが始まります。

PlatformIO IDE for VSCode

ビルド後に”firmware.bin”という名前で下記の場所に保存されます。

今回は「firmware.bin」 ⇒ 「piyopiyo.bin」にリネームします。このbinファイルをSDカードに移動して、SD-Updaterから実行すればOK!

※冒頭と同じ動画です

くるる
くるる
ひよこ大好き♪
くるる
はやぶさ
はやぶさ
どっちも可愛いよー♪

FTP Server(SDCard)を使えば、SDカードを抜き差しせずにbinファイルを移動できます。以下のサイトが参考になります。

M5Stack LovyanLauncherの使い方|ラズパイズキノニッキ

くるる
くるる
25分で動作確認完了!すごーい♪

まとめ

『アバターに好きな言葉をしゃべらせるアプリ』の作り方を説明しました。ただし、Aruduino IDEを使った例は既にあったので、以下のモチベーションで本記事を書き上げました。

本記事の役割

PlatformIO IDE for VSCodeを使って、手軽に『M5Stackアバターお喋りアプリ』を動かす方法を伝えること

慣れもあると思いますが、30分以内に動作確認まで実施できると考えています。

くるる
くるる
時間がかかる”PlatformIO IDE”や”M5Stack用ライブラリ”がインストール済みな所からスタートするけどね
くるる
くるる
それでも”PlatformIO IDE”の使い方とか参考になりました!

”くるる”ちゃんのように感じてくれる人がいれば嬉しいです。

はやぶさ
はやぶさ
理系応援ブロガー”はやぶさ”@Cpp_Learningは頑張る理系を応援します!
LINEスタンプ配信中!

フクロウのLINEスタンプ

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

「フクロウのくるる」が

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

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

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

今すぐお迎えする

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