More Related Content Similar to 誰でもできるGoogleアシスタント開発 (20) More from Namito Satoyama (15) 誰でもできるGoogleアシスタント開発1. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
スマホでもスピーカーでも!
誰でもできる
Googleアシスタントアプリ開発
Android Bazaar and Conference
2018 Autumn in KAWASAKI
2. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
1. 自己紹介
2. Googleアシスタントとは
3. 標準開発環境とSDK
4. マルチデバイスの考え方
5. マルチデバイスアプリの実装
6. リッチなUIや音声の合成
Agenda
4. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
Community
Video Market Corporation
VP of Engineering
Product Manager
Twitter: @ns_twt
Writing
Shibuya.apk
ときどきGDGでの登壇やお手伝いなど
Namito Satoyama
Profile
黒帯エンジニアが教えるプロの技術
Android開発の教科書
(共著:SB Creative)
ステップバイステップで力がつく
Googleアシスタント
アプリ開発入門
(共著:ソシム)
5. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
Yahoo Japan Corporation
Yahoo! MAP
Android App Developer
Twitter: @1coin178
Geo, Locationが好き
Writing
Shinji Ichien
Profile
ステップバイステップで力がつく
Googleアシスタント
アプリ開発入門
(共著:ソシム)
Product
作ったGoogleアシスタントアプリ
はじめての
書籍です!!!
6. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
Googleアシスタントとは
7. Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止
Google Assistant
• ユーザが置かれている
様々な行動文脈において
「対話型」で解決してく
れるAIアシスタント
• 様々なデバイスへの搭載
が加速
• スマホ
• AIスピーカー
• TV
• 車、時計、イヤホン..etc
Google Assistant
Conversation(対話)
11. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
OK,Google
なにができる?
OK,Google.
18. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
App Directory https://assistant.google.com/explore?hl=ja_jp
19. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
標準開発環境とSDK
20. 標準開発環境
Actions on Google
• Googleアシスタントを
機能拡張する開発者向け
のプラットフォーム
• アプリの設定管理、
シミュレータなどの機能
がある。リリース管理も。
• Webツール
• 自然言語対話プラット
フォーム
• アプリの会話フローの構
築や会話文からフレーズ
の抽出、会話分析が可能
• Webツール
• FirebaseのFaaS
• アプリのバックエンド処
理を担う
• 他のFirebase機能との
連携に強み
• Node.jsが実行可能
プログラミング不要 プログラミング不要
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
21. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
標準開発環境の全体像
Google Cloud Platform プロジェクト
(アプリ)
プロジェクト
エージェント
接続
Firebaseプロジェクト
管理 呼び出し
JSファイル
シミュレータ
Google
アシスタント
呼び出し
Actions on
Google
22. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
標準開発環境の全体像 (プロジェクトの作成)
Google Cloud Platform プロジェクト
(アプリ)
Actions on
Google
プロジェクト
エージェント
開発者
接続
Firebaseプロジェクト
管理 呼び出し
JSファイル
シミュレータ
Google
アシスタント
呼び出し
作成
23. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
標準開発環境の全体像 (バックエンド開発)
Google Cloud Platform プロジェクト
(アプリ)
プロジェクト
エージェント
開発者
接続
Firebaseプロジェクト
管理 呼び出し
JSファイル
シミュレータ
Google
アシスタント
呼び出し
作成
Actions on
Google
deploy
24. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
標準開発環境の全体像 (バックエンド開発)
Google Cloud Platform プロジェクト
(アプリ)
プロジェクト
エージェント
開発者
接続
Firebaseプロジェクト
管理 呼び出し 接続
外部API
JSファイル
呼び出し
シミュレータ
設定
Google
アシスタント
呼び出し
作成
Actions on
Google
deploy
設定
25. Google Cloud Platform プロジェクト
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
標準開発環境の全体像 (動作確認・テスト)
(アプリ)
プロジェクト
エージェント
開発者
接続
Firebaseプロジェクト
管理 呼び出し 接続
外部API
JSファイル
呼び出し
シミュレータ
Deploy
設定
Google
アシスタント
呼び出し
作成
Actions on
Google
動作確認・テスト
26. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
開発を効率化するSDKの活用
Google Cloud Platform プロジェクト
(アプリ)
プロジェクト
エージェント
開発者
接続
Firebaseプロジェクト
管理 呼び出し 接続
外部API
JSファイル
呼び出し
シミュレータ
動作確認・テスト Deploy
設定
Google
アシスタント
呼び出し
作成
Actions on
Google
Client Libraryを活用
28. Actions on Google Client Libraryの使い方【1/3】
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
const { dialogflow } = require('actions-on-google')
const functions = require(‘firebase-functions’)
const app = dialogflow()
exports.endpoint = functions.https.onRequest(app)
app.intent(‘Default Welcome Intent’, conv => {
conv.ask(‘アプリが起動しました。何か話してください’)
})
app.intent('Good Bye', conv => {
conv.close('会話を終了します。さようなら')
})
• npmでインストール
• npm install actions-on-google
• npm install firebase-functions
29. Actions on Google Client Libraryの使い方【2/3】
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
const { dialogflow } = require('actions-on-google')
const functions = require(‘firebase-functions’)
const app = dialogflow()
exports.endpoint = functions.https.onRequest(app)
app.intent(‘Default Welcome Intent’, conv => {
conv.ask(‘アプリが起動しました。何か話してください’)
})
app.intent('Good Bye', conv => {
conv.close('会話を終了します。さようなら')
})
• npmでインストール
• npm install actions-on-google
• npm install firebase-functions
• 会話に対する処理のハンドルには、
DialogflowApp クラスを利用。必須。
30. Actions on Google Client Libraryの使い方【3/3】
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
const { dialogflow } = require('actions-on-google')
const functions = require(‘firebase-functions’)
const app = dialogflow()
exports.endpoint = functions.https.onRequest(app)
app.intent(‘Default Welcome Intent’, conv => {
conv.ask(‘アプリが起動しました。何か話してください’)
})
app.intent('Good Bye', conv => {
conv.close('会話を終了します。さようなら')
})
• npmでインストール
• npm install actions-on-google
• npm install firebase-functions
• 会話に対する処理のハンドルには、
DialogflowApp クラスを利用。必須。
• DialogflowからのIntentに対する処理を定義
app.intent(‘Intent名’), conv => {
// 会話に対する処理
})
覚えておこう!
応答メソッド 説明
conv.ask 応答 + 返答待ち
conv.close 応答 + アプリ終了
31. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
マルチデバイスの考え方
32. Multimodal
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止
https://youtu.be/JDakZMlXpQo
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
• 実際の会話は、言
葉のみで完結する
ことは多くない
• ビジュアルと音声
の相互作用により
最適化される
33. 会話におけるビジュアルの価値
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止
https://youtu.be/JDakZMlXpQo
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
• 多くの商品から欲し
いものを探す場合
• 音声のみの表現だと
冗長になってしまう
• ビジュアルだと直感
的
34. 会話におけるビジュアルの価値
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止
https://youtu.be/JDakZMlXpQo
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
• 比較要素が多い場合
• 音声のみの表現だと
ユーザが記憶してお
かないといけない
• ビジュアルだと直感
的
35. 会話におけるビジュアルの価値
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止
https://youtu.be/JDakZMlXpQo
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
• ものの大きさや色/
形、材料など
• 言葉だと想像できな
いことも多い
• ビジュアルだと直感
的に選択できる
36. マルチデバイスの会話設計
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止
https://youtu.be/JDakZMlXpQo
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
• 音声出力とスクリー
ン表示の内容を詳細
化する
37. マルチデバイスの会話設計
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止
https://youtu.be/JDakZMlXpQo
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
• Multimodalの文脈
に合わせて表示/非
表示を選択する
38. マルチデバイスの出し分け
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止
https://youtu.be/JDakZMlXpQo
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
音声→✕
画面→○
音声→○
画面→○
音声→○
画面→✕
• デバイスによって音
声利用/画面利用が
できるかどうかをも
とに出し分けを行う
39. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
マルチデバイスアプリの
実装
40. 音声出力/画面出力の認識
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
Surface Capabilities
様々な形態のデバイス面( Surface )で最適化したレスポンスを返すためのしくみ
1.Surface capabilities for Actions
サポートされるSurfaceのみでアプリを実行してもらうように設定できる
2.Runtime surface capabilities
実行時にSurfaceを認識する
Response branching Surfaceを認識してレスポンスを変える
Conversation branching Surface別に全く異なる会話を提示する
Multi-surface conversations ひとつのSurface別に全く異なる会話を提示する
41. Surface capabilities for Actions
サポートされるSurfaceのみでアプリを
実行してもらうように設定できる
● 音声 (audio)
● 画面 (screen)
● メディア再生 (media play back)
● ブラウザ(web browser)
Ex: 画面ありデバイスだけで利用可能にする
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
画面あり のみ 制限なし
42. • Actions on Google
Client Libraryで判断可能
• 4つのcapability定義
Runtime surface capabilities(Response branching)
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
const hasScreen =
conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT');
const hasAudio =
conv.surface.capabilities.has('actions.capability.AUDIO_OUTPUT');
const hasMediaPlayback =
conv.surface.capabilities.has('actions.capability.MEDIA_RESPONSE_AUDIO');
const hasWebBrowser =
conv.surface.capabilities.has('actions.capability.WEB_BROWSER');
# 利用例
if (hasScreen) {
conv.ask("画面あるよー");
} else {
conv.close("ごめん、画面ないねん");
};
Surface capabilityの種類 説明
SCREEN_OUTPUT 画面出力
AUDIO_OUTPUT 音声出力
MEDIA_RESPONSE_AUDIO メディアコンテンツの再生
WEB_BROWSER Webブラウザのサポート
44. Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
Runtime Surface capabilities(Multi-surface conversations)
● 伝えたい情報やコンテキストに応じて、表示するデバイス面を選択
● サンプル:「今日のわんこ」アクション
Speaker
Smartphone
(Android/iOS)
通知
今日のわんこ
を教えて
柴犬です。
画像で確認しますか?
はい!
https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Shiba_Inu.jpg/250px-Shiba_Inu.jpg
47. Multi-surface conversations のサンプル
アクション:「今日のわんこ」を
Google Homeで使った場合
● スピーカーは画面がないので、わんこ
の画像を確認するために、スマホでの
利用を促す
● スマホ連携を許可した場合、
通知が送信される
● ※ 画面ありのAndroid/iOSのスマホへ
の移動しかできない。
(2018/10/13 現在)
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Shiba_Inu.jpg/250px-Shiba_Inu.jpg
48. 【1/4】Multi-surface conversationsの実装方法
app.intent('Today Dog - yes', conv => {
const dogName = conv.data.dogName
if (conv.screen) {
// 画面あるなら、画像を表示する
} else {
const screenAvailable =
conv.available.surfaces.capabilities.has('actions.capability.SCREEN_OUTPUT');
if (screenAvailable) {
// 画面が利用可能なデバイス(スマホ)に引き継ぐ
const context = '今日のわんこの画像を確認しよう';
const notification = '今日のわんこ「' + dogName + '」の画像を見よう';
const capabilities = ['actions.capability.SCREEN_OUTPUT'];
conv.ask(new NewSurface({ context, notification, capabilities }));
} else {
// 画像を表示できないので、終了する
}
}
})
Google Home -> Smartphoneに
会話を引き継ぐ
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
49. 【2/4】Multi-surface conversationsの実装方法
app.intent('Today Dog - yes', conv => {
const dogName = conv.data.dogName
if (conv.screen) {
// 画面あるなら、画像を表示する
} else {
const screenAvailable =
conv.available.surfaces.capabilities.has('actions.capability.SCREEN_OUTPUT');
if (screenAvailable) {
// 画面が利用可能なデバイス(スマホ)に引き継ぐ
const context = '今日のわんこの画像を確認しよう';
const notification = '今日のわんこ「' + dogName + '」の画像を見よう';
const capabilities = ['actions.capability.SCREEN_OUTPUT'];
conv.ask(new NewSurface({ context, notification, capabilities }));
} else {
// 画像を表示できないので、終了する
}
}
})
Google Home -> Smartphoneに
会話を引き継ぐ画面付きデバイスが利用可能であるか?
・Googleアシスタントと連携済みであるか
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
50. 【3/4】Multi-surface conversationsの実装方法
app.intent('Today Dog - yes', conv => {
const dogName = conv.data.dogName
if (conv.screen) {
// 画面あるなら、画像を表示する
} else {
const screenAvailable =
conv.available.surfaces.capabilities.has('actions.capability.SCREEN_OUTPUT');
if (screenAvailable) {
// 画面が利用可能なデバイス(スマホ)に引き継ぐ
const context = '今日のわんこの画像を確認しよう';
const notification = '今日のわんこ「' + dogName + '」の画像を見よう';
const capabilities = ['actions.capability.SCREEN_OUTPUT'];
conv.ask(new NewSurface({ context, notification, capabilities }));
} else {
// 画像を表示できないので、終了する
}
}
})
Actions on Google Node.js Client Library
のNewSurfaceクラスを利用
会話、通知文言を設定し、
画面付きデバイスへ連携
Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
51. 【4/4】Multi-surface conversationsの実装方法
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止
通知タップ時のハンドリング
● Dialogflowでイベント
「actions_intent_NEW_SURFACE」
を受け取るIntentを作成
● アクションのBE側の処理で、
Intentをハンドリング
app.intent('New Surface', (conv, input, newSurface) => {
if (newSurface.status === 'OK') {
const dogName = conv.data.dogName
const dogImageUrl = conv.data.dogImageUrl
conv.ask(dogName + 'の画像はこちらです。')
// わんこの画像を表示
} else {
// 会話の終了
}
})
52. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
リッチなUIや音声の合成
53. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
RichResponse
54. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
Rich Response
画面のある端末で
画面表示をリッチに
することができる
コンポーネント
55. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
BasicCardを
表示します
Rich Response
56. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
Rich Response
app.intent('basic', (conv) => {
// 画面出力の有無を確認
if (!conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT')) {
conv.close('このデバイスは画面出力に対応していないため、BasicCardを表示できません。');
return;
}
conv.ask('BasicCardを表示します’);
conv.ask(new BasicCard({
title: 'じゃんけん',
subtitle: 'クマくんのじゃんけんゲーム',
text: '**クマくん**とじゃんけんをしましょう。n「*Ok Google, クマくんのじゃんけんゲームと
話す」と言ってください。*',
image: new Image({
url: '画像URL',
alt: 'アイコン画像',
}),
buttons: new Button({
title: '詳しくはこちら',
url: 'https://assistant.google.com/services/a/uid/00000045ffe70d1e?hl=ja',
}),
display: 'CROPPED',
}));
// 操作Suggest
conv.ask(new Suggestions(suggestions));
});
57. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
Rich Response実装例
app.intent('basic', (conv) => {
// 画面出力の有無を確認
if (!conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT')) {
conv.close('このデバイスは画面出力に対応していないため、BasicCardを表示できません。');
return;
}
conv.ask('BasicCardを表示します’);
conv.ask(new BasicCard({
title: 'じゃんけん',
subtitle: 'クマくんのじゃんけんゲーム',
text: ‘**クマくん**とじゃんけんをしましょう。〜省略〜と言ってください。*',
image: new Image({
url: '画像URL',
alt: 'アイコン画像',
}),
buttons: new Button({
title: '詳しくはこちら',
url: 'https://assistant.google.com/services/a/uid/00000045ffe70d1e?hl=ja',
}),
display: 'CROPPED',
}));
// 操作Suggest
conv.ask(new Suggestions(suggestions));
});
必須:Simple Response
音声/バブルチャット共通
58. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
Rich Response
Carousel Media Response Table
https://developers.google.com/actions/assistant/responses
60. SSMLとは
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
Speech Synthesis Markup Language
• 音声合成マークアップ言語仕様
• XMLで音声合成できる
• W3Cにより仕様化
• https://www.w3.org/TR/speech-synthesis11/
• Actions on Googleではこの一部をサポート
61. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
<speak>
お疲れっした〜
<break time="0.5s"/>
ありがとっした〜
</speak>
SSMLの基本的な構文
<speak>タグをルートタグと
して、配下に音声文言や音
声合成要素タグを入れる
例:breakタグで0.5秒待っ
てから次の文言を発声する
62. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
入力方法(Dialogflow)
Intents -> [任意のIntent] -> Responses -> Text response
63. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
入力方法(Actions on Google Client Library)
const app = new DialogflowApp({request, response});
const ssmlMessage
= 'お疲れっした〜<break time="0.5s"/> ありがとっした〜 ‘;
// 音声とスマホで同じ文言の場合
app.tell('<speak>' + ssmlMessage + '</speak>’);
// 音声とスマホで文言を変える場合
const displayMessage = 'おつかれやまでーす’;
app.tell({
speech: '<speak>' + ssmlMessage + '</speak>' ,
displayText: displayMessage
});
64. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
検証
Simulator -> AUDIO
65. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
SSMLタグの例
66. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
// time指定
<speak>
お疲れっした〜
<break time="0.5s"/>
ありがとっした〜。
</speak>
// strength指定
<speak>
お疲れっした〜
<break strength="weak"/>
ありがとっした〜。
</speak>
<break>
読み上げを停止する
timeかstrengthで指定する
67. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
//いち
<say-as interpret-as="cardinal">1</say-as>
//いちばんめ
<say-as interpret-as="ordinal">1</say-as>
//2010年10月08日
<say-as interpret-as="date"
format="yyyymmdd">20101008</say-as>
//22時1分
<say-as interpret-as="time" format="hms24"
detail="1">2201</say-as>
// S-P-E-C
<say-as interpret-as="characters">SPEC</say-
as>
//+81の8001706113
<say-as interpret-as="telephone"
format="81">08001706113</say-as>
//シンプル<ピー>
シンプル<say-as interpret-as="bleep">プラン
</say-as>
<say-as>
文字を指定したフォーマットで読み上げる
68. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
// speed=”100%”
<audio src="【音声ファイルのURL】">
<desc>Theme</desc> </audio>
// speed="200%”
<audio src="【音声ファイルのURL】"
speed="200%"> <desc>Theme</desc> </audio>
// speed="200%" clipBegin="0s" clipEnd=”2s”
repeatCount="3" repeatDur="12s"
<audio src="【音声ファイルのURL】"
speed="200%" clipBegin="0s" clipEnd=”2s"
repeatCount="3" repeatDur="12s">
<desc>Theme</desc> </audio>
<audio>
音声ファイルを再生する
69. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
無料で利用できる音声
Actions on Google Sound Library YouTube Audio Library
70. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
頑張ってみた例
詳しくは、SlideShareにて公開しています。
「SSMLでできること」
https://www.slideshare.net/nsface/ssml
72. まとめ
Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止
• Googleアシスタントはすでにとても普及している
• Googleアシスタントははじめから様々なデバイス
での利用が想定されている
• Audio+Visualで、本質的な会話に近づくので、画
面がある端末は積極利用する
• リッチなUIや音声合成で、会話をさらに最適化す
ることが可能
73. Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止
Thanks!
Editor's Notes 標準開発環境とSDKについて話していきます。 Googleアシスタントアプリ開発には、大きく3つの登場人物がいます。
Actionso on Google
Dialogflow
Cloud functions です。
Actions on Googleとは、Googleアシスタントを機能拡張する開発者向けのプラットフォームです。
アプリの設定管理、シミュレータなどの機能がある。リリース管理もここで行います。
Webツールですので、プログラミングは不要となります。
次にDialogflowです。
これは、Googleの自然言語対話プラットフォームで、アプリの会話フローの構築や会話文からのフレーズ抽出や、会話分析ができます。
こちらのwebツールですので、プログラミングは不要で利用できます。
最後の3つめは、Cloud Functions for Firebaseです。
アプリ開発で用いられるmBaaSであるFirebaseのFaaS機能です。
これがアプリのバックエンドの処理を担います。他のFirebase機能との連携に強みがあり、Firebaseのデータベースといった機能と連携がしやすいです。
実装には、Node.jsが必要となります。なのでここでは、プログラミングが必要となります。
次に、さきほどの3つの登場人物を含めて、アプリ開発の全体像を解説したいと思います。
Googleアシスタントのアプリ開発は、ツールを行き渡りながらの開発になるので、まず最初に全体像をつかんでおくと、デバッグもやりすくなるでしょう。
まず、Googleアシスタントのアプリ起動の流れを確認しておきましょう。
Googleアシスタントはアプリを呼び出す際には、Actions on Googleから登録されているアプリを呼び出し、
その起動したアプリが、会話をDialogflowに処理をなげて、会話を構築します。 次から開発の流れを簡単に確認していきましょう。
開発者は、アプリを管理するActions on GoogleとDialogflowのプロジェクトを作成します。
Dialogflowのプロジェクトは、エージェントと呼ばれています。
Dialogflowで会話フローを作っていきます。 次に、Dialogflowで会話フローを構築したあと、アプリでのバックエンド処理を実装していきます。
アプリの仕様におうじて、Cloud FunctionからFirebaseのRealtime databaseを叩いたり、
外部のAPIにリクエストしたりなどの処理を追加実装します。 一通り、実装が完了すると、Action on Googleで利用できるwebシミュレータをつかて、動作確認やテストを実施していきます。
バグが見つかれば、これまでの手順を再度回してく感じになるでしょう。
これが、3つの大きな登場人物をわたりあるいたGoogleアシスタントアプリ開発の全体像になります。 DialogflowとCloud Functionsの連携を担ってくれるCinent Libraryがありますので、次からこちらの紹介をしていきます。 Actions on Google Client Libraryといい、これは、
Dialogflowからのリクエストを扱いやすくし、また
Dialogflowでの会話を構成する要素であるIntentに対応するCloiud Functionsでのバックエンドでの処理の実装を簡単にしてくれます。
また、Actions on Googleには、GUIを表示したり、位置情報を表示したりする機能があるのですが、それの実装をサポートしてくれます。
利用可能な実行環境としては、Node.jsになります。 使い方を紹介していきます。
npmを使ってインストールしたライブラリを読み込みます。 会話に対する処理のハンドルには、DialogflowApp クラスを利用し、Cloud Functionsへリクエストが来たときに反応できるようにセットします。
最後にIntentが来たときのハンドル方法をご紹介します。
書き方としては、 app.intentの第一引数にDialogflowのIntent名を設定し、それに対するハンドラーを第二引数にセットしておきます。
conv.askを使うと、ユーザへの応答と返答待ちの状態となり、
Conv.closeを使うと、ユーザに応答したあと、アプリを終了させます。 では、再度変わりまして、
マルチデバイスアプリの実装方法について話していきます。
Actions on Googleには、Surface capabilitiesという仕組みがあります。
これは、音声出力や画面出力可能なマルチデバイス対応のために、 様々な形態のデバイス面で最適化したレスポンスを返すための仕組みです。
大きく2つの種類があって、
1つ目は、サポートされるsurfaceのみでアプリを実行可能とするsurface capabilites for Action
2つめは、アプリの実行時に、surfaceを認識し、処理分岐させるRuntime surface capabilitiesがあります。
アプリ実行時に判断することで、画面によって、レスポンスを変更したり、全くことなる会話を掲示したり、
Google HomeからスマホにとSurface面を移動して、会話としては連続的に、会話を掲示したりすることが可能となります。
次から、個別に説明していきます。 Surface capabilities for actionsの設定は、
右の図にある通り、アプリの管理設置画面であるActions on Google consoleから設定します。
それぞれ、音声、画面、メディア再醒、ブラウザ機能を必須とするか確認項目があります。
図の例ですと、画面ありを必須としているので、Google Homeでの利用をできなくすることができます。
次は、実行時の話です。
前に紹介したActions on Google Cleint Libarayで判断を用意にするプロパティがあります。
左の上部のコードにあるとおり、surface.capabilitiesのhasメソッドを利用し、引数にcapability文字列を設定することで、判断できます。
これにより、アプリの応答文を変更することができます。
これがResponse branchingです。
次は、Dialogflowで定義される会話フローのIntent自体にcapabilityの制限を追加する方法について話ます。
実装方法は単純で、Intentのcontexts項目に、設置するだけです。
図は画面を持ったデバイスからのみに制限している例です。 Multi surfcae conversationsとは、 伝えたい情報やコンテキストに応じて、表示するデバイスを変更できるようにします。
「今日のわんこ」とというサンプルアプリを作ったので、それで実装方法を解説していきます。
ながれは、こんな感じで、今日のわんこを教えてとGoogle Homeにいうと、
犬種と画像で確認するかを聞いてきます。
はいと答えると、スマホに通知を送って、その通知から、犬の画像を確認できるという流れです。
これは、Googleアシスタントのアクションのwebでのシミュレーター画面です。
スピーカーは画面がないので、わんこの画像を確認するために、画面があるデバイスでの利用を促します。
スピーカーは画面がないので、わんこの画像を確認するために、スマホでの利用を促すスピーカーは画面がないので、わんこの画像を確認するために、スマホでの利用を促す わんこの画像を確認するとき、Googleアシスタントは、スマートフォンで確認するように促してきます。
これを許諾した時、スマホに通知が送信されます。 通知はOS標準のものと同じで、こんな感じで送られてきます。
その通知をタップすると、下の画像の感じで、画像をスマホで連続的に確認できます。
実装方法を紹介します。
Google Homeからスマホに会話を引き継ぐ際のコードです。 会話、通知文言を設定し、
Googleアシスタントの開発クライアントライブラリのNewSurfaceクラスを利用します。
通知タップ時のハンドリングには、
Googleアシスタントの会話フローを構築するツールであるDialogflowでNEW_Surfaceイベントを検知するIntentを作成し、
アクションのBE側で、Intentをハンドリングして、画像を表示します。