Dialogflow で初めてのアプリをビルドする

Google アシスタントのアプリは本質的に会話型であり、アシスタントの機能を会話で拡張できるようになっています。これによりユーザーは、予定を作成したり、ゲームで遊んだり、最新のニュースを入手したりすることができます。

このガイドでは、ユーザーに好きな色とラッキー ナンバーを尋ねて、ユーザーのニックネームを返す、Google アシスタントのシンプルなアプリ Silly Name Maker をビルドする方法を説明します。 また、Actions on Google と Google アシスタントの基本概念、および Dialogflow を使ってこれらのプラットフォーム向けにビルドする方法についても学習します。

アプリのアーキテクチャ

Google アシスタントの一般的なアプリの動作方法を以下に示します。一般的なアプリは次の 3 つの主要な部分から構成されます。

アクションと呼び出し

Actions on Google は、ユーザーが「車を予約」や「ゲームで遊ぶ」などのアクションベースのコマンドを使ってアシスタントのアプリを呼び出す方法を定義します。 すべてのアプリで、ユーザーがアプリを名前で呼び出せるようにするメイン アクションを定義する必要があります。 さらに、すべてのアプリで、異なるエントリ ポイントを使ってアプリに深くリンクする追加のアクションを定義することができます。

このチュートリアルでは、ユーザーが「OK Google、Silly Name Maker と話す」のような言葉でアプリを呼び出せるようにする、デフォルトのアクションを 1 つだけ定義します。

ユーザーがアクションでアプリを呼び出す方法を定義したら、次に Actions on Google を使ってそれらのアクションをパブリッシュします。 ユーザーは、Android の Google アプリまたは iOS 版アシスタント アプリ内のアシスタント ディレクトリからアクションを見つけ出せるようになります。

会話

これはアプリの UI であり、アプリが Actions on Google によって呼び出された後にユーザーがそのアプリとどのように会話するかを定義します。 会話の文法(ユーザーがアプリに話すことのできる内容)の定義には、Dialogflow を使用します。

Dialogflow には機械学習機能と自然言語を理解する機能が組み込まれているため、文法の定義ですべてを網羅する必要はありません。 また、Dialogflow でユーザーの入力から型付きパラメータを解析する方法を定義して、ユーザーが話した内容をさらに解釈しやすくすることもできます。 Dialogflow で会話の文法を構築したら、フルフィルメントでユーザーにどのように答えるかを定義します。

このチュートリアルでは、ユーザーが自分の好きな色とラッキー ナンバーを指定する方法を定義する、非常に単純な文法を作成します。

フルフィルメント

自然言語を理解し、ユーザーの入力から必要なデータを解析するという難解で手間のかかる処理の大半は、Dialogflow が行います。 ただし、ユーザーとの会話では一般的に、ビジネス ロジックを実行して、ユーザーに返答し、要求された処理を完了する必要があります。 これには、Dialogflow Webhook を実装する Web サービス(フルフィルメントと呼ばれる)を使用します。Dialogflow Webhook は、Dialogflow を使ってアプリをアシスタントに統合する方法を定義する、JSON ベースのプロトコルです。

ユーザーが何かを話すと、そのままのテキストと、その入力から解析されたパラメータのセットを受け取ります。 このデータを使って返答し、会話を先に進めます。 ユーザーとの会話が終わったら、要求された操作を実行できます。

このチュートリアルでは、Dialogflow がユーザーの入力から色と番号を解析し、フルフィルメントでこのデータを受け取り、ユーザーのニックネームを返す方法を定義します。

会話をデザインする

アプリの作成を始める前に、必ずサンプル ダイアログを作成して、会話をマッピングする必要があります。 これらのダイアログは、アプリのビルドを開始する段階で参考となります。 Silly Name Maker アプリ用には、次のような簡単なダイアログを 2 つ用意しました。

ハッピーパス

アプリ: こんにちは。Silly Name Maker へようこそ。それでは始めましょう。 あなたのラッキー ナンバーは何ですか?
ユーザー: 5
アプリ: あなたの好きな色は何ですか?
ユーザー: 黄色
アプリ: わかりました、あなたのニックネームは黄色 5 です。気に入ってもらえるといいのですが。 また次回お会いしましょう。

ユーザー入力が誤っている場合

アプリ: こんにちは。Silly Name Maker へようこそ。それでは始めましょう。 あなたのラッキー ナンバーは何ですか?
ユーザー:
アプリ: それはナンバーには聞こえません。 もう一度お伺いします。あなたのラッキー ナンバーは何ですか?
ユーザー: 22
アプリ: あなたの好きな色は何ですか?
ユーザー:
アプリ: わかりました、あなたのニックネームは青 22 です。気に入ってもらえるといいのですが。 また次回お会いしましょう。

