日々の簡単なプロトタイピングに Flutter を活用する

こんにちは、 CTO 室の山田です。 私は新卒入社から現在までずっと Amazon Alexa や LINE Clova などのいわゆるスマートスピーカーやスマートディスプレイ向けのアプリケーション開発に携わっています。

特に Amazon Alexa に関しては、日本だけでなく、スペイン、メキシコ、アメリカ、ブラジルの計 5 カ国にてサービスを展開しています。

現在は上記のプラットフォームへアプリケーションを公開する形でサービスを提供していますが、私たちが掲げている目標は「Voice User Interface の特性を活かし毎日の料理をもっと楽しみにする」ことであり、必ずしも特定のデバイスやプラットフォームに特化をして開発をするわけではありません。

例えば iOS/Android などのモバイルデバイス上での方が今より良いサービスを提供できるかもしれませんし、私たちでハードウェアを開発した方が良いこともあるかもしれません。 今のスマートスピーカーはいわゆるウェイクワードで呼び出してから指示を出しますが、実は料理のシーンではもっと別の良い方法があるかもしれません。

こういった可能性を模索する上で、 Voice User Interface というまだまだ技術的に発展途上な領域に関しては、そもそも実用できるレベルで動くのか。という技術的な検証が非常に重要となります。

しかしながら、さまざまな領域の技術的検証をする場合、当たり前ですがそれぞれについて小さくない学習コストがかかります。

これを理由にその可能性を掘ることは諦めたくないですが、出来る限り検証したい部分以外は最低限のコストで済ませたいです。

Flutter を用いたプロトタイプの開発

このような背景から、 低い学習コストで iOS/Android 純正ライブラリの性能を検証する用途で Flutter を活用することができるのではないかと実際にプロトタイプを作成し検証を行いましたので事例として紹介させていただきます。 今回はキッチンで料理をしている状況で iOS/Android 純正の音声認識ライブラリの認識精度がどの程度の性能かを検証するプロトタイプを作成しました。

まずはこちらをご覧ください。


目を見て話せるレシピアプリのプロトタイプ


目を見て話せるレシピアプリのプロトタイプ 2

人の目線に気付くと話を聞く姿勢になってくれて、手順を読み上げてくれるレシピアプリです。ゲームによくある感じの近づくと注意を向けてくれて会話ができる CPU みたいな感じのをイメージしてみました。

今回のプロトタイプでは、手順の読み上げや、以下の動画にある通り材料の分量の確認と、動画には無いのですが作った料理を写真に撮ってもらう機能を用意してみました。

リモートワークなので自宅での撮影になるのですが、リアルの日常的なプロトタイピングの風景だと思っていただければ幸いです。実際にこの機能を使って料理も作ったのですが、特に大きな問題もなく作り切ることが出来ました。 今回は技術的検証なので、例えば換気扇や水を流している状況下での認識精度も簡単にテストをしてみたのですが、問題なく認識していました。


目を見て話せるレシピアプリのプロトタイプ 3

今回のテストから以下のことがわかりました。

  • 意外とスマートフォンのマイクでもキッチンで十分に使える音声認識精度だった
    • 離れた位置から声で操作することを念頭に置いて開発されたデバイスではないため、あまりマイクの性能には期待をしていなかったが、料理中全体を通しても認識エラーは数えるほどだった。
    • 特に換気扇や水が流れている状態でも認識率に大きい影響がなかったことが印象的だった
    • 今回は認識できる発話のバリエーションが少なかったため、もっとさまざまな発話に対応させた時の認識精度についてもテストをしたい
  • 「目を合わせると話ができる」のコンセプトは微妙だった
    • やはり音声インターフェースの強みは「手」と「目」がいらないことなんだと改めて感じた。いちいちスマートフォンを覗き込みにいかないといけないとなると便利さ半減だなと料理している時に感じた。結局はスマートフォンが置いてある場所に動線が影響を受けるように感じた
    • 意外とスマートフォンが目を認識する精度は高く、逆に高すぎるせいで変に検知されないよう検知しづらい場所に置いて使っていたため、ちょっと不自然な動きをする羽目になった
    • 目を検知しづらい場所に置くのではなく、もう少し別の置き方とか、そもそも目を検知するルールを変更すればもう少し良くなる可能性を感じた。今は目をあわせなくとも両目の存在が検知されたら反応するようにしているが、それだと目が届くところに置きづらいのできちんと目を合わせないと反応しないようにすればもう少し使いやすくなるかもしれないと感じた
    • もしくは目を合わせる。ではなく、 Hand Pose Detection に置き換えても良いかも知れない
    • ウェイクワード無しで目を見ると話しかけられるのはそれなりに簡単だし楽だと感じた一方、ファミリーの環境だと誰に話しかけてるのか明示的でなくなってしまうのでちょっと微妙なのかも知れないなと感じた

これらの機能は、 Flutter のパッケージ越しに SFSpeechRecognizer や AVSpeechUtterance など iOS 純正の Framework のみで実現しています。また、同じパッケージで Android の純正 API のみで実現することも可能です。 さらに、まだ stable channel では提供されていないため今回は取り組みませんでしたが Web app や Linux app の開発もサポートを予定しているようなのでこれらのプラットフォームについてもコストをかけずに検証が可能になるかもしれません。

このように、さまざまなプラットフォームの技術的な検証を小さい学習コストで実現出来ました。

終わりに

今回は、モバイル向け OS 純正の音声認識ライブラリの性能を、出来る限り小さい学習コストで検証するために Flutter を活用しました。

Flutter を使い開発したアプリケーションはキッチンで料理をするのに十分使えるレベルのクオリティであったため、実際にそのアプリケーションを使いキッチンで料理をするプロトタイピングを行いました。

これにより、音声認識ライブラリの認識性能について、私たちが想定する利用シーンに特有の事柄に対しても検証をすることが出来ました。例えば今回は換気扇や水が流れているシーンでも問題なく認識できうることがわかったのは大きな収穫でした。

また、今回コンセプトとして据えた「目を見て話せる」というのはキッチンで料理をするシーンでは微妙で、もう少し洗練させるか、もっと別の良いトリガーを考える必要があると感じました。 これもモバイル向け OS の画像認識ライブラリの性能や仕様によるところがあるため、例えばペーパープロトタイピングなどでは実感するのが難しく、実際に簡単なアプリケーションを作って料理をしたおかげで得られた収穫でした。

このように、技術的な検証を含む日常的なプロトタイピングにおいて、 Flutter を活用することでモバイル向け OS のアプリケーションを簡単に開発し、プロトタイピングすることが出来ました。 今後も、より多くのプラットフォームで動くようになることを期待しつつ、さまざまなプロトタイピングのシーンで活用していこうと思います。

/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/