Googleアシスタント開発入門 2019

Koji Ishimoto

Published in

Japan Digital Design Blog

20 min readOct 23, 2019

どうも、Japan Digital Design, Inc. で Technology & Design Div. に所属している石本（@t32k）です。

受付くんβ（社内受付システム）というものを作って、Voice UIについて調査していたので、今回は、その裏側の技術であるGoogleアシスタント（SiriやAlexaなどのAIアシスタント）について、共有したいと思います。

The States of Assistant in 2019
Amplify your Web Contents
User your Android App
Build a Custom Experience

The States of Assistant in 2019

Googleアシスタントと聞くと、家で使うスマートスピーカーやNest Hubのようなスマートディスプレイを思い浮かべがちなのですが、Googleアシスタント自体は、Androidはもちろん、iOS端末でも使えますし、時計・ヘッドホンなど、あらゆるデバイスで利用可能です。

少し、インターフェースの歴史をさかのぼってみますと、コンピュータが出た頃は、一部の人が、難解な呪文のようなコマンドをタイピングして利用していました。GUIの登場によりマウスを使うことで、いくぶんか、その敷居は下がってきました。スマートフォンの登場でタップ操作が可能になり、よりカジュアルに使えるようになりました。そして今の御時世はGoogleアシスタントなどのAIアシスタントに話しかけるだけで、タスクをこなせるようになってきています。

だからといって、Voice UIがベストなインターフェースかと言えば、ケースバイスケースです。声だけしか利用できない状況、それが好ましい状況、どちらでも使える状況など、状況によって異なるでしょう。しかし、これまでテクノロジーの限界で不可能だった音声操作ができるようになったことで、コンピュータとの関わりが、より自然なインタラクションができるようになってきたと考えています。

最新のPixel4だとMotion Senseという機能があり、ジェスチャー操作もできるとか。カメラの付いているNest Hub Maxでは、手を掲げるだけで音楽をストップできるなど可能性は無限大です。

そういうわけで、Googleアシスタントは30言語に対応し、世界80カ国で利用でき、100万以上のアクションが登録されており、1500種類以上・10億以上のデバイスに搭載されています。インドではフィーチャーフォンOSであるKaiOSというのがあり、iOSよりもシェアがあるのですが、そのOSでもGoogleアシスタントは利用可能です。またネット回線がない端末でも電話回線でGoogleアシスタントを利用するサービスが、インドではあります。まさしく、ネクストビリオンユーザーを相手にできる巨大な市場と言えるでしょう。

また、スマートフォンに搭載されているGoogleアシスタントの利用ケースの76%は屋外で使用されており、内54%は車の中で利用されているそうです。

Amplify your Web Contents

Googleアシスタントすごいってのは分かった。でもGoogleアシスタント用のアクション（アプリ）を作るのは難しそうだって方は、まずご自身のWebサイトを拡張する形から始めても良いかもしれません。

上記はスマートディスプレイに『チャーハンのレシピを表示して』と言うと、いくつか候補が出てきて、そのレシピを選択すると、ステップごとにレシピの手順や材料を表示してくる便利な機能です。

これはタベリーさんが、Googleアシスタント向けにうまいことやってるんでしょ？って思ってしまいますが、半分だけ正解です。

タベリーのレシピWebページを見てみましょう。ソースコードには、上記ようなJSONが埋め込まれています。レシピの名前とか、カテゴリー・所要時間など書いています。これをGoogleクローラーが、あらかじめ読み込んで解釈することで、あのようにスマートディスプレイでも良い感じに表示してくれるんです。これは別にGoogleアシスタント用に書いてるわけではなくて、このように記述しておくことで、検索結果でも画像つきで目立って表示してくれます。

このようなコードを構造化マークアップと言い、クローラーに適切に情報を伝えるための記述なので、やっておいて損はありません。とはいっても、JDD では今のところレシピの提供はしていませんが、構造化マークアップにはいろいろ種類があり、今回新たに、ハウツーとよくある質問が追加されました。ハウツーもレシピと同じような感じで、ステップを刻んで表示することができます。

応用例：
MUFGの口座開設の仕方を教えて！（ハウツー）
MUFGの金融機関コードは？（よくある質問）