Actions プロジェクトと Dialogflow エージェントを作成する

Actions on Google の開発を行うには、Actions プロジェクトと Dialogflow エージェントを作成する必要があります。 Actions プロジェクトでは、アクションを登録したり、承認プロセスを通じてアプリを管理したり、アプリの分析を表示したりすることができます。 Dialogflow エージェントは、ユーザーがアプリに話すことのできる内容と、アプリがユーザー入力を処理する方法を定義します。

プロジェクトとエージェントを作成するには:

  1. Actions on Google Developer Console を開きます。
  2. [Add Project] をクリックし、プロジェクト名に「SillyNameMaker」と入力して [Create Project] をクリックします。
  3. [Overview] 画面で Dialogflow カードの [BUILD] をクリックし、[CREATE ACTIONS ON Dialogflow] をクリックしてアクションのビルドを開始します。
  4. Dialogflow コンソールが表示されます。エージェントには情報が自動的に設定された状態になっています。[Create] をクリックしてエージェントを保存します。
  5. エージェントは、このチュートリアルの後半で構築するいくつかのフルフィルメント ロジックを呼び出して、ユーザーのニックネームを返答します。 エージェントのフルフィルメントを有効にすると、後で必要となる UI フィールドが有効になります。今すぐ有効にしてみましょう。
    1. [Fulfillment] メニュー項目をクリックします。
    2. Webhook の [Disabled] スライダーを [Enabled] まで右に動かします。
    3. ダミーの URL(https://silly.name.maker)を入力します。 この URL は、フルフィルメントを構築してデプロイする際に更新します。

  6. [Save] をクリックします。

アクションと呼び出しを定義する

Dialogflow エージェントを作成すると、Default Welcome Intent が自動的に作成されます。 このインテントは、会話またはアプリのメイン アクションへのメイン エントリ ポイントを表します。 Actions on Google にアプリの呼び出し方法がわかるように、すべてのアプリにこのメイン アクションを定義する必要があります。 このインテントには次の特徴があります。

  • インテントの Events セクションには WELCOME イベントが指定されています。このイベントは、このインテントがアプリのデフォルト エントリ ポイントであることを示します。 各エージェントには、この WELCOME イベントを宣言するインテントが 1 つだけ必要です。 ユーザーがアプリを名前で呼び出したとき(「OK Google、Silly Name Maker と話す」など)、Google アシスタントはこのイベントを使ってアプリを起動します。

  • [Action] フィールドには input.welcome という名前が指定されています。 インテントがトリガーされると、このアクション名がフルフィルメントに送られるため、実行するタスクにアクション名をマップできます。 この Welcome インテントはフルフィルメントを使用する必要がない(静的な応答を返すだけ)ので、そのままにします(フルフィルメントをまったく使いません)。

  • [Response] セクションには、デフォルトの静的テキスト応答があります。 これにより、フルフィルメントを呼び出さずにユーザーに返答することができます。 Default Welcome Intent には事前入力された応答が含まれており、独自の応答を追加するには、それを削除する必要があります。

Welcome インテントについて少し理解できたところで、ニーズに合わせて修正を加えてみましょう。

  1. 左側のナビゲーション メニューで [Intents] をクリックし、[Default Welcome Intent] を選択します。

  2. [Response] セクションで、右上のゴミ箱アイコンをクリックして、[Text response] フィールドに事前入力されている応答を削除します。

  3. [ADD MESSAGE CONTENT] > [Text response] をクリックし、代わりに次の応答を指定して、[Save] をクリックします。

    こんにちは。Silly Name Maker へようこそ。それでは始めましょう。 あなたのラッキー ナンバーは何ですか?
    

  4. [Save] をクリックします。

これで、ユーザーがアプリを呼び出したときに、アプリのエクスペリエンスに入ったこと、および次に何を話したらいいかを認識できるようになりました。 一般的に返答では、ユーザーが話すべき内容を案内し、文法に沿って会話を進めるよう促します。これについては、次のセクションでさらに定義します。

会話の文法を定義する

Dialogflow インテントは、会話の文法と、ユーザーがその文法に沿って特定のフレーズを話したときに実行するタスクを定義します。 Dialogflow には自然言語理解(NLU)エンジンが組み込まれているため、すべてのフレーズを網羅して定義する必要はありません。Dialogflow は提供されたフレーズを自動的に拡張し、より多くのバリエーションを解釈します。

簡単なニックネームを生成するために、ユーザーからラッキー ナンバーと好きな色をどのように聞き出すかを定義するインテントを作成します。

  1. 左側のナビゲーションで [Integrations] をクリックし、Google アシスタント カードが有効になっていることを確認します。

  2. 左のナビゲーションで、[Intents] メニュー項目の [+] アイコンをクリックします。

  3. [Intent name] フィールドに make_name と入力します。
  4. [User says] フィールドに「My lucky number is 23」と入力して Enter キーを押します。
  5. 番号 23 をクリックして強調表示し、表示されるプルダウン メニューで @sys.number エンティティを割り当てます。 Dialogflow はこれを @sys.age のような別のエンティティに自動的に割り当てようとする可能性があります。 このように推測はいつでも別のエンティティに変更できます。

  6. [User says] フレーズのバリエーションを増やし、そのフレーズ内の数字を @sys.number エンティティに割り当てます。

    • 23
    • 最高にラッキーなナンバーは 12 です。

  7. [Actions] セクションで、number パラメータの [REQUIRED] チェックボックスをオンにします。 これにより Dialogflow に対し、ユーザーが正しくパラメータを指定するまでインテントをトリガーしないように指示します。

  8. パラメータの [Define prompts] をクリックして、再確認のフレーズを入力します。 このフレーズは、Dialogflow がユーザー入力から番号を検出するまで繰り返しユーザーに向けて発話されます。

  9. [Actions] セクションで、新しいパラメータを次の情報とともに入力します。

    • [Required] - チェックボックスを選択します。
    • [Parameter name] - color
    • [Entity] - @sys.color
    • [Value] - $color
    • [Prompts] - What is your favorite color?

  10. make_name という名前を入力し、[SAVE] をクリックします。

  11. [Fulfillment] セクションで、[Use webhook] チェックボックスをオンにします。 これにより Dialogflow に対し、その応答機能を使うのではなく、フルフィルメントを呼び出して、ユーザーへの応答を生成するように指示できます。

  12. [Google Assistant] セクションで、[End conversation] チェックボックスをオンにします。 これにより Dialogflow に対し、フルフィルメントからユーザーに応答が返されてから Google アシスタントに制御を戻すように指示できます。

  13. [SAVE] をクリックして、インテント全体を保存します。

この手順は以上です。Dialogflow のインテントで会話の文法を正常に宣言することができました。 また、Dialogflow の組み込み応答機能を使って、ユーザーがアプリを呼び出したときに静的な応答を返すように設定することができました。 さらに、フルフィルメントを使って応答を返すインテントを作成しました。次に、このフルフィルメントを構築しましょう。

フルフィルメントを構築する

ここでは、フルフィルメント ロジック用に Cloud Function for Firebase を構築します。 フルフィルメントは、Dialogflow から返される解析済みのユーザー入力を取得し、ユーザーのニックネームを返答します。

  1. Node.js をダウンロードしてインストールします。
  2. 次のコマンドを使って、Firebase CLI を設定し、初期化します。

    npm install -g firebase-tools
    
  3. 次のコマンドを使って、Google アカウントで firebase ツールを認証します。

    firebase login
    
  4. 次のコマンドを使って、sillynamemaker というディレクトリを作成し、初期化します。

    mkdir sillynamemaker
    cd sillynamemaker
    firebase init
    

    次の画面が表示されます。

        Which Firebase CLI features do you want to setup for this folder? Press Space 
        to select features, then Enter to confirm your choices. 
         ◯ Database: Deploy Firebase Realtime Database Rules
        ❯◯ Functions: Configure and deploy Cloud Functions
         ◯ Hosting: Configure and deploy Firebase Hosting sites
    

  5. 対話型の CLI メニューから [Functions] を選択し、Enter キーを押します。

  6. 画面で Actions プロジェクト ID を選択します(文字列に silly-name-maker が含まれます)。 Dialogflow エージェントの設定からプロジェクト ID を見つけ出すこともできます。
  7. firebase init コマンドにより、package.jsonindex.js の 2 つのファイルが作成されました。 これらを次の例のように編集します。

    sillynamemaker/functions/package.json

    このファイルは、フルフィルメントのパッケージ依存関係(Firebase Node.js クライアント ライブラリの Actions on Google および Cloud Functions を含む)を宣言しています。

    {
      "name": "silly-name-maker",
      "description": "Find out your silly name!",
      "version": "0.0.1",
      "author": "Google Inc.",
      "engines": {
        "node": "~4.2"
      },
      "dependencies": {
        "actions-on-google": "^1.0.0",
        "firebase-admin": "^4.2.1",
        "firebase-functions": "^0.5.7"
      }
    }
    

    sillynamemaker/functions/index.js

    このファイルは、フルフィルメント ロジックを定義します。 このなかで理解しておく必要のある主要な事項は次のとおりです。

    1. Dialogflow のインテントがトリガーされると、インテントのアクション名(インテントのアクション領域で宣言された名前)が、フルフィルメントへの要求で提供されます。このアクション名を使って、実行するロジックを決定します。
    2. Dialogflow がユーザー入力からパラメータを解析した場合は、フルフィルメントへのすべての要求で、名前を使ってパラメータにアクセスできます。 ここでは、パラメータの名前を宣言するため、後でそれらのパラメータにアクセスできます。
    3. この関数は、簡単なニックネームを生成することによってアクションを実行します。 この関数は、make_name インテントがトリガーされるたびに呼び出されます。 この関数は、ユーザー入力から取得したパラメータを使って名前を生成します。
    4. Node.js クライアント ライブラリの Actions マップを使用すると、インテント名を関数にマッピングできるため、フルフィルメントが要求を受け取ると、そのアクション名に基づいて関数を自動的に呼び出すことができます。 先に宣言したアクション名変数を使って、その名前を make_name 関数にマップします。

      'use strict';

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

      // a. the action name from the make_name Dialogflow intent const NAME_ACTION = 'make_name'; // b. the parameters that are parsed from the make_name intent const COLOR_ARGUMENT = 'color'; const NUMBER_ARGUMENT = 'number';

      exports.sillyNameMaker = functions.https.onRequest((request, response) => { const app = new App({request, response}); console.log('Request headers: ' + JSON.stringify(request.headers)); console.log('Request body: ' + JSON.stringify(request.body));

      // c. The function that generates the silly name function makeName (app) { let number = app.getArgument(NUMBER_ARGUMENT); let color = app.getArgument(COLOR_ARGUMENT); app.tell('Alright, your silly name is ' + color + ' ' + number + '! I hope you like it. See you next time.'); } // d. build an action map, which maps intent names to functions let actionMap = new Map(); actionMap.set(NAME_ACTION, makeName);

      app.handleRequest(actionMap); });

  8. sillynamemaker/functions ディレクトリから、次のコマンドを実行して、プロジェクトの依存関係を取得します。

    npm install
    

フルフィルメントをデプロイする

  1. sillynamemaker/functions ディレクトリから、次のコマンドを使って、フルフィルメントをクラウドにデプロイします。

    firebase deploy --only functions

    デプロイメントにはしばらく時間がかかります。 完了すると、次のような出力が表示されます。 [Function URL] を Dialogflow に入力する必要があります。

    ✔  Deploy complete!

    Project Console: https://console.firebase.google.com/project/sillynamemaker-abb1d/overview Function URL (sillyNameMaker): https://us-central1-sillynamemaker-abb1d.cloudfunctions.net/sillyNameMaker

  2. Dialogflow の左側のナビゲーションで、[Fulfillment] メニュー項目をクリックします。

  3. [URL] フィールドに関数の URL を入力し、[Save] をクリックします。

アプリをプレビューする

これで、フルフィルメントがデプロイされ、Dialogflow で適切に設定されました。次に、Actions Simulator でアプリをプレビューしましょう。

アプリをプレビューするには:

  1. Google アカウントの [Activity controls] ページで、[Web & App Activity]、[Device Information]、[Voice & Audio Activity] アクセス許可を オンにします。 Actions Simulator を使用するには、この操作が必要です。Actions Simulator では、ハードウェア端末を使わずに、Web 上でアクションをテストできます。

  2. Dialogflow の左側のナビゲーションで [Integrations] をクリックし、 Google アシスタントのカードが有効になっていることを確認します。

  3. Google アシスタントのカードをクリックし、ポップアップ ウィンドウで [TEST] をクリックします。 Dialogflow によってエージェントがサーバーにアップロードされ、 Actions Simulator でテストできるようになります。

    注: [TEST] ボタンがない場合、まず [AUTHORIZE] ボタンをクリックして、Dialogflow が Google アカウントと Actions プロジェクトにアクセスすることを許可してください。

  4. 統合画面の [Test your Assistant app] セクションで、 Actions Simulator リンクをクリックし、Actions Simulator を新しいブラウザー ウィンドウで開きます。

    注: Actions Simulator スプラッシュ スクリーンが表示された場合、 [Start] をクリックし、Google アカウントで認証してください。

  5. Actions Simulator で、シミュレーターの [Input] エリアに「talk to my test app」と入力して、アプリをテストします。

  6. 番号と色の入力を求められたら、入力すると、ニックネームを受け取ることができます。

次のステップ

このアプリは、開発に使用するアカウントで、テスト目的のみに使用できます。 独自のアプリをビルドしてすべてのユーザーが利用できるようにするには、アプリを提出してレビュー チームの承認を得る必要があります。

Dialogflow を使ってアシスタントのアプリをビルドする方法について詳しくは、Dialogflow デベロッパー ガイドを参照してください。