音声体験、たとえばデジタルアシスタントや車載のハンズフリー音声システムのプロトタイプを作りたいと思ったことがあるなら、朗報です！ProtoPie の際立った機能の一つは、音声インタラクションを作成できることです。音声は、私たちの日常のテクノロジーとのやり取りにすっかり浸透しており、アクセシビリティの観点でも非常に重要です。このチュートリアルでは、わずか数分で自分だけの素晴らしい音声インタラクションを作成する方法を学びます。その簡単さと手早さにきっと驚くはずです！
用意するもの
このチュートリアルに沿って進めるには、次のサンプル Pie をダウンロードしてください:
学べること
このチュートリアルを終えるころには、次のことができるようになります:
Speak response を使って、ProtoPie に好きなテキストを読み上げさせる
Listen response を使って、ProtoPie に音声入力を聞き取らせる
Voice Command Trigger を使って、特定の発話された単語やフレーズに ProtoPie を反応させる
所要時間: ≤15 分
ステップ 1: ProtoPie にしゃべらせてみましょう！
上でダウンロードしたサンプル Pie を Studio で開きます。インタラクションが始まったら ProtoPie があなたに挨拶するようにしましょう。
Start Trigger を追加します
Speak response を Start Trigger に追加します。
画面上にすでにあるテキストを ProtoPie に読み上げさせましょう。
pieText 1.という名前の Text Layer の内容をコピーします。
このテキストを Speak Response のプロパティパネルにある "Content" ボックスに貼り付けます。
読み上げられるテキストのプレビュー音声を聞けるはずです。Voiced By ドロップダウンで Male または Female の音声を選べます。voice プロパティを変更すると、新しい声で読み上げられたテキストのプレビューを聞けます。
ちなみに、ProtoPie はインクルージョンとアクセシビリティを非常に大切にしています。そのため、ProtoPie に 40 種類の言語 のいずれでも読み上げさせることができます。ローカライズされた体験を作るのに最適で、視覚障害のある方に合わせてインタラクションを調整するのにもさらに役立ちます。利用できる言語は Language ドロップダウンで確認してください。
……そしてさらに！
Pie をプレビューしてみましょう。ProtoPie が「こんにちは、私は ProtoPie です。今日は何をお手伝いできますか？」と読み上げて迎えてくれるはずです。
ステップ 2: 聞き取りを開始する
今度は ProtoPie にあなたの応答を聞き取らせましょう。マイクアイコンをタップすると ProtoPie が Listening を開始するようにします。
Tap trigger を
mic_onLayer に追加します。Listen Response を Tap Trigger に追加します。
ProtoPie に聞き取りを開始させたいので、プロパティパネルで Start が選択されていることを確認してください。
デフォルトでは、ProtoPie は話し終えると聞き取りを停止します。ただし、話すのを止めたあとも聞き取りを続けたい場合は、Continuous の横のボックスをオンにできます。今回のケースでは音声コマンドは短いので、これはオフのままにしておきましょう。
今これをプレビューしても、ほとんど変化がないことに気づくでしょう。ただし、マイクアイコンをクリックしたときに小さな違いが見えます。
Preview ステータスバーの左下隅に、小さく点滅するマイクアイコンが表示されます。これで ProtoPie が音声入力を聞き取っていると分かります。
何でも話しかけてみてください。話すのをやめると、このアイコンの点滅が止まるはずです。
ステップ 3: 音声コマンドを追加する
ここからが楽しくなってきます！音声コマンドを作成しましょう。たとえば「音声と発話でインタラクションを作成できますか？」のように、ProtoPie に音声プロトタイピング機能について尋ねたいとします。
Voice Command Trigger を追加します。
Trigger Point の見出しの下に、2 つのオプションがあります:
While Speaking は、話している最中でも認識された瞬間に単語やフレーズに ProtoPie を反応させます
After Speaking は、ProtoPie に話し終わるまで待ってから応答するよう指示します。
今回は、質問が終わるまで ProtoPie に丁寧に待ってほしいので、After Speaking を選びます。
Command ボックスでは、認識させたいテキストを入力します。上で説明したように質問全文を入力してもよいのですが、そうする必要はありません。ProtoPie では柔軟に設定できるので、質問の言い回しがいくつか違っていても対応できます。今回本当に重要なのは voice や speech. のような単語です。なので、この Trigger はそれらの単語のいずれかに反応するよう設定できます。
Trigger が反応してほしい単語やフレーズは、それぞれ別の行に入力してください。
talk という単語と spoken command というフレーズを、ProtoPie がこの Trigger 発火のために認識する単語・フレーズのリストに追加しました。これにより、「音声コマンドに応答できますか？」や「私の話を聞けますか？」といった質問に対応できます。
Trigger の設定ができたので、ProtoPie がコマンドを認識したときに発火する Responses を追加しましょう。
ProtoPie に応答を読み上げさせましょう。Speak Response を追加し、次のテキストを設定します:
もちろんです！テキストの読み取り、または入力された音声への応答のどちらでも、リアルな音声インタラクションを作成できます。これ以上何を言う必要があるでしょう？私はプロトタイピングの天才です！ハッハッハ！
ステップ 1 で選んだのと同じ音声を必ず選び、全体の聞こえ方を統一してください。
ProtoPie の応答を、読み上げられるのと同時に画面にも表示しましょう。Text response を追加し、
pieText 1Layer を選択して、上と同じテキストに更新します。
これをプレビューしてみましょう。インタラクションは ProtoPie の挨拶の読み上げから始まります。マイクアイコンをクリックして質問してください。speech や voice に関する質問なら、言い回しは自由に変えて構いません。Voice Command Trigger で指定した単語やフレーズのうち少なくとも 1 つが質問に含まれていれば、ProtoPie が応答します。
ステップ 4: フィードバックを追加する
インタラクションはこれで動作していますが、あなたが話した内容をそのまま画面に反映できたら素敵です。ProtoPie には、ProtoPie が聞き取り中にあなたが話したすべての単語を記録する、$voiceTranscript という定義済み変数があります。これを使って、話した質問を画面に表示できます。
もう 1 つ Voice Command Trigger を追加します。複数の Voice Command を同時に有効にしておいても問題ありません。実際、これが堅牢な音声インタラクションを作る鍵です。さまざまなシナリオごとに、別々の Voice Command Triggers を用意しましょう。
質問を話している最中に画面へ表示したいので、今回は While Speaking を Trigger Point に選びます。
さらに、これは特定のコマンドを聞き取るものではありません。何が話されたかに関係なく、この Trigger を発火させたいのです。したがって、Command の横のボックスのチェックを外してください。
次に Text Response を追加します。対象 Layer として
userTest 1を選びます。Content では Formula を選び、下のボックスに $voiceTranscript と入力します。
これをプレビューしてみましょう。マイクアイコンをクリックすると、話した内容が話している最中に画面に表示されるはずです。
パイみたいに簡単！
ProtoPie で音声インタラクションを作るのは、本当にそれだけ簡単です。たった数ステップで、Speak と Listen の Responses を使って ProtoPie に読み上げさせ、音声入力を聞き取らせる方法を学びました。次に Voice Command Trigger を使って、特定の発話された単語やフレーズに応答させました。最後に、定義済み変数 $voiceTranscript を使って、話した内容そのものを画面に表示しました。しかも、まったく時間はかかりませんでした！
最後に少しだけ
ProtoPie の音声機能はまだベータ版です。そのため、期待どおりに動かない場合があります。たとえば Pie をクラウドに公開すると、Speak trigger は Web ブラウザのプレビューでは動作しません。Speak Triggers を使うには、ProtoPie Studio か、お使いのデバイス向けの ProtoPie Player アプリを使用する必要があります。また、音声認識を動作させるには、インターネット接続が有効である必要があります。詳細は こちら をご覧ください。
リソース
音声プロトタイピングの例: 音声を使ったプロトタイピングについて、いくつかの動作する例を紹介するブログ記事
車載音声コントロールのプロトタイプを作成する方法**: **音声プロトタイピングとハードウェア統合機能を使って、音声操作の車載体験を設計する方法を探ってみましょう。
