スマートスピーカー

DialogFlowのinline Editorでアプリを作る流れ【2019年7月・GoogleHome】

DialogFlowのinlineエディターでアプリを作る流れ【2019年7月・GoogleHome】

 

スマートスピーカー最近ますます流行ってきていますね。私もスマートスピーカーアプリ開発に挑戦している最中です。そこで、私がスマートスピーカーアプリ開発で知り得た知識や作成の流れを共有していきたいと思います。

前回からの続きになっていますので、もしよろしければ前回の記事も参照ください。前回はActions on Google + DialogFlowで簡単なアプリをノンプログラミングで作る流れについて説明しました。

DialogFlowのinlineエディターでアプリを作る流れ【2019年7月・GoogleHome】
DialogFlowで簡単なアプリを作る流れ【2019年7月・GoogleHome】Actions on GoogleとDialogFlowでGoogleアシスタント対応アプリを作っていきたいと思います。最初は最も簡単な、ただ応答するだけのアプリを作る流れをスクリーンショットで解説しますので、ぜひみなさんも作ってみてください。...
まる太
まる太
今回は、Dialogflow付属のinlineエディターを使ってみたいと思います。inlineエディターによるプログラミングで、できることの幅が広がります。

 

それでは、Dialogflowのinlineエディターで簡単なプログラミングをしていきたいと思います。

今回は地名を言うと、その場所の天気を応答してくれるよう条件分岐(if文)で処理を変えるように作っていきます。

今回も作ったアプリはシミュレーターを用いて検証しますので、PCさえあればGoogle HomeやAndroidスマホをお持ちでない場合でも作って検証することができます

本記事を読めばここが分かるようになります

・DialogFlowのinlineエディターの使い方が分かるようになる

必要なもの

・パソコン

・ブラウザ(Google Chrome推奨)

シミュレーターを使うので、スマートスピーカー(Google Home)は無くても問題ありません。

それでは進めていきましょう。

 

天気を応答するインテントを作成

まずは前回の「Hello World」プロジェクトに、天気を応答するインテントを追加します。

DialogFlowのinlineエディターでアプリを作る流れ【2019年7月・GoogleHome】
DialogFlowで簡単なアプリを作る流れ【2019年7月・GoogleHome】Actions on GoogleとDialogFlowでGoogleアシスタント対応アプリを作っていきたいと思います。最初は最も簡単な、ただ応答するだけのアプリを作る流れをスクリーンショットで解説しますので、ぜひみなさんも作ってみてください。...

Intentsから、「今日の天気」というインテントを作成します。

「今日の天気は」と聞かれたら、「晴れです」「雨です」「曇りです」の3パターンをランダムに応答するようにしておきます。

インテント

右上のシミュレーターで「今日の天気は」と聞くと、「晴れです」と応答されているのが分かります。今回は、この応答をプログラムで制御してみましょう。

そのために、下部分に「Fulfillment」という項目の「Enable webhook call for this intent」を有効にして「SAVE」しておきます。

では実際にプログラミングしてみましょう。inlineエディターは左ペインの「Fulfillment」の項にあります。

フィルフィラメント2

「Inline Editor」をDISABLEDからENABLEDにしてみます。しかし、右下に「Your Google Cloud resources are still being provisioned. Please refresh the page and try again in a few minutes.」というエラーが出て有効にならない場合があります。

Your Google Cloud resources are still being provisioned. Please refresh the page and try again in a few minutes.

メッセージの通り数分待っても有効にできない場合は、Firebase側の設定を変更していきます。まずはFirebaseにログインしてコンソールに移動しましょう。すると以下のような画面になると思いますので、「Hello World」のプロジェクトを選択します。

左ペインの「Storage」をクリックします。

firebase2

「スタートガイド」→「次へ」で進めていきます。

firebase3 firebase4

ロケーション(どこの国にあるクラウドサーバーを使用するか)を選択します。

firebase5

デフォルトのアメリカのままで良ければそのまま「完了」をクリックします。

もし日本にしたい場合は「asia-northeast1」(東京)に変更すると日本のサーバが使われるようになります。

ロケーションについては以下の公式ページに記載されていますので、お好きな地域を選択してください。

Cloud Firestore のロケーション | Firebase

firebase6

しばらく待つと完了します。次に表示される「データ共有設定の選択」は今回はただのサンプルを作成するだけなので、無視して構いません。「後で行う」をクリックして大丈夫です。

firebase7firebase8 firebase9

これで設定は一旦完了です。もし正式なサービス公開をするのであればしっかり設定を行う必要がありますので、別途ご確認ください。今回のサンプル作成の用途であればこれだけで大丈夫です。

では、Dialogflowの「Fulfillment」に戻り、「Inline Editor」をDISABLEDからENABLEDにしてみましょう。できるようになっているはずです。

firebase11

