Microsoft Tech Summit Japan 2018 で登壇してお話しした内容です。詳しくはコチラ： https://chomado.com/presentations/microsoft-tech-summit-2018/ 。Azure Functions をバックエンドとして、Google Dialogflow、Amazon Alexa Skill Kit、Clova Extensions Kit と接続します

1. サーバーレスでスマート スピーカーのアプリを作ってみよう
(Google Home / LINE Clova / Amazon Echo)
千代田 まどか (ちょまど)
マイクロソフト コーポレーション
#AC02

2. このセッションは、
• ツイート大歓迎
• #mstsjp18 #AC02
• (このハッシュタグはスライドの右下に常に表示↓)
• 写真撮影 OK
• (シャッター音は控えめに)

3. 登壇者紹介：千代田まどか
• ニックネーム「ちょまど」
• 新卒で入った(日本の) SIer を3ヶ月
で退職
• その後プログラマとして Xamarin(C#)
+ Azure で
スマホアプリ開発
• 2016 年に Microsoft 入社
• エンジニア兼マンガ家

4. 私の描いた絵

5. 【近況】 転職？して、それが記事に

6. Twitter メインで情報発信しています
フォロワーは
4万7千人
超えました！
Twitter :
@chomado

7. 今日の目標
スマートスピーカーに
好きなことを
話させてみる
バックエンドの処理を
サーバーレスで
カッコ良く書ける

8. 今日お話しする内容
1. スマートスピーカーとは
2. スマートスピーカーのスキル開発概要
3. 【対話モデル構築】 定型文を返す
1. Google Home に「ちょまどさんはすごい！さすが社長！」など
好きなことを言わせる
4. 【バックエンド構築】 複雑な処理を返す(サーバーレスで)
1. Google Home に私のブログの最新記事を取って来て
そのタイトルを読み上げてもらう
5. LINE Clova と Amazon Alexa の対応
6. まとめ

9. 今日お話しする内容
1. スマートスピーカーとは
2. スマートスピーカーのスキル開発概要
3. 【対話モデル構築】 定型文を返す
1. Google Home に「ちょまどさんはすごい！さすが社長！」など
好きなことを言わせる
4. 【バックエンド構築】 複雑な処理を返す(サーバーレスで)
1. Google Home に私のブログの最新記事を取って来て
そのタイトルを読み上げてもらう
5. LINE Clova と Amazon Alexa の対応
6. まとめ

10. 「スマートスピーカー」とは？
AIアシスタントの載った、
ネットに無線で繋がる機能を持つ
スピーカー

11. 製造元 スピーカー製品名 内臓 AIアシスタント
米国発売年
× アナウンス日
〇 実際の発売日
Amazon Echo Amazon Alexa 2014年 〇 済
Google Home Google アシスタント 2016年 〇 済
Clova WAVE,
Clova Friends
Clova 2017年 〇 済
Harman Kardon
INVOKE
Microsoft Cortana
(コルタナさん)
2017年 × 未定
Apple HomePod Siri 2018年 × 未定

12. 製造元 スピーカー製品名 内臓 AIアシスタント
米国発売年
× アナウンス日
〇 実際の発売日
Amazon Echo Amazon Alexa 2014年 〇 済
Google Home Google アシスタント 2016年 〇 済
Clova WAVE,
Clova Friends
Clova 2017年 〇 済
Harman Kardon
INVOKE
Microsoft Cortana
(コルタナさん)
2017年 × 未定
Apple HomePod Siri 2018年 × 未定

13. Google アシスタントとは
•Google の AI アシスタント
•スマホでも時計でも車でも
スピーカーでも動く
Googleアシスタントの
載った無線スピーカー

14. Google Home が喋る概要
Google Home
Googleアシスタント
Google
アシスタントが
中で動いてる
Actions
呼ばれる
/アシスタントが
実行する

15. Action について
デバイス Action
s
Google アシスタントが
「すでに知っている」コマンドを呼んだ時
「品川区の今日の天気は何で
すか?」 (声) 【intent (意図)を理解】
ご主人様は品川区の天気を知りたいらし
い。Weather Service を呼ぶか
Weather Service
【Speech to Text】
“品川区の今日の天気は何です
か?”って言った (文字列)「今日は晴れです」

16. Action について
Action
s
Google アシスタントの
「知らない」コマンドを呼んだ時
「ちょまどスキルにつないで」 (声)
【Speech to Text】
“ちょまどスキルにつないで”って言った
(文字列)
は? "ちょまどスキル"?
そんなサービス知らんわ。
1stパーティ製のアクションも3rdパーティ製のも探したけど、
そんなの見つからなかった。
マジで何したらいいのか分からん。
エラーメッセージ返しとくわ
すみません、
分かりませんでした
デバイス

17. デバイス Action
s
好きなことを喋らせるには
自分でオレオレ Actions (アプリ)を
作れば良さそう！

18. 今日お話しする内容
1. スマートスピーカーとは
2. スマートスピーカーのスキル開発概要
3. 【対話モデル構築】 定型文を返す
1. Google Home に「ちょまどさんはすごい！さすが社長！」など
好きなことを言わせる
4. 【バックエンド構築】 複雑な処理を返す(サーバーレスで)
1. Google Home に私のブログの最新記事を取って来て
そのタイトルを読み上げてもらう
5. LINE Clova と Amazon Alexa の対応
6. まとめ

19. Google Home アプリ(Action)開発 全体像
占って
大吉です
Google の
自然言語処理サービス。
対話モデル(何と言われ
たら何と返す)を作る
Microsoft の
サーバーレスのサービス
Azure Functions
HTTP リクエスト
JSON

20. Google Home アプリ(Action)開発 全体像
占って
大吉です
Microsoft の
サーバーレスのサービス
Azure Functions
HTTP リクエスト
JSON
対話モデル作成では
自然言語処理の知識が
少しだけ必要
Google の
自然言語処理サービス。
対話モデル(何と言われ
たら何と返す)を作る

21. 今日お話しする内容
1. スマートスピーカーとは
2. スマートスピーカーのスキル開発概要
3. 【対話モデル構築】 定型文を返す
1. Google Home に「ちょまどさんはすごい！さすが社長！」など
好きなことを言わせる
4. 【バックエンド構築】 複雑な処理を返す(サーバーレスで)
1. Google Home に私のブログの最新記事を取って来て
そのタイトルを読み上げてもらう
5. LINE Clova と Amazon Alexa の対応
6. まとめ

22. 自然言語処理の前提知識
「Intent」「Entity (slot)」
意図 もの

23. たとえば
「13時から１時間、マイクロソフト社の
千代田さんとの会議室を取って」
Intent (意図)：MeetingRequestIntent (会議予約)
Utterance (発話)
Entity「13時」 type: time
Entity「1時間」 type: duration
Entity「マイクロソフト社」
type: company
Entity「千代田」
type: name/@sys.any

24. たとえば
「13時から１時間、マイクロソフト社の
千代田さんとの会議室を取って」
Intent (意図)：MeetingRequestIntent (会議予約)
Utterance (発話)
Entity「13時」 type: time
Entity「1時間」 type: duration
Entity「マイクロソフト社」
type: company
Entity「千代田」
type: name/@sys.any

25. 対話モデル作成の画面 (Google)
対話モデル作成には：
• Google : Dialogflow
• Amazon Alexa : Alexa Skills Kit
• LINE Clova : Clova Extentions Kit
を使います

26. 対話モデル作成の画面 (Clova)
対話モデル作成には：
• Google : Dialogflow
• Amazon Alexa : Alexa Skills Kit
• LINE Clova : Clova Extentions Kit
を使います

27. 対話モデル作成の画面 (Amazon)
対話モデル作成には：
• Google : Dialogflow
• Amazon Alexa : Alexa Skills Kit
• LINE Clova : Clova Extentions Kit
を使います

28. 今日お話しする内容
1. スマートスピーカーとは
2. スマートスピーカーのスキル開発概要
3. 【対話モデル構築】 定型文を返す
1. Google Home に「ちょまどさんはすごい！さすが社長！」など
好きなことを言わせる
4. 【バックエンド構築】 複雑な処理を返す(サーバーレスで)
1. Google Home に私のブログの最新記事を取って来て
そのタイトルを読み上げてもらう
5. LINE Clova と Amazon Alexa の対応
6. まとめ

29. デモ
(セッション当日は、ここで、
実際にライブで
簡単な Google Home の Action を
5分で作りました)

30. 実装デモ① 起動時の応答の設定 Default Welcome
Intent
オーケーグーグル、
『ハローグーグルホーム』に
繋いで
こんにちは、ちょまどさん。
今日も素敵な笑顔ですね

31. 実装デモ② 意図の理解 Intent の追加
私を褒めて
ちょまどさんはすごい！
さすが社長！

32. 実装デモ③ アプリ(Action)を終了させる
ばいばい
さらばだ。
(ピコン！)

33. 『対話モデル構築』 Google 編のおさらい
•Google の自然言語処理サービス Dialogflow を
使う (ある程度は無料)
•Action の起動時に呼ばれるのは『Default
Welcome Intent』
•Intent (意図)を増やして対話パターン増やす
•それぞれのIntentの『Training phrases』にて、呼
び出すフレーズを学習させる
•会話を終わらせる Intent は終了トグルをONに

34. たしかに会話っぽいの出来てるけど
うーん、お決まりの言葉を
ただ返してくるだけだと
あんまりスマートスピーカー感が
無いなあ
もっと便利機能っぽいことを
してもらいたいなあ

35. 今日お話しする内容
1. スマートスピーカーとは
2. スマートスピーカーのスキル開発概要
3. 【対話モデル構築】 定型文を返す
1. Google Home に「ちょまどさんはすごい！さすが社長！」など
好きなことを言わせる
4. 【バックエンド構築】 複雑な処理を返す(サーバーレスで)
1. Google Home に私のブログの最新記事を取って来て
そのタイトルを読み上げてもらう
5. LINE Clova と Amazon Alexa の対応
6. まとめ

36. オンプレミス
IaaS (一般的な) PaaS サーバレス
(これも PaaS の一種/FaaS)
クラウド
ハードウェア
OS
ランタイム
アプリ
(関数呼び出し)
関数
ハードウェア
OS
ランタイム
アプリ
(関数呼び出し)
関数
ハードウェア
OS
ランタイム
アプリ
(関数呼び出し)
関数
ハードウェア
OS
ランタイム
アプリ
(関数呼び出し)
関数

37. オンプレミス
IaaS (一般的な) PaaS サーバレス
クラウド
ハードウェア
OS
ランタイム
アプリ
(関数呼び出し)
関数
ハードウェア
OS
ランタイム
アプリ
(関数呼び出し)
関数
ハードウェア
OS
ランタイム
アプリ
(関数呼び出し)
関数
ハードウェア
OS
ランタイム
アプリ
(関数呼び出し)
関数
呼び出しのきっかけ「トリガー」
トリガー「DB の data テーブルに
新しい項目が増えたら」
→アウトプット「○○ API を叩く＆別の
テーブルにデータ挿入」
トリガー「HTTPリクエストが来たら」
→アウトプット「来たデータを解析して
DBのテーブルに挿入」

38. サーバレスとは何か？

39. Azure Functions は MSのサーバーレスのサービス！

40. https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-triggers-bindings

41. https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-triggers-bindings

42. Azure Functions 始め方① VS から

43. Azure Functions 始め方② Azure Portal から

44. 今日お話しする内容
1. スマートスピーカーとは
2. スマートスピーカーのスキル開発概要
3. 【対話モデル構築】 定型文を返す
1. Google Home に「ちょまどさんはすごい！さすが社長！」など
好きなことを言わせる
4. 【バックエンド構築】 複雑な処理を返す(サーバーレスで)
1. Google Home に私のブログの最新記事を取って来て
そのタイトルを読み上げてもらう
5. LINE Clova と Amazon Alexa の対応
6. まとめ

45. デモアプリの動き
最新記事は？
ちょまどさんのブログの最新記事は
『Python ちゃんを創った ～ 』です。
私のブログ
https://chomado.com/author/chomado/

46. デモ (セッション当日は以下のデモを実際にライブ
で行いました)

47. Amazon Echo
LINE Clova
Google Home
私のブログの
最新記事を
取得する処理
（共通化）
スマートスピーカー
依存部分
スマートスピーカー
非依存部分
Alexa Skill Kit
Clova Extensions Kit
Dialogflow
デモアプリのアーキテクチャ図

48. 今日お話しする内容
1. スマートスピーカーとは
2. スマートスピーカーのスキル開発概要
3. 【対話モデル構築】 定型文を返す
1. Google Home に「ちょまどさんはすごい！さすが社長！」など
好きなことを言わせる
4. 【バックエンド構築】 複雑な処理を返す(サーバーレスで)
1. Google Home に私のブログの最新記事を取って来て
そのタイトルを読み上げてもらう
5. LINE Clova と Amazon Alexa の対応
6. まとめ
正直、
Google Home の時と
ほぼ同じ！

49. Google Home アプリ(Action)開発 全体像
占って
大吉です
Google の
自然言語処理サービス。
対話モデルを作る
Microsoft の
サーバーレスのサービス
Azure Functions
HTTP リクエスト
JSON

50. Amazon Alexa アプリ(スキル)開発 全体像
占って
大吉です
対話モデルを
作成
Microsoft の
サーバーレスのサービス
Azure Functions
HTTP リクエスト
JSON
Alexa Skill Kit

51. LINE Clova アプリ(スキル)開発 全体像

52. Amazon Echo
LINE Clova
Google Home
私のブログの
最新記事を
取得する処理
（共通化）
スマートスピーカー
依存部分
スマートスピーカー
非依存部分
Alexa Skill Kit
Clova Extensions Kit
Dialogflow
デモアプリのアーキテクチャ図
JSON
JSON
JSON
やり取りする JSON の
形式が違うので
関数を分ける必要がある

53. デモ (セッション当日は以下のデモを実際にライブ
で行いました)

54. 今日お話しする内容
1. スマートスピーカーとは
2. スマートスピーカーのスキル開発概要
3. 【対話モデル構築】 定型文を返す
1. Google Home に「ちょまどさんはすごい！さすが社長！」など
好きなことを言わせる
4. 【バックエンド構築】 複雑な処理を返す(サーバーレスで)
1. Google Home に私のブログの最新記事を取って来て
そのタイトルを読み上げてもらう
5. LINE Clova と Amazon Alexa の対応
6. まとめ

55. 今日の目標はこれでした
スマートスピーカーに
好きなことを
話させてみる
バックエンドの処理を
サーバーレスで
カッコ良く書ける

56. まとめ記事上げました！
https://chomado.com/pres
entations/microsoft-tech-
summit-2018/

57. 新しい世界を創るのは
あなたたちです！
プログラミングが出来ると
可能性は無限大！
VUI (Voice UI)は
まだ出てきたばかり

58. Information
「Ask The Speaker」
各ブレイクアウトセッション終了後の休憩時間に、
登壇したスピーカーに直接ご質問いただけるコーナーを
B2F 「Ask The Speaker」 Room に用意
しています。セッション内容のより深い理解のため、
ぜひお役立てください。
（※ハンズオンラーニング、シアターセッション、ビジネストラック
及び 一部のセッションを除きます）

59. セッションアンケートにご協力ください。
公式イベントアプリで、「Microsoft Tech Summit 2018 参加者アンケート（必須）」と
「各セッションアンケート（ 5 つ以上）」、合わせて 6 つ以上のアンケートにご回答ください。
もれなくオリジナルグッズを贈呈いたします。
Information
Twitter のご案内
本セッションに関するご質問やご感想は、 #mstsjp18 と セッション ID の
ハッシュタグで、ご投稿をお願いします。
#mstsjp18

60. おまけ

61. 筋肉ボイス https://twitter.com/chomado/status/974534165419892736
ちょまどだよ
（筋肉音声）
ちょまどだよ！
（音声）

62. Actions on Google
ちょまどだよ！
（音声） “ちょまどだよ”
って言ってるわ。
Webhook に投げるわ
ちょまど
だよ
（筋肉音声）
Azure Functions
(サーバレスのサービス)
(プログラムが実行される場所)
“ちょまどだよ”
(jsonデータ)
VoiceText
Web API
(text to speech の
サービス
by HOYA株式会社)
“ちょまどだよ”
(文字列)
Azure Storage
(ファイル置き場)
mp3 の URL +
それを再生して
というリクエスト
(記法は SSML を
使用)
Microsoft Azure
(クラウドサービス)
Dialogflow

63. Actions on Google
ちょまどだよ！
（音声） “ちょまどだよ”
って言ってるわ。
Webhook に投げるわ
ちょまど
だよ
（筋肉音声）
Azure Functions
(サーバレスのサービス)
(プログラムが実行される場所)
“ちょまどだよ”
(jsonデータ)
VoiceText
Web API
(text to speech の
サービス
by HOYA株式会社)
“ちょまどだよ”
(文字列)
Azure Storage
(ファイル置き場)
mp3 の URL +
それを再生して
というリクエスト
(記法は SSML を
使用)
Microsoft Azure
(クラウドサービス)
Dialogflow
ガリガリ
コードを書く部分

64. トリガー: HttpTrigger
出力: CloudBlockBlob (Storage に出力されたmp3
ファイルの保存URLが簡単に取れる)
Webhookで呼ばれる
Azure Function の記述
Google アシスタントに渡されたユーザ
の入力文字列(“ちょまどだよ”)は、渡って
くるJSON データの中の
“ResolvedQuery”プロパティの中に
入ってる。ので使う

65. スピーチ関係では、入力文字列を SSML
(Speech Synthesis Markup Language)
フォーマットに従って書くと良い感じ。
Googleアシスタントだけでなく、Microsoft
Cortana や Amazon Alexa も SSML 対応し
てるから覚えておくと便利そう
これで Azure Storage に保存した mp3 ファ
イルの URL にアクセスできる。
これで引っ張ってこれる。超簡単
Azure Functions では
データベース(Storage)への
アクセス/入出力が
超簡単に出来る（1行！)

66. Azure Functions に作った
API エンドポイント