Google Assistantアプリ Dialogflow開発編

Google Assistantアプリ開発についてDialogflowを使って、どのようにアプリを開発していくかをまとめました。これからGoogle Assistantでアプリ開発を行いたい方などに参考になれば幸いです。


Dialogflow で Google Assistantアプリ開発

Google Assistantでアプリ開発をしていくには、Googleが提供している「Action on Google」を使います。こちらは、Googleアカウントを持っていれば誰でも利用できますので、まずはGoogleにログインを行ってください。

そもそもGoogle Assistantで「何が出来る?」や「どんな仕組みでアプリが動くか?」などは、過去記事を参考にしてください。
Google Assistant開発で出来る・出来ない事
Google Assistantアプリ開発の仕組み
Google Assistantアプリ申請でリジェクトされたお話

作成するアプリの会話を設計する


初めにすることとしては、まずは会話を設計していきます。Google Homeに何を話しかけ、何をしてもらうかになります。今回はSample として Google Home に最寄の飲食店を探してもらうアプリを作ってみようと思います。そのため、会話の流れは次のようにしようと思います。

人間さま  『OK, Google 近場飲食くんとつないで』     ←  1. アプリの起動ワード
Assistant 『指定された最寄の飲食店を検索すので、
       調べたい駅名を教えてください。』      ←  2. アプリ起動後のガイドライン