上記のようにスマートディスプレイに聞けば、レシピのように画像つきで分かりやすくステップ解説してくれたり、FAQのWebページは、多分どの銀行さんも持っていると思いますので、そうったページに構造化マークアップを追加することで、Googleアシスタントだけでなく検索結果でも見やすくなるので、ぜひ実装してみてください。

Use your Android App

次はAndroidアプリをGoogleアシスタントで操作する方法です。これも百聞は一見にしかずなので、下記のYouTubeをご覧ください。

『OPEN ほげほげ』って言って、アプリが起動できるのは、なんとなくできそうですけど、重要なのは『タイマーを10分にセットして』や、『Lyftでホテルまで手配して』などの複数のパラメータを持ったリクエストですよね。

PayPalの送金で解説しますと、これは2つの技術から成り立っています。ひとつはAndroidインテント。よくスマホでWebを見てると、『この記事をTwitterでシェアするボタン』ありますよね、あれを押すとブラウザを開いてたのに、Twitterアプリが立ち上がって記事のタイトルとURLが入力された状態になります。そういうアプリ同士が連携する技術です。この技術自体は結構前からあります。

もうひとつはGoogleアシスタントインテントです。Googleアシスタントのインテントは、いわゆる会話のパターンです。上図のactions.intent.CREATE_MONEY_TRANSFERと書いてあるとおり、送金の会話に対応したインテント（会話パターン）です。送金の会話パターンといってもひとつとは限りません。『送金して！』『振り込んで！』『送って！』とかいろいろな言い方があると思いますが、結局は全部、送金のことを言っているので、これは送金リクエストだと理解するのが、アシスタントインテントの役割です。

ここでは『PayPalでLilianに15ドル送って！』と言っています。

普通コンピューターからしたら、音声なんてものは音の波形でしかありませんが、Googleアシスタントに対して言うことで、このように意味のある会話・単語として認識してくれます。

Androidインテントを起動させるパラーメーターは取れたので、あとはそれを入力して叩くだけです。これはあくまで送金の会話パターンなので、例えば、『積立定期預金を申しこんで！』とか言っても、例え、アプリ側にその機能があったとしても、Googleアシスタントは理解できません。なぜなら、それに対応したアシスタントインテントがないからです。

こういった会話パターンが他にもRide sharing、Fitness、Finance、Food orderingの4カテゴリそれぞれにあります。

例えば、Order Foodで、『マルゲリータピザ、チーズ増量、サラミトッピングを1枚お願い！』と言うのと、カスタマイズ注文するために何ページにもわたって画面上のテキストフォームに埋めるのとは、手間が圧倒的に違い便利です。

応用例：
MUFGで口座残高を教えて！（GET_ACCOUNT）
MUFGで石本さんに100円送って！（CREATE_MONEY_TRANSFER）

三菱UFJ銀行アプリがこのようなAndroidインテントを既に実装しているのであれば、Googleアシスタントインテントとつなぎこむ定義ファイルを書くだけで、Androidから声で銀行アプリが操作できるようになりますね。

Build a Custom Experience

次はフルスクラッチで、いちから会話型アプリケーションを作っていく方法です。受付くんβはこのパターンですので、最終的な受付くんの構成をご覧ください。

概念図は上記のような感じです。Googleアシスタントアプリで来訪者の名前と訪問相手の名前を聞いて、それをDialogflow（自然言語解析エンジン）で、データとして扱えるようにして、Node.js v8でSlackにメンションを送ります。

まずは会話のプロットを作ります。これがないと始まりません。これを元に、先程も出てきた会話のパターンを作っていきます。

Intents

会話のパターン、インテントを作ります。例えば、訪問者の名前を聞いたら、『ようこそホゲホゲさん〜』と返す。これで１つのインテントです。

Guest Intent
- ”訪問者の名前” です
- ようこそ、”訪問者の名前”さん！ご来社いただき（略）…

これはGuest IntentのDialogflowでの設定画面です。見ての通り、Training phrases（トレーニングフレーズ）をいくつか入力することで、似たような会話がきたときに、DialogflowがGuest Intentだと判断する材料になります。

訪問者が自己紹介、名乗るときに考えうるパターンを入力します。だいたい、挨拶＋会社名＋自分の名字のような感じだと推測するので、そのようなフレーズをあらかじめ入力しときます。

この設定自体、WebのUIからするだけなので、特にプログラミングする必要ありません。

