VUI設計後の実装からリリースまでのポイント

Transcript

1. VUI設計後の実装からリリースまでのポイント Yoichiro Tanaka, Google Developers Expert
2. Yoichiro Tanaka Software Engineer / IT Architect Google Developers Expert (Web) twitter.com/yoichiro google.com/+YoichiroTanaka
3. この資料は何か？ Googleアシスタント向けアプリとして数当てゲーム「イートアンドバイト」を開発した際 に行った、 • 設計時のポイント • 実装時のポイント • レビュー提出時のポイント をまとめたものです。
4. イートアンドバイトの動作風景
12. 設計時のポイント
13. 設計ツール VUI向けの設計ツールは「皆無」な状況 • 業界全体が模索状態、今度ツールがいろいろ出てくるはず。 • とはいえ、何もなしでは、デザインは困難。 Actions on Googleでのオススメと自分なりのメソッドを見つける。
14. 僕が考えたメソッド 1. 脚本を書きまくる。 2. コンテキストを洗い出す。 3. コンテキストの遷移を図示する。 4. インテントを洗い出して、コンテキストの遷移に挟める。 5. インテントの出入り口に対話を当てはめる。
15. 1. 脚本を書きまくる
16. Google Spreadsheetで「交互の背景色」機能で行の色分けをしておくと便利
17. Happy Path から順にシナリオを書いていく Happy Path Scenario 2 Scenario 3
18. Happy Path
19. もう一度遊ぶ
20. ヘルプ
21. ヒント
22. 3回間違えた
23. 2. コンテキストを洗い出す
24. 2. コンテキストを洗い出す 話の文脈が変化した場所を探して、変化前と変化後を「コンテキスト」として抽出して いく。 • 「3桁の数字を聞いて、判定結果を答えている」という文脈 • 「正解した後、もう一回遊ぶかどうかを尋ねている」という文脈 • 「3回間違えた後、ヒントを聞きたいかどうか尋ねている」という文脈
25. Happy Path - 「ゲーム中」から「もう一度遊ぶか？」に話題が変化した → コンテキストが変わった
26. ヘルプ - 「ゲーム中」にヘルプを聞いたけれど、「ゲーム中」に変わりはないので、コンテキストは「ゲーム中」のまま
27. 3回間違えた - 3回間違えたことで「ゲーム中」ではなく「ヒントを聞きたいか？」を尋ねるコンテキストに変化
28. 3. コンテキストの遷移を図示する
29. 「ゲーム中」 「もう一度遊ぶかどうか？聞い ている最中」 「ヒントが欲しいか？聞いてい る最中」 コンテキストの遷移を図示することで、会話の流れの概略を把握できる
30. 4. インテントを洗い出す
31. 4. インテントを洗い出す ユーザの「意図（= アプリへの意思表示、要望）」を抽出する。 • 「コンテキスト」は、どちらかというと「アプリ都合」。 • 「インテント」は、「ユーザ都合」で考えていく。
32. Happy Path - 「3桁の数字を言って当てる」= "input.numbers" 、「もう一度遊ばないと表明する」= "play_again.no"
33. Happy Path - "input.numbers" インテントは、コンテキストを変える（game から play_again に）
34. 3回間違えた - "input.numbers" インテントは、hear_hint コンテキストにも変えることがある
35. ヒント - 「ヒントを聞く」= "help_hint" インテント
36. 4. コンテキストの遷移にインテントを挟める
37. コンテキストの遷移を図示することで、会話の流れの概略を把握できる
40. 5. インテントの出入り口に対話を当てはめる
42. 例: 「ゲーム中」から「ヒントを聞くかどうか尋ねる」コンテキスト間にインテントを入れて対話を当てはめる
43. 例: 「ゲーム中」から「ヒントを聞くかどうか尋ねる」コンテキスト間にインテントを入れて対話を当てはめる 789 1イート0バイトです。ヒントを聞き たいですか？ はい 3桁の数字の合計は、16です。
44. 例: 「ゲーム中」から「ヒントを聞くかどうか尋ねる」コンテキスト間にインテントを入れて対話を当てはめる 789 ヒント 1イート0バイトです。ヒントを聞きたいですか？ はい 3桁の数字の合計は、 16です。 3桁の数字の合計は、 16です。 続けましょう。3桁の数字をどうぞ。 1イート0バイトです。 よくわかりませんでした。 3桁の数字をどうぞ。 いいえ 123 ???
45. 脚本 • Google SpreadSheet 脚本からのVUI設計 VUI設計 • Google SpreadSheet • UML: ステートチャート図 • UML: アクティビティ図
46. 実装時のポイント
47. 実装時のポイント • VUI設計からDialogflowへのマッピング • インテントからアクションの抽出とその実装コードの作成 • いつでも会話を終了できる
48. Dialogflowへのマッピング
49. 789 1イート0バイトです。ヒントを聞きたいですか？ 1イート0バイトです。 おめでとうございます！ 3イートです。もう一度遊びますか？
50. 789 1イート0バイトです。ヒントを聞きたいですか？ 1イート0バイトです。 おめでとうございます！ 3イートです。もう一度遊びますか？ Training phrases Input context Output context Response Intent
51. Intent Input context Output context Training phrases Response
52. アクションとフルフィルメント
53. アクションの発見 インテントに対するレスポンスが 1つに決まることは 希なこと。ユーザの発言やコンテキスト、アプリの 状況に応じて動的に変わる。 → フルフィルメントが次を決定する。 • Output contexts • Response フルフィルメントに処理を指示するために、アクショ ンを定義して指定する。
54. Action name Use Fulfillment
55. フルフィルメント 開発者がコードを書く対象は、このフルフィルメントになる。 • HTTPS+JSONを扱えれば、基本的に何でも良い。 • Node.js向けの actions-on-google-nodejs を使うのが一般的。 ◦ https://github.com/actions-on-google/actions-on-google-nodejs • Cloud Functionsとの親和性がある。 ◦ GCP/Firebase Cloud Functions （外部通信しなければ無料枠で Ok） ◦ 似たような他のソリューションでも問題ないはず
56. Dialogflow Fulfillment • Action name • Arguments (= Parameters) • ... HTTPS request
57. const DialogflowApp = require("actions-on-google").DialogflowApp; const ACTION_INPUT_WELCOME = "input.welcome"; exports.fulfillment = (req, res) => { const app = new DialogflowApp({request: req, response: res}); const inputWelcome = app => { app.ask("こんにちは。◦◦です。・・・"); }; const actionMap = new Map(); actionMap.set(ACTION_INPUT_WELCOME, inputWelcome); app.handleRequest(actionMap); }; フルフィルメントのテンプレートコード
58. Responseの決定に使用するコード // 会話を継続してユーザに次の意図を発言してもらう app.ask("正解です！おめでとうございます。もう一度遊びますか？ "); // 相手が何も言わなかった際の再プロンプトを第 2引数に指定する app.ask( "正解です！おめでとうございます。もう一度遊びますか？ ", ["よく聞こえませんでした。再度遊びますか？ ", ...] ); // 会話を終わる app.tell("わかりました。また遊びましょう。 ");
59. Output Contextsの決定に使用するコード // Output Contextを設定する const CONTEXT_PLAY_AGAIN = "play_again"; app.setContext(CONTEXT_PLAY_AGAIN, 1); // 1 はLifespan // Input Contextを削除する const CONTEXT_GAME = "game"; app.setContext(GAME, 0); // 0 によって削除される
60. アクションを跨いだ情報保持に使用するコード // 会話セッションの範囲内で情報を保持する app.data.answer = "123"; // 会話セッションが終了しても次の会話向けに情報を保持しておく app.userStorage.answer = "123";
61. const inputNumber = app => { const number = app.getArgument("number"); const answer = app.data.answer; if (number === answer) { app.setContext("game", 0); app.setContext("play_again", 1); app.ask("正解です！もう一度遊びますか？ "); } else { app.setContext("game", 1); app.ask("◦イート◦バイトです。"); } }; 実際のコードの例
62. 5秒以内にレスポンスを返すこと。 レスポンスを複数返すことは現状できない。 フルフィルメント実装のポイント
63. いつでも会話を終了できる
64. コンテキストの遷移を図示することで、会話の流れの概略を把握できる
65. コンテキストの遷移を図示することで、会話の流れの概略を把握できる
66. どのコンテキストにいても、ユーザが会話を終了することができるようにしておかなけ ればならない。 → レビュー時には「終了」というフレーズでいつでも会話を終わらせることができるか どうか確認している模様。 → app.askForConfirmation() で「はい」「いいえ」のみを受け付ける場面でも指摘さ れてしまうことがあるので要注意。 いつでも会話を終了できる
67. レビュー提出時のポイント
68. アプリの情報登録 • アプリ名、発音 • アプリの説明文 • 画像、アイコン • 呼び出しフレーズ • 開発者情報 • プライバシーポリシー、利用規約 • カテゴリ • その他もろもろ 基本的には、右図のページに必要となる情報を登 録していくことになる。
69. アプリ名 Googleアシスタントが「アプリ名」を期待通りに認識 してくれるかどうかを早めに確認しておくことがオス スメ。 → Googleアシスタントでアプリ名を声で認識させ て、どのようなテキストになるかを試す。 → あと「早い者勝ち」なので。 ”さいたまけんこうつうとりしまりけいかく ” 期待してたテキスト: 埼玉県交通取締計画 認識結果のテキスト : 埼玉県交通取締り計画 → アプリ名「埼玉県交通取締り計画」
70. 画像、アイコン 小さなアイコンは「丸型」アイコン。 → 四隅が描画されないことを見越したアイコンにし なければならない。
71. 呼び出しフレーズ レビュアーは登録された全ての呼び出しフレーズを 試して、実際にアプリが起動するかをちゃんと確認 している。 → しかも、全てのデバイスで！起動しなければ、 Rejectされる。 特に Implicit Invocation は全てのデバイスで確認 することが大事。 上記の2つ目のImplicit InvocationはAndroidアシ スタントではOkだったのでレビュー提出するも、実 はGoogle HomeではNGであり、結果Rejectになっ てしまった。
72. プライバシーポリシー、利用規約 レビュー時に「内容そのもの」についてはさほどチェックされていない模様。 → 自分を守るために責任をもって内容を決めることが大事。 「正しいアプリ名」が書かれているかどうかはちゃんとチェックされる。
73. まとめ
74. まとめ Googleアシスタント向けアプリを設計、実装し、リリースするために、 • 設計時のポイント • 実装時のポイント • レビュー提出時のポイント を事前に把握しておけば、スムーズにリリースに辿り着くことができます。
75. Fin.