[このコードラボはGDEの田中洋一郎さんYour First App for Assistant With Webhook - Bitcoin Info の日本語訳を加筆・修正したものです。]

Googleでは、未来はAIファーストであると信じています。AIとは、コンピュータを「スマート」にして、自分たちで考えられるようにすることです。

私たちは以下の分野に大きく投資してきました。

これらはGoogleアシスタントにまとめられています。これにより、Googleとの会話が可能になり、物事を成し遂げることを助けてくれます。

ビットコインに関する有益な情報を得るための新しい方法を使って、それがどのように機能しているかを一緒に見てみましょう。準備は良いですか?始めましょう。

ここでは何をしますか?

Googleホームは、ユーザーが自宅に置いておく音声付きのスピーカーです。

Google Assistantは、ユーザーとGoogleの会話です。 ユーザは、アシスタントと話すことで、物事を成し遂げることができます。アシスタントを直接使用するだけでユーザーができることが、たくさんあります。

アシスタントの詳細については、この短いビデオをご覧ください。

Actions on Googleにより、開発者はアシスタントを拡張することができます。開発者は「アシスタントアプリ」を実装することが可能です。

これは今日のビットコイン情報に焦点を当てる例です。

このコードラボは、Dialogflowを使用して独自のアシスタントアプリを作成する手順を示します。 会話型のユーザー体験プラットフォームであるDialogflowを使用します。言い換えると、Dialogflowは、機械が私たちをより深く理解する方法として、機械と"話す"ことを助けてくれます。

このコードラボでは、設計の考慮事項と実装の詳細が含まれます。そして、アクションが主要原則を確実に満たすようにします。

何を作りますか?

このコードラボでは、"Bitcoin Info"アクションを構築します。そのアクションは、以下のようになります。

  • Voice UIの原則を利用し、デモします。
  • 現在の値、ビットコインの総量などのビットコイン情報を話します。
  • 将来、より多くのアクションを作るための知識をあなたに提供します。
  • ちなみに、このコードラボでは少しコードを書く場所があります!そこも楽しいことと思います。
  • https://bot.dialogflow.com/c0014de1-a1f4-442a-8a60-a788fd1dafaf にて、今すぐテストすることができます。

学ぶこと

必要なもの

どのように動作しますか?

さて、会話アクションは、どのように機能するのでしょうか?

ユーザーは、あなたのアクションを呼び出す必要があります。"Ok Google, ビットコイン情報につないで" のようなフレーズを言います。これは、話すアクションの名前をGoogleに通知しています。

この時点から、ユーザはあなたの会話アクションに向かって話をしています。あなたのアクションは、ダイアログ(対話)の出力を生成し、それはユーザに話されます。その後、ユーザーはリクエストを行い、アクションはそれを処理し、再び返信します。 会話が終了するまで、ユーザーは双方向のダイアログを行っている状態となります。

私たちが上記にて説明したことを図で"見る"ことが好きな人は、下図をご覧ください。

また、DialogflowとWebhook間がどうなっているのか不安であれば、以下を見てください。

Dialogflowにログインする

ところで、Dialogflowとは?

Dialogflowは、ユーザーが何を言おうとしているのかを機械に理解させ、応答を提供することができます。あなたは、ユーザーが話す可能性のある例文を入力します。

ユーザーから取得する必要がある値を指定できます。その後Dialogflowは、機械学習を使用して文章を理解し、会話を管理します。

Dialogflowにログインするには、次のリンクをクリックしてください - https://console.dialogflow.com/

"Google"というボタンをクリックすると、最初のエージェントを作るための選択肢が表示されます。

ログイン後、最初のエージェントを作ることが可能となります。

以下をご覧ください。

あなたは以下を行う必要があります。

エンティティの作成

エンティティとは何ですか?

エンティティは、ユーザフレーズから取得しようとしている値です。フォームに記入するようなものであり、ユーザーに詳細を要求します。Dialogflowはこれらを展開して抽出し、完了するまでフォローアッププロンプトを行います。

以下は、Dialogflowでエンティティがどのように見えるかを示しています。

ここでは、通貨のエンティティを作成します。

通貨のエンティティを作成

最初のステップは、"Create Entity"ボタンをクリックすることです。

