音声トリガーのアクションをDIでE2Eテストする

>100 Views

August 20, 26

スライド概要

音声入力(マイクのdBレベル)をトリガーに録音・再生を自動制御するReact Nativeアプリ「VoiceMirror」の開発を題材に、マイク入力という「コードから直接コントロールできない」対象をどうE2Eテストするかを解説します。

ポイントは、音声入力を「サービス」として抽象化し、DI(依存性注入)でE2Eテスト用のスタブサービス(WebSocket経由で任意の波形データを注入できる E2EAudioRecordingService)に差し替えるアーキテクチャ。ReactのContext Providerがそのまま便利なDI機構として機能することも紹介し、この設計はNative/Flutterなど他プラットフォームでも応用可能という気づきで締めくくります。

profile-image
スライド一覧

hey

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 1.7M
slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 1.5M
slide-thumbnail

UE5レンダリングフロー総おさらい(2024) 基礎編！[CEDEC+KYUSHU 2024]
ue5 unreal engine ue-rendering
user-img エピック ゲームズ ジャパン 1.3M
slide-thumbnail

Meta XR SDK(V66-74)でQuestアプリを開発
spatial anchor unity quest pro shaperecognizeractivatestate oculus integration transformfeaturestateprovider building blocks transformrecognizeractivestate ovrsemanticclassification jointdeltaprovider ovrscenemanager jointvelocityactivestate オクルージョン sequenceactivestate scene manager ambisonic depth api metaxraudiosource playerlocomotor meta xr sdk quest3 ovrplayercontroller マルチモーダル meta haptics studio direct touch ui meta xr haptics sdk ovrspatialanchor ovrtrackedkeyboard hapticclipplayer fingerfeaturestateprovider hapticclip ワイドモーションモード wmm mruk mr utility kit voice sdk jointrotationactivestate meta horizon os ui set asw application spacewarp ovr metrics tool unityscene manager colocation discovery コロケーション mx ink passthrough camera api hand tracking microgestures webcamtexturemanager passthroughcamerautils cameraviewermanager hand pose selector recorder
user-img あうぜん 1.2M
slide-thumbnail

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】
ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer
user-img エピック ゲームズ ジャパン 1M
slide-thumbnail

【DeNA】新卒エンジニア向け 会社説明資料
user-img DeNA新卒採用 1M
各ページのテキスト
1.

音声トリガーのアクションをDIで E2Eテストする 武藤大樹 potatotips #96 2026.8.20

2.

自己紹介 https://tai2.net 2010〜 フリーランス / モバイルアプリいろいろ作った (ポテチでも一回LT) 2020〜 Autify / モバイルアプリ用のE2EテストSaaSめちゃくちゃ作った 2026.8〜 CELLORB / eスポーツの会社でライブ配信のアプリ作っていく

3.

音声をエコーバックするだけのアプリを作った • 趣味開発 (React Native) • https://github.com/tai2/VoiceMirror • 演技とか声マネの練習に使う • マイクのdBが閾値を上回ったら自動録音 • マイクのdBが閾値を下回ったら自動再生

4.

余談: みんなE2Eテストあまり興味ない…? • モバイルのE2Eテスト自動化してないやついる!? • potatotipsのwikiを"appium"で検索→ ヒット0件

5.

テストすべき仕様(波形に応じたアクション)

6.

E2Eテストどうする? テストできない!? アーキテクチャレベルで対応 1. 音声入力をサービスとして抽象化 2. DIでスタブサービスに差し替え

7.

音声入力サービス • E2EAudioRecordingService ← WebSocketサーバー • 任意の波形データをメッセージとして送信、イベントをテストする

8.

テストコード

9.

発見 • 発見: ReactのContext Providerは、DI機構としてめちゃくちゃ便利 • Native,Flutter等でも同じアイデアでテストできるはず