Entities

次にエンティティですが、これは意味のあるキーワードというか、データを表します。例えば、受付くんが起動して、『お名前を聞かせてくださいませんか？』と尋ねる場合、訪問者が『石本』とだけ答えてくれれば、シンプルな話ですが、普通の会話ではこのようなことはありません。

たいてい、『お世話になっておりますー、三菱UFJ銀行の石本です。』といったようにある程度の文章として返ってくるはずです。この時、『お世話になっております〜』などのデータとして必要のない言葉は無視して、来訪者の名前だけを抽出したい動機にかられます。それがエンティティです。

人の名前を認識させるのにSystem entitiesの@sys.personを使用します。このエンティティは上記のように山田とか佐藤とか名前として認識できるものをobjectとして扱えるようにしてくれます。System entitiesは、この他にもいろいろあり、例えば、数字の『イチ』をNumber型の1として返してくれたり、便利なものが多いです。

また、独自にエンティティを定義することも可能です。上記は来訪者の会社を抽出するためにCompanyというエンティティを作成しました。例えば、三菱UFJ銀行は、丁寧に言えば株式会社三菱UFJ銀行ですし、英名で言えばMUFG Bank、そういったもの全て三菱UFJ銀行としてまとめるSynonymsとして入力してあります。また、Dialogflowがたまに漢字変換しないこともありますので、ひらがなでも入力しておく必要があります。

Fulfillment

フルフィルメントとはWebhook としてデプロイされるコードのことで、基本的に単純なレスポンスなら、Web UIから入力することが可能で、フルフィルメントを使用する必要性はありません。

しかし受付くんのように、レスポンスとして画像を表示したり、音を再生したり、Slackにメンションを飛ばしたりするにはフルフィルメントを使わなければなりません。

対象のインテントでフルフィルメントを有効にすることで、フルフィルメントが使用可能になります。上記は、Web UI上でのインラインエディターからコードを反映させることができます。また自身でCloud Functions for Firebaseをデプロイして利用することも可能ですので、お好きな方を選んでください。

app.intent("Guest Intent", (conv, params) => {
  let visitor = params.visitor.name;
  conv.ask(`ようこそ、${visitor}さん！`);
});

基本的なコードはJavaScriptで、対応するインテントごとに関数を書いていく感じです。難しいことではないです。

Responses

Webhookレスポンスを使用すれば、より豊かな表現が可能となります。いくつかのレスポンスコードを見てましょう。

Simple response

app.intent('Simple Response', (conv) => {
  conv.ask(new SimpleResponse({
    speech: ` Japan Digital Designへ、ようこそ！`,
    text: ` Japan Digital Designへ、ようこそ！` +  
          `(例: 三菱UFJ銀行の山田です)`,
  }));
});

Simpleレスポンスは、実際に読み上げる文章とディスプレイに表示する文章を分離することができます。通常のレスポンスの場合は、読み上げるテキストがそのまま表示されてしまうため、丁寧に読み上げた場合、文章としては冗長な感じになってしまいます。また表示テキストを別途用意できるおかげで、会話例を表示できるようになり、どう喋ったらいいのか理解を促すことができます。

Basic card

app.intent('Basic Card', (conv) => {
  conv.ask(new BasicCard({
    title: '石本光司',
    subtitle: 'Technology & Design Div.',
    image: new Image({
      url: 'https://example.com/avatar/t32k.png',
      alt: 'プロフィール画像',
    }),
    display: 'CROPPED',
  }));
});

Basic cardは、いわゆるカードUIを表示できるようになります。受付くんでは、訪問相手の確認の際に表示されます。これを表示していなかった以前のバージョンでは、例えば、『石本さん、お願いします』と言われて、アシスタントが『いしもとこうじでまちがいないでしょうか？』と音声で読み上げられるだけでした。

間違いないでしょうかと確認されるものの、ビジネス上の相手の下の名前を正確に覚えているとは限りません。ましてや、弊社には部署はちがいますが同姓同名の従業員もいますので、そういったケースでは、音声だけで確認というのは、無理があります。

カードUIで、顔写真や部署名、姓名の漢字を表示することで、かなり分かりやすくなったのではないかと思います。

Suggestion chips