注意すべき重要なことは、以下です。

  1. 同義語を提供することによって、機械学習アルゴリズムの訓練を"助ける"必要があります。 同義語のリストは、他の単語への単語のルックアップテーブルのようなものです。たとえば、"アメリカドル"だけでなく、"米国ドル" などのようないくつかの言い方を入力します。さらに、"Allow automated expansion"チェックボックスをクリックすることによって、私たちはこのエンティティを展開するために機械学習を使うことをDialogflowに許可します。
  2. 現実の世界では、より多くのケースをカバーするために、多くの例を挙げてみてください。
  3. 完了したら、"Save"をクリックしてください。

Webhookの構築

ここで2つの選択肢があります。

  1. もしあなたが今起動しているサーバを持っていない場合は、私たちのデモ用の動いているWebhookを使うことができます。 https://us-central1-bitcoin-info-ja.cloudfunctions.net/bitcoinInfo
    あなたのFulfillmentとしてこれを使ってください。フルフィルメントがどのように見えるかを少し後で見ます。
  2. 自分のサーバからWebhookをテストする場合は、独自のサーバにて以下のコードをNodeJSで実行することができます。ただし、以下のコードはGoogle Cloud Functionsで動作するように設定されていることに注意してください。NodeJSを使う場合は、この例が役に立つでしょう。
  3. これが、Webhookの全てのロジックを含むindex.jsです。

index.js

// Copyright 2017, Google, Inc.
// Licensed under the Apache License, Version 2.0 (the 'License');
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an 'AS IS' BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

"use strict";

process.env.DEBUG = "actions-on-google:*";

// Dialogflowを利用するためのモジュールを読み込みます。
const DialogflowApp = require("actions-on-google").DialogflowApp;
// 外部APIを利用するためのモジュールを読み込みます。
const request = require("request");

// DialogflowからWebhookで呼び出される際のactionの定数です。
const ACTION_PRICE = "price";
const ACTION_TOTAL = "total";
// BitcoinのAPIのURLおよびPathの定数です。
const EXT_BITCOIN_API_URL = "https://blockchain.info";
const EXT_PRICE = "/q/24hrprice";
const EXT_TOTAL = "/q/totalbc";

// [START bitcoinInfo]
// 最初の "bitcoinInfo" Cloud Function の定義です。
exports.bitcoinInfo = (req, res) => {
  // DialogflowAppのインスタンスを生成します。
  const app = new DialogflowApp({request: req, response: res});

  // DialogflowからWebhookで呼び出された際のリクエストの内容をログ出力します。
  console.log(`bitcoinInfoAction Request headers: ${JSON.stringify(req.headers)}`);
  console.log(`bitcoinInfoAction Request body: ${JSON.stringify(req.body)}`);

  // Bitcoinの価格をアメリカドルで返事する "price" アクションのハンドラ関数です。
  const priceHandler = (app) => {
    // Bitcoin APIにアクセスして、Bitcoinの価格を得ます。
    // Response Bodyには価格のみが送られてきます。
    request(EXT_BITCOIN_API_URL + EXT_PRICE, (error, response, body) => {
      // Bitcoin APIの結果をログ出力します。
      console.log(`priceHandler response: ${JSON.stringify(response)} Body: ${body} | Error: ${error}`);
      // 返事のメッセージ文字列を組み立てます。
      const msg = `現在のビットコインの価格は、${body}アメリカドルです`;
      // tell 関数を使って返事を行い、会話を終了します。
      app.tell(msg);
    });
  };

  // Bitcoinの総数を返事する "total" アクションのハンドラ関数です。
  const totalHandler = (app) => {
    // Bitcoin APIにアクセスして、Bitcoinの総数を得ます。
    // Response Bodyには総数のみが送られてきます。
    request(EXT_BITCOIN_API_URL + EXT_TOTAL, (error, response, body) => {
      // Bitcoin APIの結果をログ出力します。
      console.log(`totalHandler response: ${JSON.stringify(response)} Body: ${body} | Error: ${error}`);
      // 総数の桁が大きいので、億の単位にします。
      const total = body / 100000000;
      // 返事のメッセージ文字列を組み立てます。
      const msg = `現在、世界中で${total}億のビットコインがあります`;
      // tell 関数を使って返事を行い、会話を終了します。
      app.tell(msg);
    });
  };

  // アクションのハンドラ関数のマップを作ります。
  const actionMap = new Map();
  actionMap.set(ACTION_PRICE, priceHandler);
  actionMap.set(ACTION_TOTAL, totalHandler);

  // ハンドラ関数のマップを渡して、リクエストを処理します。
  app.handleRequest(actionMap);
};
// [END bitcoinInfo]

インテントの作成

インテントとは何ですか?

インテントは、一連の "Training phrases" のフレーズによってトリガーされます。これは、"ビットコインの価格はアメリカドルでいくらですか?" や "今日のブロックチェインのサイズは?" といったようなものです。