人間さま  『ここから近い飲食店は?』           ←  3. アプリへの命令
Assistant 『新橋1-1-1に「餃子の王将」があります』      ← 4. リアクションが返ってくる
こんなシンプルなアプリを作ってみようと思います!!
アプリ名は、ズバリ『最寄の外食くん』です。(安直ですいません....

Dialogflowでプロジェクト作成

いよいよアプリ作成を始めますが、まずは「Action on Google」にログインしてください。
Google on Action

Action on Googleにログインしたら、まずはプロジェクトの作成をします。
「Add/import project」を選択し、「Project name」にプロジェクト名と「Country/region」に利用想定の国を登録します。



プロジェクトが無事作成されたら、次に「Dialogflow」を選択し、「CRATE ACTION ON DIALOGFLOW」でDialogflowを利用することを設定します。そのままDialogflowの言語の設定などすればDialogflowを利用する準備は完了です。




Dialogflowのメニュー説明


無事DialogflowでAgentが作成できたら「会話の登録」や、処理させたいことの「実装」を行っていきますが、その前に何やらいっぱいある Dialogflow のメニューの内容を説明していきます。



Intents

Intents ではユーザの会話によって、どのような処理を定義するかを設定できます。ユーザの「どんな言葉」で起動し、次にどのような処理をさせるか、次の処理へ「言葉を変数に入れて渡す」ことが主な役割です。

Default Welcome Intent では、アプリ起動時の Intent ですので、Eventsに「WELCOME」が設定されています。そのため、Default Welcome Intent を削除した場合は、代わりにアプリ起動時用の Intent を作成する必要があり、Events に「WELCOM」の設定を行ってください。

Entities

Entities では様々な言葉の言い回しを、同じ意味として登録することが出来ます。日本語には同じ意味で複数の言い回しができ、例えば『去年』を表す言葉でも、「昨年」や「前の年」、「2016年」など様々な言い方があり、ユーザがこれらの言葉を話したら、全て「去年」に集約することができます。



Training

Training は実際に Intents を試したりした場合の履歴が閲覧できます。テストで様々なパターンを試し、どのようなレスポンスが返ってくるかが見れますので、アプリをリリースする前には、必ずチェックをしてください。

Integrations

開発するアプリで、様々なプラットフォームとの連携の設定が行えます。現状では14のプラットフォームがボタン1つで連携が可能となっております。

認知度の高いものとしては「Facebook」、「Twitter」、「Skype」、「Twilio」などなどありますので、チェックしてみてください。


Analytics

Analytics は馴染みがある人が多いのではないでしょうか。Dialogflow の Analytics では、文字通りどれだけ利用されたかが確認でき、Google Analytics と同様に「Session数」がわかります。その他にも作成した「Intent 単位での呼び出し回数」や「認識できなかった命令数」などがグラフ・表などで確認できます。



Fulfillment

Fulfillment は簡潔に言うと他のプラットフォームやアプリ、APIなどと連携を行うための Webhook を投げることができます。今回は他のプラットフォームは利用せず、自前で実装していきます。(Firebase Editor を使ってゴリゴリ実装...)


Dialogflow開発実装

それでは待ちに待ったDialogflow で作成した Agentに実装をしてきましょう。作成するアプリは繰り返しになりますが、現在位置や駅から最寄の飲食店をおしえてくれる『最寄の外食くん』です。
(よく考えると、Google Homeからは使いどころがないですね....利用シーンはスマホからということにしておきましょう)

1. アプリ起動の Intents 設定

アプリの起動キーの設定

まず初めに会話の設定をしていきます。Default Welcome Intent にアプリの起動キーとなるワードを登録します。アプリの起動には「アプリ名」だけではダメで、「アプリ名」 + 「トリガー」とする決まりになっています。

今回のアプリ起動キーは
アプリ名 :  最寄の外食くん
トリガー : 話す ← なんでもいい

このワードを使って、アプリ起動キーを 『 最寄の外食くんと話す 』 とします。

これらを「User Says」に登録していきます。その際に、手持ちのスマホなどで Google Assistant を開き、実際にアプリの起動キーを発音して、何と変換されるか試してみることをおすすめします。私は「もより」がうまく変換されない場合などがあったため、漢字とひらがな両方で起動キーを登録しておきました。

ちなみに、この起動キーはいくら登録しても問題ないです。



これでアプリの起動キーの設定は完了です。

Text Response の設定

Text Response の役割は、該当のItentが呼ばれた際にユーザへ返却するメッセージの設定が行えます。そのため、Default Welcome Intent の Text Response の役割は、アプリが起動された際にユーザにそのアプリでどのようなことができるか説明するガイドラインのような役割になります。

今回作る『最寄の外食くん』を起動したユーザにしてほしいことや、使い方のガイドラインを Default Welcome Intent の Text Response に設定していきます。
Text response に 「指定された最寄の飲食店を検索しますので、「調べたい駅名」を教えてください。「現在位置」と言った場合は、GPSから付近の飲食店を検索します。」と設定します。設定したら忘れずに 「SAVE」 をしてください。



2. アプリの起動とガイドラインのメッセージ確認

それでは、ここまで設定した内容を確認していきましょう。薄々気づいている人もいるかもしれませんが、Dialogflow の画面の右端に「Try it now」が表示されていると思います。これは想像通り、実際に試してみることができるのです。

「Try it now」に先ほど設定したアプリの起動キー(最寄の外食君と話す)を入力してみてください。



実行してみると、さきほど設定した「アプリの起動キー」と「ガイドライン」がちゃんと表示されていることがわかります。このように Intent の動作確認は「Try it now」から簡単に確認することができるので、試しながら納得のいく Welcome Intent を作ってください。

3. ユーザの命令受付用 Intent の作成

次は Default Welcome Intent の次に呼ばれるであろう Intent の作成を行います。Default Welcom Intent のアナウンスでユーザは「駅」か「現在位置」かの指定をするはずなので、その「指定(命令)を受付し、付近の飲食店検索の処理を呼び出す」ことを設定していきます。

まずは User says にユーザが指示(命令)するであろう言葉を登録していきます。

Google Assistant に「指定された最寄の飲食店を検索しますので、「調べたい駅名」を教えてください。「現在位置」と言った場合は、GPSから付近の飲食店を検索します。」と言われたユーザは、おそらく「新橋駅」や「現在位置」など言ってくるはずです。

なので、これらを User says に登録していきます。が、全国の駅名を永遠と登録していくような気が遠くなるようなことは行いません。(気合の入った人はやってもらってかまいませんが....



そこで、検索条件となる「駅名」か「現在位置」などは『ロケーション』と言った情報として受け取ることとします。なので「新橋駅」、「浜松町」、「現在位置」....などの言葉は全て同じ意味として、解釈してもらうように登録をします。

実は Dialogflow では、ある程度意味を持つ言葉はすでに判別できるようになっています。例えば「新橋駅」や「浜松町駅」などは、初めから location といった値として認識してくれます。なので、ここでは「現在位置」、「この辺」といった言葉を location として認識してくれるようにします。

User says に登録したら、該当する単語をダブルクリックし「@sys.location」を設定してください。
※ @sys.○○ は、すでに認識してくれるものです



パラメータ名の設定 - Action -

先ほど設定した location ですが、サーバ側で処理を行う際のパラメーター名の設定が行えます。 location をそのまま使ってもよいのですが、今回の location の意味合い的に検索ポイントなので Action の 「PARAMETER NAME」を「search_spot」と変えてみます。



これでサーバ側へは search_spot のパラメータ名で送られるようになります。ここでおさらいですが、サーバ側や他のプラットフォームへの連携はJSON形式でデータのやり取りが行われます。

4. サーバ側の処理実装 Firebase

ユーザから検索したいロケーションを Intent 側で受け取ったら、次はいよいよサーバ側の実装です。まずは Dialogflow のメニューから「Fulfillment」を選択し、Fulfillment の Inline Editor の「ENABLED」をクリックして Firebase の Editor を有効化します。



サーバ側の処理をコーディング

ここまできたら、後は純粋にJSをひたすら書いていくだけです。今回は飲食店の検索をぐるなびWeb APIを利用し、最寄の飲食店を検索していくこととします。

ユーザが指定したパラメータの取得などは、DialogflowApp を利用し取得していきます。リファレンスは英語ですが、Google翻訳をかけながらでも、それなりに実装していけるので、頑張って DialogflowApp を読み解いていってください。
パラメータの取得方法や、ユーザが「現在位置」など指定した場合の、DeviceLocation の取り方などはサンプル付きで乗っているので問題なく実装できます。


 'use strict';

 process.env.DEBUG = 'actions-on-google:*';
 const App = require('actions-on-google').DialogflowApp;
 const functions = require('firebase-functions');

 exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
     const app = new App({request, response});

     // パラメータの受け取り
     var location = app.getArgument('search_spot');

       ・
       ・
       ・
  ぐるなび Web API を使った飲食店検索は実装が長いので省略
       ・
       ・
       ・


     // Google Assistantへ返却するメッセージ(sentenceの内容をしゃべってくれる)
     app.tell(sentence);
 });

