Azure
VisualStudio
GoogleHome
dialogflow

「筋肉ボイス」を動かしてみる

はじめに

Google Homeを遊びたおす会にいってきました。Google Home の活用のお話や、Dialogflow Tipsなど盛りだくさんで大変勉強になりました。中でもちょまど(@chomado)さんの「Microsoft のサーバーレスのサービス Azure Functions (C#) を使って Google Home 対応アプリ「筋肉ボイス」」は、Azure Functionsとの連携をしていて、ソースも公開されている!というので、さっそく試してみました。

環境について

  • Windows10
  • Visual Studio 2017
  • Azure Functions
  • Azure Strage
  • Dialogflow

chomado/GoogleHomeHackのダウンロード

ちょまど(@chomado)さんのgithubからダウンロードします。
chomado/GoogleHomeHack

VoiceText Web API

VoiceText Web API を使用しますので、「API無料利用登録」にてAPIキーを入手します。APIキーはメールで送られてきます。

  • 「はじめる」ボタンクリック - 「無料利用登録」リンクをクリック

Microsoft Azure 管理ポータル

ストレージアカウントの作成

Microsoft Azure の 管理ポータルから、ストレージアカウントを作成します。

「+ リソースの作成」- 「Storage Account」をクリックします。

 image.png

「ストレージアカウントの作成」にて、各パラメータを設定し、「作成」ボタンをクリックします。

image.png

Visual Studio 2017

APIKeysクラスの追加

Visual Studio 2017 で、ChomadoVoiceプロジェクトを開きます。

GoogleHome.cs を開くと一部エラーになっている個所があります。VoiceTextのWebApiKeyを格納するクラスが外されているので、このクラスを追加します。

[GoogleHome.cs]
image.png

ソリューションエクスプローラーで、「keys」フォルダを作成します。

image.png

Keysフォルダを選択しながら、新しい項目を追加にて、クラスを選択、名前を「APIKeys.cs」とし、「追加」をクリックします。

image.png

作成された「APIKeys.cs」に、public変数VoiceTextWebApiKeyを追加してください。VoiceTextWebApiKeyの値は、VoiceText Web API の「API無料利用登録」にて入手したAPIキーを記載してください。

APIKeys.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ChomadoVoice.Keys
{
    class APIKeys
    {
        public static readonly string VoiceTextWebApiKey = "(WebAPIキーを記入)";
    }
}

VoiceTextWebAPIClientの追加

「NuGetパッケージの管理」にて、「VoiceTextWebAPIClient」を追加します。

image.png

Azureクラウドサービスへ発行する

Azureクラウドサービスへ作成したFunctionを発行します。
ソリューションエクスプローラーにて「発行」をクリック

image.png

発行先を選択にて、「新規作成」を選択、「発行」をクリック

image.png

App Serviceの作成にて、「リソースグループ」、「ストレージアカウント」をストレージアカウントの作成にて設定した値に設定します。また、ホスティングプランを新規作成します。

image.png

※Microsoftアカウントでログインしていない場合は、「アカウントの追加」にてログインを行ってください。
image.png

ホスティングプランの構成のうち、「場所」を「Japan East」にします。
image.png

App Serviceの作成にて、ホスティングプランが新規作成したものになっていることを確認し、「作成」ボタンをクリックします。

image.png

"Publish completed."と表示されたら成功です。

image.png

1回目でエラーになるケースがあるようです。もしエラーになったら「発行」ボタンで再発行してみてください。

image.png

Microsoft Azure 管理ポータル

Function URL のコピー

作成したFunction App (この例ではFunctionApp20180403015632)を Microsoft Azure の 管理ポータルで開きます。

「f GoogleHome」をクリックします。

image.png

「関数のURLの取得」をクリックします。

image.png

ポップアップ画面が開くので、コピーをクリックします。このURLを次のDialogflowのwebhookで使用します。メモ帳などで残しておいてください。 

image.png

Dialogflow

DialogflowにGoogleHomeを使用しているGoogleアカウントでログインし、Agent、Intent、Fulfillment を以下のように設定します。

項目 設定値 補足      
agent名 任意 例:chomadvoicetest
Intents 説明
anysay Azure Functionsと連携する音声トリガー
Fulfillment 説明
Webhook 「Function URL のコピー」でコピーしたURLを指定します

Intents 「anysay」

項目 設定内容 補足
Intents名 anysay
Training phrases * * に対して @sys.any を指定します
Responses Set this intent as end conversation を設定 会話の終了
Fulfillment Enable webhook call for this intent を設定

image.png

image.png

image.png

Fulfillment

「Function URL のコピー」でコピーしたURLを指定します

image.png

Simulator による動作確認

「Integrations」- 「Google Assistant」をクリックします。

image.png
 
「TEST」をクリックし、Simulatorを起動します。

image.png

 Simulatorでアプリ起動後に、「てすと」と送ると、mp3の音声がエラーになってしまっています。これは、ストレージアカウントに保存したmp3ファイルにアクセス権がないためです。

image.png
Microsoft Azure の 管理ポータルに戻り、mp3ファイルへのアクセス権を設定します。

Microsoft Azure 管理ポータル

アクセスポリシーの設定

Microsoft Azure の 管理ポータルにて、作成したストレージアカウント(この例では、googlehomestrage)を開き、「BLOB」をクリックします。
image.png

mp3レコードの右端の「...」をクリックし、「アクセスポリシー」をクリックします。

image.png

「パブリックアクセスレベル」を「BLOB」にして、「+ポリシーの追加」をクリックします。

image.png

以下のように設定し、保存ボタンをクリックします。

項目 設定値 補足      
ID    任意 例:readonly
アクセス許可    読み取り        
開始時刻      任意     例:2018/4/1 00:00:00
有効期限      任意     例:2018/4/30 00:00:00

image.png

Dialogflow

Simulator による動作確認

mp3のエラーがなくなりました。

image.png

おわりに

Azure Functions を初めて使いましたが、Visual Studioから発行できるし、C#でも記述できるし、これからいろいろ使ってみようと思います。

おまけ

Postman による動作確認

Postman を使用して Azure Functionsの動作確認をすることもできます。(Chrome ウエブストアの方を使いました)

image.png

項目 設定値 補足      
呼び出し   POST
URL     「Function URL のコピー」でコピーしたURL
Bodyタブ      row を選択   
          JSON(application/json)を選択         
          下記のJSONを指定              
{
  "result": {
    "resolvedQuery": "テスト"
    }
}

 「Send」ボタンで実行します。

結果
image.png