ほとんどの場合、Dialogflowの機械学習アルゴリズムを訓練するには10-12文を指定する必要があります。そうすれば、たとえユーザーがここに入力した単語を正確に言っていなくても、Dialogflowはそれを理解することができます!

さまざまなタイプのアクションに対して別個のインテントを作成する必要があります。

それらのすべてを一緒に組み合わせようとはしないでください。

この例では、3つのインテントのみ作成します。

"price"インテントの構築

新しい@currencyエンティティを作った後に、もし単語の前に @ があることを気がついたとしても、それは勘違いではありません。これは、今後新しいエンティティを参照するための方法です。別のbitcoinではなく、私たちのエンティティを参照していることを示す特別な印だと考えてください。

ビットコイン情報を取得するであろうインテントを作る時が来ました。

まず、"CREATE INTENT" ボタンをクリックします。

次に、ビットコインに関する情報を得るために使用したい文章をいくつか入力し始めます。たとえば、"今日のビットコインの価格はアメリカドルでいくらですか?" のようにです。

Dialogflowがアルゴリズムのトレーニングを開始できるように、いくつかの文章を入力してください。

あなたがタイプしている間、フレーズがエンティティの一つを含んでいることをDialogflowは自動的に認識し、それをハイライトさせます。

ここでは、次のものが必要となります。

最後に、"Fulfillment" セクションで、"webhook" チェックボックスをチェックする必要があります。

しかし、それを行うためには、"Fulfillment" メニュー項目をクリックし、"Webhook" を有効にする必要があります。

下図を参考にしてください。

Webhookを有効にした後、priceインテントのWebhookパラメータを登録することができるようになります。

このフェーズでは、このURLを入力してください: https://us-central1-bitcoin-info-ja.cloudfunctions.net/bitcoinInfo

ここで、画面下部にある"Save" をクリックして、"Intents" に戻り、"price" インテントをクリックします。下方向にスクロールすると、この新しいオプション "Fulfillment" が追加されていることがわかります。

Dialogflowがその情報をWebhookに送信することを認識するために、2つのチェックボックスがチェックされていることを確認してください。最後に、"Save"ボタンを押して保存してください。

"Total"インテントの構築

世界のビットコインの数をユーザに与えるためのもう一つのオプションに取りかかりましょう。

Intentsメニューの近くにある + 記号をクリックしてください。

すると、何も入力されていないインテントのフォームが表示されます。

以下の例のように入力します。

'Training phrases' の例をいくつか記述できます。

最後に、"fulfillment" セクションで "Enable webhook..." をチェックしてください。

その後、"Save" をクリックすることを忘れないでください。

"Quit"インテントの構築

優れた設計原則では、ユーザーが会話を終了できるようにします。

"Create Intent" ボタンをもう一度クリックする必要があります。その後、会話を終了させるための文章をいくつか入力します。たとえば、"バイバイ" や "終了" などです。

以下は、このインテントがどのように見えるかを示しています。

この時点で会話を実際に終了することを知らせるために、"Set this intent as end of conversation" チェックボックスをチェックする必要があります。

最後に、"Save"ボタンで保存します。

"price"インテントのテスト

私たちが開発している間、私たちの仕事をチェックすることは非常に重要です。幸いなことに、Dialogflowを使ってチェックをすることはとても簡単です。新しいインテントを作成した後に行う必要があるのは、画面の右側を見ることだけです。テストしたいものを入力すると、応答が得られます。

下の例では、"ビットコインの価格はいくらでしょうか?" とタイプし、正常に動作しているところを見ています。そして、応答の中に価格があるのがわかります。

新しいアクションがGoogle homeでどのように機能するかをテストする簡単な方法は、ウェブシミュレータを使用することです。

左側のメニューで "Integrations" をクリックした後に、Google Assistant セクションにある "INTEGRATION SETTINGS" をクリックします。その後、以下のダイアログが表示されます。

次のステップは、アクションシミュレータを開くために "TEST" をクリックすることです。もしこれがこの統合を有効にする初回の場合は、右下にある "Auto-preview changes" スイッチをクリックして、あなたの変更が自動的に伝わるようにDialogflowに登録します。

シミュレータを使って話をするための画面が表示されるはずです。

左側にはコマンドを入力(または話す)でき、右側には応答(JSON形式)が表示されます。2つのインテント(price と total)をテストするための会話を行ってみてください。