app.intent('Suggestion Chips', (conv) => {
  conv.ask(new Suggestions('はい'));
  conv.ask(new Suggestions('いいえ'));
  conv.ask(new Suggestions('終了'));
});

下にある、はい・いいえ・終了ボタンですが、Suggestion chipsと呼ばれるものです。タッチして操作することが可能ですが、そのまま音声で『はい』と答えても構いません。

どういった風に答えて良いかわからない、どういった選択肢があるのか分からない場合に有効な手段かと考えます。受付くんによる対応がうまくいく場合は、何度も名前を聞いてしまうループ地獄になってしまうことがあるのですが、そういった場合も終了のサジェストチップスを表示しておくことで、いつでもエスケープできる手段を用意しておくことも大切だと感じました。

このように会話のパターンであるインテントをいくつか作ることで、あたかも人と喋ってるかのようなAIアシスタントを作ることができます。

例えば、『お腹空いた！』と受付くんに言えば、『そうですね、私も空きました！』みたいなインテントを作っておけば、そう答えることができます（実際は受付というシチュエーションで、そのような会話になることはまずないと思うので、作っていません）。

振り返って

人名の漢字変換つらい
単語に弱い
『OK, Google』めんどい

一ヶ月ほどトライアルで実際に運用しました。お客様には大変・ご迷惑をおかけして申し訳なかったのですが、いろいろDialogflowの得手不得手というのが分かりました。

まずは、受付で一番重要な機能である正確な名前を取得するのが、大変でした。『わたなべけいさん』という名前の方で、なんどやっても『渡辺K３』と表示されるんですね。なべの部分も本当は難しいなべの漢字ですが、簡単ななべの漢字になっています。ここはどうやって変換するかはDialogflowの気分次第なところがあります。ですから、『渡辺K３』も『わたなべけいさん』だというように、employeeエンティティのSynonymsを定義し直す必要がありました。

また、コンテキストを類推できない単語も難しいです。『原さん』という方が来訪されたのですけど『お名前はなんですか？』とアシスタントが聞くので、『はらです』って答えるのですが、Dialogflowはそれを名前と認識しないのです。『おなかの腹』と勘違いしているのかもしれません。

来客の方は受付というシチュエーションであることを暗黙的に理解しているため、そこで『はらです』と言われれば、『はら』は名前のことを言っていると分かるのですが、Dialogflowにとっては理解できません。

ですので、『私の名前は原です』といったように名乗ってもらえれば認識率はアップするかもしれません。ただそのように答えさせるのは不便なので、聞き方もちょっと工夫しないとだめですね。

あとやっぱり、自分でも試しましたが、9階のオフィスエントランスに立って『OK, Google!』というのは気恥ずかしいですよね。。。

Interactive Canvas

会話のパターンであるGoogleアシスタントインテントを組み合わせることで、可能性は無限大なんですけども、さらに強力な機能がありまして、インタラクティブキャンバスというのがあります。

インタラクティブキャンバスは今のところゲームアプリのみに認められている機能なので、受付くんには使えなかったですが、上記の画像のようにWebViewのように、画面全体をフルカスタマイズできます。

Interactive Canvas 応用例：
- アンパンマン老後2000万円問題と話したい
- ウルトラマンで学ぶ積立NISAにつないで

これを使えば、アンパンマンなどのキャラクターを使って、音声も声優さんのアフレコを再生することで、インタラクティブ絵本みたいな感じで、お金の教育みたいなことができるのではないかと思います。

まとめ

STATS: 次の10億人にリーチできる市場
WEB: まずはWebからセマンティックに
ANDROID: 声でアプリ操作しよう
ACTION: 可能性は無限大！

市場的にもそうですが、操作の簡便さの観点からも、会話という全人類が人として当たり前に使っているインターフェイスを使って、操作できるのは次の10億人市場にリーチできるポテンシャルを持ってるかと思います。

最初からGoogleアシスタントアプリを作るのは大変かもしれないので、既存のWebサイトを構造化マークアップで、ちゃんとGoogleさんに伝えるようにしておくとよいでしょう

また、既にAndroidアプリを持っていて、Androidインテントを実装しているのなら、Googleアシスタントインテントと連携できないか調べてみましょう。

Googleアシスタントアクションは可能性は無限大です。何かいいアイデアがあったら教えてくださいm(_ _)m！！

以上です、ありがとうございました。