最初、サンプルソースコードが入ってると思いますが、これ分かりにくいので今回は消しちゃいましょう。(笑)
消すのに抵抗ある人は保存しておくか、コメントアウト(/* … */)しておけば良いと思います。

今回は、以下のWebページにある参考ソースコードを改造したいと思います。

dialogflow-fulfillment-nodejs v2.0.0 code template · GitHub

'use strict';

const functions = require('firebase-functions');
const { dialogflow } = require('actions-on-google');

const app = dialogflow();

app.intent('Default Welcome Intent', conv => {
    conv.close('hello');
});

exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);

引用元:https://gist.github.com/takatama/186f7e500b4a761ed3fc2978699a3ad9

8行目と9行目を変更して、以下のように作成しました。

  • ‘Defalut Welcome Intent’ → ’今日の天気’
  • ‘hello’ → ’豪雨です’

8行目のapp.intentでインテント名を指定し、9行目で応答するメッセージを指定しています。

'use strict';

const functions = require('firebase-functions');
const { dialogflow } = require('actions-on-google');

const app = dialogflow();

app.intent('今日の天気', conv => {
    conv.close('豪雨です');
});

exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);

それではシミュレーターで試してみましょう。「今日の天気」と入力すると、「豪雨です」と応答されれば成功です。

firebase16

できましたね。

それでは次のステップとして、地名を入れるとその場所の天気を応答するよう条件分岐(if文)を追加していきます。

場所の情報を取得するには、Entityを設定していきます。
左ペインの「Entities」から「CREATE ENTITY」をクリックします。

firebase17

Entity Nameは任意の名前を付けましょう。そして場所の情報を入力していきます。
今回は「大阪」「京都」「東京」「愛知」「北海道」の5地点だけ登録します。

firebase19

しかし、これだと例えば大阪の天気を知りたい人で、「大阪の天気は?」ではなく「梅田の天気は?」と聞く人もいるかもしれません。こういった同じようなワードを「synonyms」として登録することで、「大阪」も「梅田」も同じ「大阪」とみなすことができます。

それでは、他の地点も含め登録していきましょう。登録が終わったらSAVEします。

firebase20

おっと、エラーになりましたね。どうやらEntity Nameに日本語は使えないようです。

「現在地」を「Location」に変更すると、通りました。

firebase21 firebase22

そして、先ほど作成したインテント「今日の天気」に、今作成したエンティティ「Location」を追加します。

「Training Phases」に「今日の大阪の天気は」など場所を入れたワードを登録しましょう。すると、下に@Locationのエンティティが登録されたのが分かります。
この状態でSAVEしましょう。

firebase25

これで設定は完了です。

あとはインラインエディターでソースコードを編集しましょう。
8行目からを以下のようにLocationによって条件分岐させます。定義していない地域は「分かりません」と答えるようにします。

'use strict';

const functions = require('firebase-functions');
const { dialogflow } = require('actions-on-google');

const app = dialogflow();

app.intent('今日の天気', (conv, {Location}) => {
    if (Location == '大阪'){
        conv.close('大阪は晴れです');
    }else if (Location == '京都'){
        conv.close('京都は雨です');
    }else if (Location == '東京'){
        conv.close('東京は曇りです');
    }else if (Location == '愛知'){
        conv.close('愛知は豪雨です');
    }else if (Location == '北海道'){
        conv.close('北海道は雪です');
    }else{
        conv.close('すみません、わかりません');
    }
});

exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);

 

シミュレーターで実行してみましょう。「今日の大阪の天気は」と聞くと、ソースコードの通り「大阪は晴れです」と返してくれています。成功ですね。

firebase30

他の地域でも試してみます。愛知の場合もOKですね。

firebase31

また、愛知ではなく「名古屋」で聞いた時もOKですね。synonymsで指定している通り、名古屋も愛知と同じとみなしてくれています。

firebase32

定義していない地域の場合(一宮)も、ちゃんと「分かりません」と答えてくれていますね。

firebase33

以上で完成です。

念のため、Actions on Googleのシミュレーターでも確認してみましょう。
正しく応答されていますね。

firebase35
まる太
まる太
どうです?思ったより結構簡単にできますよね。

 

まとめ

今回は、DialogflowのInline Editorを用いて条件分岐する簡単なプログラムを作成してみました。

ぜひみなさんも作ってみてください。

まる太
まる太
次回は、Webhookを用いた外部サービスと連携するアプリを作ってみたいと思います。
DialogFlowのWebhookでAzureを指定し呼び出す流れ【2019年7月・GoogleHome】
DialogFlowのWebhookでAzureを指定し呼び出す流れ【2019年7月・GoogleHome】DialogFlowのinlineエディターの代わりにAzure Functionsで作ったAPIを呼んで応答する簡単なプログラムを作成していきたいと思います。AzureのAPIでは地域別の天気情報を取得してそれをDialogflowに返す流れをスクリーンショットで解説しますので、ぜひみなさんも作ってみてください。...
RELATED POST