Dialogflowが私たちの新しいBOT向けに、デモ用のページを自動的に作成して、私たちのアクションをテストすることもできます。

まず、"Integrations"メニューをクリックします。その後、"Web Demo" の "SETTINGS" をクリックします。

すると、以下のようなダイアログが表示されます。

URLはカスタマイズできます。できるだけ覚えられるURLにすると良いでしょう。ただし、ユニークなURLにする必要があります。例えば "bitcoininfo" にしたくても、既にその名前が使われていた場合は、エラーとなります。

Web DemoのURLが表示されますのでクリックしてアクセスすると、この画面が表示されます。

あなたの成果物を世界と共有できるようになりました。これは、インターネットに接続されていてブラウザを持っているどんなデバイスからでも機能するので、非常に強力です。

Good job!

会話の設計

本当に良いアクションを作るためには、設計について注意深く考える必要があることを覚えておいてください。

人間とコンピュータの間の音声対話を事前に設計することは、機能とユーザーの振る舞いの両方の可能性を考慮に入れて、それが自然に感じられるようにする必要がありますので、見た目よりも困難です。

優れた音声インターフェイスを構築するための鍵は、グラフィカルユーザーインターフェイスを音声ユーザーインターフェイスに変換するという罠に陥ることではありません。これは、会話を使用する目的に反します。人々は、どのように話すかをすぐに変えるつもりはないので、人間同士の会話について知っていることを把握し、人間と話すことをコンピューターに教えることであって、その逆ではありません。

設計のTipsのトップ3

1. ペルソナを作る

これは、音声とのインタラクティブな体験によって捉えられる、一貫したキャラクターです。ユーザーが話しているのは、ユーザーに向けられたその体験の顔です。ペルソナは、次のものを通じて伝達されます。

あなたのユーザーの人口や彼らのニーズ、エージェントのブランドに関連付けられているイメージと品質に基づいてペルソナを設定する必要があります。

2. 文字として箱の外で考える

あなたは脚本劇のようにあなたのコアな体験を書くべきです。これは、同僚と演じたり、紙に書き出したり、同僚と一緒に演奏して紙に書いたり、または対話式のウィザードオブオズのプロトタイプを作成したりすることのような断片的でも大丈夫です。コーディングを本当に開始するまで、あなたはつぶやき、そして演じます。

そして、あなたが最初のビジョンを描くとき、ボックスがダイアログ(対話)全体やユーザーの意図を表すために高いレベルを保ち、そしてインタラクションで使用する個々の言葉を省略します。

3. 会話において、"エラー"はありません

問題が発生したとき、あなたのアクションが "I don't understand YOU" と言い、それをユーザーが聞いたときのことを想像してください。

これは、音声インターフェイスへのユーザーの不満と嫌悪の最大の原因の1つです。人々は怒って声を上げ、再び同じ答えを繰り返します!

私たちは、話す方法を知っている人々に信用を与える必要があります。彼らはプロンプト(指示)や選択肢を理解していないからといって、それは言葉を話さないという意味ではありません。彼らが成功するよう助けてください。

途中で何が起こったかを覚えて、文脈を維持してください。

自然で快適な会話を維持しながら、事前にコースを修正する最善の方法は、会話の中で何らかの他のターンになったかのように、これらの発生を計画することです。つまり、それら自体を "エラー" を引き起こさない入力として扱います。

より良い会話をデザインする方法を考えるのに役立つデベロッパーサイトには、豊富なデザイン素材が用意されています。

アクションの命名とポリシー

より詳しくは、"Actios on Google Developers"を読んでください。

アクションの例のダウンロード

このコードラボの全てのコードをダウンロードするために、以下のリンクをクリックしてください。

Download source code

ダウンロードしたzipファイルを解凍します。これにより、必要なすべてのリソースと共に、このコードラボのすべての定義を含むzipファイルがあるルートフォルダ(bitcoin-info-action)が展開されます。インポートする必要があるzipファイルは、bitcoin-info-ja.zip です。

Dialogflowにアクションをインポートする方法

ソースコードをダウンロードしたら、必要なすべてのリソースを使ってソースコードを開く必要があります。3つの簡単なステップでこのアクションをインポートできます。

  1. 新しいエージェントを作成します。
  2. "Export and Import" をクリックします。
  3. "Import from zip" をクリックし、ダウンロードしたzipファイル(bitcoin-info-ja.zip)を指定します。

開発プロセス中はいつでも、同じzipからこのアクションを復元し、このコードラボで紹介した全てのデータを得ることができます。

さあ、試しましょう。

Give it a trye

TRY IT