実装が終わったら「DEPLOY」忘れずに行ってください。

5. サーバ側の処理の呼び出し設定

Fulfillment でサーバ側の実装が終わったら、[3. ユーザの命令受付用 Intent の作成]で作成した Intent を開き、Fulfillment の呼び出し設定を行います。

前の Fulfillment の設定で「ENABLED」を行ったことにより、Intent 側で Fulfillment の設定項目が表示されるようになります。この設定項目の「Use webhook」にチェックを入れることで、先ほど実装した Firebase へ webhook が送られ連携されるようになります。




実際に試してみた

最後に、ちゃんとFulfillmentの設定で実装した内容が機能するかチェックします。webhookを呼んでくれる Intent を起動させます。

「Try it now」に「現在位置」と入力してみると、ちゃんと機能していることが確認できます。




こったものをサーバ側で実装するには、今回使った Firebase Editor では結構大変なので、ここらへんは toolsを使った実装方法をそのうち気が向いたら投稿します。

次回は、作ったアプリの申請を出すところをまとめます。申請が通れば誰しもが使えるアプリです!!


■ Google Home, Google Assistant系の関連
Google Assistant開発で出来る・出来ない事
Google Assistantアプリ開発の仕組み
Google Assistantアプリ申請でリジェクトされたお話


コメント

  1. こんばんは。
    今回、DialogflowでぐるなびAPIを使いレストラン情報を呼び出そうとしています。
    サーバー側の処理のコーティングの部分のコードがわからなく困っております。
    もしよければ、返信お願いいたします。

    返信削除
    返信

    1. > しおたんさん
      こんばんは。コメントありがとうございます。

      申し訳ないのですが、このアプリはもう残っておらず、この記事を書いた際のコードが残っていませんでした。

      取り急ぎ JS でぐるなびAPIの呼び方を簡単に実装したので、参考になれば幸いです。

      ------------------------
      var request = require('request'),
       che = require('cheerio');

      // API のレストラン検索APIの Base URL
      const urlBase = 'https://api.gnavi.co.jp/RestSearchAPI/20150630/';
      // ぐるなび Web Service の keyid を設定してください
      const accessKey = 'xxxxxxxxxxxxxxxxx';

      // フリーワード検索(駅名とか)
      var optionsFreeword = {
        url : urlBase
         + '?keyid=' + accessKey
         + '&freeword=' + encodeURIComponent("浜松町駅") ←ここに駅名 
         + '&hit_per_page=3',
        method: 'GET',
      }

      // 現在地などのは緯度・経度情報がとれるので、その場合はこちらを
      var optionsPoint = {
        url : urlBase
         + '?keyid=' + accessKey
         + '&latitude=' + '緯度情報'
         + '&longitude=' + '経度情報'
         + '&hit_per_page=3',
        method: 'GET',
      }

      //リクエスト送信 (フリーワード検索 or 位置情報からの検索の option を指定)
      request(optionsFreeword, function (error, response, body) {
        var result = [];
        var $ = che.load(body);
        $('rest').each(function(i, elem) {
         $(this).children().each (function (j, value) {
          if (value.tagName == 'name') {
           result.push(value.children[0].data);
          }
         });
        });
        console.log(result);
      });

      削除
    2. お返事ありがとうございます。
      とても参考になりました。
      少しづつですが、勉強していきます!

      削除
  2. 度々申し訳ございません。
    アクセスキーと駅名を入力したりしたのですが、なぜかエラーを吐きできませんでした。
    ちなみに、現在地情報などはまだ実装を考えておらず、駅周辺の飲食店を検索してくれるチャットボットの制作を考えております。

    DialogflowとぐるなびAPIを連携のやり方の記事がこのHPにしかなく、頼りっきりになり申し訳ありません。

    返信削除
    返信
    1. > しおたんさん

      返信が遅くなってしまい申し訳ございません。
      エラーの内容などを張っていただければお力になれると思いますので、Firebase console のログなどをいただけますでしょうか。

      可能性としては、 Firebase の利用が Spark プラン (無料プラン)であれば、外部の API などにつなぎに行く場合に制限がかかります。その場合は Firebase console に出力されるエラーコードなどをみれば、原因がある程度わかります。

      可能な限りお力になりますので、気軽に質問投げてください

      削除

コメントを投稿

人気の投稿