📝

【Flutter × Go × ESP32】ミーアにミュート機能を追加する方法

2024/06/30に公開

はじめに

ベータ版をリリースした後、実際に使っていただいた複数のユーザから

「話す頻度に「喋らないモード」が欲しい」

との要望が来たので、今回は本機能の実装を記載。

詳細を伺ったところ、

「オンラインのmeeting中に、いきなり話し始めるとビックリするのと、勉強や仕事などで集中したい時もあるので」

とのこと。

現在、ミーアの話す頻度の設定は、「ホーム画面→設定タブ→話す頻度」の部分で設定できる。

当初は、ここのプルダウンの選択項目の一つとして「しゃべらない」を追加するか、この画面の下に「しゃべらないモードに切り替える」という文言と、スイッチのトグル表記にしようかと考えていた。

しかし、一緒に開発をしているエンジニアから

「頻度の設定は少しアクセスしにくいので、個人的にはホーム画面のわかりやすい箇所でON/OFFできると良いかな・・？と思いました。現状だと数日に一回くらい電源OFFにする機会があって、一番よく使う機能になるかもしれないです。アレクサだと、音量の横くらいにミュートボタンがありました。」

とコメントをもらったので、試しにアレクサを見てみたところ、確かにホーム画面にミュート（この場合はおやすみモード）がアイコンのトグルで表示されていた。

というわけで、アレクサを参考にして、音量スライダーの下に、ミュート機能という項目を設置して、スイッチのトグルでONOFFを切り替えられるようにしようと思う。デフォルトはOFF。

アプリ→サーバー→デバイス間で、型変換が現状多数発生しているので、型変換を中心に、実装方針をまとめておく。

アプリ（Dart）

DartオブジェクトからProtoBufメッセージへの変換
- アプリのUIでミュートスイッチの状態を変更し、Dartオブジェクトに反映。
- DartオブジェクトをProtoBufメッセージに変換。
API通信でProtoBufメッセージをサーバーに送信
- 変換されたProtoBufメッセージをAPI経由でサーバーに送信。

サーバー（Go）

デバイス（ESP32）

ミュートスイッチの追加

アプリのホーム画面にミュート機能を有効にするためのスイッチを追加する。
valueプロパティには現在のミュート状態 (isMuted) を渡し、onChangedプロパティにはスイッチが切り替えられたときに呼び出されるコールバック関数 (_onMuteChanged) を設定する。

// ミュートスイッチをUIに追加
Switch(
  value: isMuted,
  onChanged: _onMuteChanged,
),

ミュート状態の更新