Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

No Server Needed! Clova Skill Development for Beginners (C#)

392 views

Published on

Madoka Chiyoda(chomado)
Microsoft Corporation

This session will cover an outline of smart speakers, compare LINE Clova, Google Home and Amazon Echo development initiatives, and demonstrate how to develop Clova skills (extensions) and integrate with LINE messaging API. By the end of this session, you will be able to talk to Clova and have it push process results to LINE. This will be done server-less, using Microsoft Azure Functions on the server side.

Published in: Technology
  • Be the first to comment

No Server Needed! Clova Skill Development for Beginners (C#)

  1. 1. サーバーレスで! Clovaスキル開発⼊⾨ (C#) 2018/11/21 このセッションは 本当に [⼊⾨編] です
  2. 2. 今⽇(35分間)の⽬標は3つ! LINE Clova に 好きなことを 話させてみる バックエンドの処理を サーバーレスで実装 LINE Messaging API との連携の 概要を知る
  3. 3. このセッションは 写真撮影 OK! Twitter 実況歓迎! #LineDevDay セッション後に 評判をチェック &リツイートします
  4. 4. スライドもコードも公開しています
  5. 5. 登壇者紹介:千代⽥まどか • ニックネーム「ちょまど」 • 新卒で⼊った SIer を3ヶ⽉で 退職 • その後プログラマとして Xamarin (C#) + Azure で スマホアプリ開発 • 2016 年に Microsoft ⼊社 • エンジニア兼マンガ家
  6. 6. 私の描いた絵
  7. 7. 私が描いている漫画 「はしれ!コード学園」
  8. 8. フォロワー は 4万8千人 超えまし た! Twitter : @chomado
  9. 9. [Agenda] 今⽇お話しする内容 概要 対話モデル バックエンド Messaging API
  10. 10. [Agenda] 今⽇お話しする内容 概要 対話モデル バックエンド Messaging API
  11. 11. 「スマートスピーカー」とは? AIアシスタントの載った、 ネットに無線で繋がる機能を持つ スピーカー
  12. 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. 13. 製造元 スピーカー製品名 内臓 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年 × 未定
  14. 14. 製造元 スピーカー製品名 内臓 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年 × 未定
  15. 15. 製造元 スピーカー製品名 内臓 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年 × 未定
  16. 16. 製造元 スピーカー製品名 内臓 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年 × 未定
  17. 17. 製造元 スピーカー製品名 内臓 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年 × 未定
  18. 18. Clova が「既に知っている」コマンドを呼んだ時 「品川区の今日の天気は何 ですか?」 (声) 【Speech to Text】 “品川区の今日の天気は何で すか?”って言った (文字列) 【intent (意図)を理解】 ご主人様は品川区の天気を知りたい らしい。Weather Service を呼ぶか Weather Service 「今日は晴れで す」 LINE の AIプラットフォーム デバイス ユー ザー Clova のスキルたち
  19. 19. Clova が「知らない」コマンドを呼んだ時 「ちょまどスキルに繋い で」 (声) 【Speech to Text】 “ちょまどスキルに繋いで”っ て言った (文字列) は? "ちょまどスキル"? そんなサービス知らんわ。そんなの見つから なかった。 マジで何したらいいのか分からん。 エラーメッセージ返しとくわ 「すみません、 わかりませんで した」 LINE の AIプラットフォーム デバイス ユー ザー Clova のスキルたち
  20. 20. LINE の AIプラットフォーム デバイス ユー ザー Clova のスキルたち 好きなことを喋らせるには 自分でオレオレ スキル (Extension) を 作れば良さそう!
  21. 21. LINE Clova アプリ(Extension)開発 全体像 占って 大吉です LINE の AIプラットフォーム Microsoft の サーバーレスのサー ビス Azure Functions HTTP リクエス ト JSON LINE の 自然言語処理サービ ス。 対話モデル(何と言わ れたら何と返す)を作 る
  22. 22. LINE Clova アプリ(Extension)開発 全体像 占って 大吉です LINE の AIプラットフォーム Microsoft の サーバーレスのサー ビス Azure Functions HTTP リクエス ト JSON LINE の 自然言語処理サービ ス。 対話モデル(何と言わ れたら何と返す)を作 る 対話モデル作成では 自然言語処理の知識 が 少しだけ必要
  23. 23. 今⽇お話しする内容 概要 対話モデル バックエンド Messaging API
  24. 24. 今⽇お話しする内容 概要 対話モデル バックエンド Messaging API
  25. 25. 自然言語処理の前提知識 「Intent」「Entity (slot)」 意図 もの
  26. 26. たとえば 「13時から1時間、会議室を取って」 Intent (意図):MeetingRequestIntent (会議予約) Utterance (発話) Slot 「13時」 type: time Slot 「1時間」 type: duration
  27. 27. たとえば 「13時から1時間、会議室を取って」 Intent (意図):MeetingRequestIntent (会議予約) Utterance (発話) Slot 「13時」 type: time Slot 「1時間」 type: duration
  28. 28. 対話モデル作成の画⾯ (Clova) 対話モデル作成には: • Google : Dialogflow • Amazon Alexa : Alexa Skills Kit • LINE Clova : Clova Extentions Kit を使います
  29. 29. 対話モデル作成の画⾯ (Google) 対話モデル作成には: • Google : Dialogflow • Amazon Alexa : Alexa Skills Kit • LINE Clova : Clova Extentions Kit を使います
  30. 30. 対話モデル作成の画⾯ (Amazon) 対話モデル作成には: • Google : Dialogflow • Amazon Alexa : Alexa Skills Kit • LINE Clova : Clova Extentions Kit を使います
  31. 31. 実際に作ってみよう! 画面の紙芝居
  32. 32. LINE 開発者ポータル https://developers.line.biz/console/
  33. 33. 新規プロバイダー作成 「プロバイダー」 これから作成する Bot / スキルの 提供元として 表⽰される情報
  34. 34. プロバイダー作成完了 → 新規チャネル作成 「チャネル」 LINE Developersコン ソールで作成するアカウ ントです。 チャネルを使⽤して、 アプリをLINEプラット フォームにリンクし統合 できます。
  35. 35. Clova - 新規チャネル作成
  36. 36. Clova スキルのチャネルの新規作成(設定ポチポチ編)
  37. 37. Clova スキルのチャネルの新規作成(設定ポチポチ編) 「連携LINEアカウント」 ここで Clova と 連携する LINE bot との 紐づけを⾏えます。 今は空⽩で。(後で使う)
  38. 38. 「基本設定」完了 今この「基本設定」の ⼊⼒が完了したところ このページの下部の 「次へ」をクリック
  39. 39. 「サーバー設定」 次はサーバーの設定! ここにサーバーの エンドポイント
  40. 40. LINE Clova アプリ(Extension)開発 全体像 占って 大吉です LINE の AIプラットフォーム Microsoft の サーバーレスのサー ビス Azure Functions HTTP リクエス ト JSON LINE の 自然言語処理サービ ス。 対話モデル(何と言わ れたら何と返す)を作 る
  41. 41. LINE Clova アプリ(Extension)開発 全体像 占って 大吉です LINE の AIプラットフォーム Microsoft の サーバーレスのサー ビス Azure Functions HTTP リクエス ト JSON LINE の 自然言語処理サービ ス。 対話モデル(何と言わ れたら何と返す)を作 る 次は バックエンドの 話
  42. 42. サーバーレスとは?
  43. 43. オンプレミス IaaS (⼀般的な) PaaS サーバレス (これも PaaS の⼀種/FaaS) クラウド ハードウェア OS ランタイム アプリ (関数呼び出し) 関数 ハードウェア OS ランタイム アプリ (関数呼び出し) 関数 ハードウェア OS ランタイム アプリ (関数呼び出し) 関数 ハードウェア OS ランタイム アプリ (関数呼び出し) 関数
  44. 44. オンプレミス IaaS (⼀般的な) PaaS サーバレス クラウド ハードウェア OS ランタイム アプリ (関数呼び出し) 関数 ハードウェア OS ランタイム アプリ (関数呼び出し) 関数 ハードウェア OS ランタイム アプリ (関数呼び出し) 関数 ハードウェア OS ランタイム アプリ (関数呼び出し) 関数 呼び出しのきっかけ「トリガー」 トリガー「DB の data テーブルに 新しい項⽬が増えたら」 →アウトプット「○○ API を叩く&別の テーブルにデータ挿⼊」 トリガー「HTTPリクエストが来たら」 →アウトプット「来たデータを解析して DBのテーブルに挿⼊」
  45. 45. サーバレスとは何か?
  46. 46. Azure Functions は MSのサーバーレスのサービス!
  47. 47. Azure Functions 始め⽅① VS から
  48. 48. Azure Functions 始め⽅② Azure Portal から
  49. 49. デモ 「最新のブログ記事」スキ ル
  50. 50. デモアプリの動き 最新記事は? ちょまどさんのブログの最新記事 は 『Python ちゃんを創った ~ 』です。 私のブログ
  51. 51. デモ 1. 【Webブラウザ】 2. 【LINE Clova friends】 3. 【Webブラウザ】 4. 【Visual Studio】
  52. 52. Amazon Echo LINE Clova Google Home 私のブログの 最新記事を 取得する処理 (共通化) スマートスピーカー 依存部分 スマートスピーカー 非依存部分 Alexa Skill Kit Clova Extensions Kit Dialogflow デモアプリのアーキテクチャ図
  53. 53. コードは全て GitHub に上げています
  54. 54. 今⽇お話しする内容 概要 対話モデル バックエンド Messaging API
  55. 55. 今⽇お話しする内容 概要 対話モデル バックエンド Messaging API
  56. 56. デモアプリの動き (+ LINE Messaging API) 最新記事は? ちょまどさんのブ ログの 最新記事は 『~~~』です。 私のブログ [ぴこん!] LINE に その記事の URLを送る
  57. 57. Clova から LINE へのメッセージの送り⽅ 同じプロバイダーの Clova スキルと Messaging API の チャネルは連携可能 ユーザー ID に Messaging API の プッシュメッセージ で メッセージを送れる
  58. 58. Clova と LINE bot を繋げる Clovaスキルの 「基本設定」の画面
  59. 59. LINE へのメッセージの送り⽅ C# ⽤の LINE.Messaging という ライブラリが使えます! https://github.com/pierre3/LineMessagingApi
  60. 60. デモ https://github.com/chomado/SmartSpeakerGet LatestArticle
  61. 61. 今⽇の⽬標は3つでした LINE Clova に 好きなことを 話させてみる バックエンドの処理を サーバーレスで実装 LINE Messaging API との連携の 概要を知る
  62. 62. 新しい世界を創るのは 皆さまです! LINE Clova は、⽇本などで ⽇常⽣活に溶け込んでる LINE と簡単に繋がる 唯⼀のプラットフォーム LINE Clova の拡張の 開発プラットフォーム(SDK)は まだ7⽉に公開されたばかり
  63. 63. Twitter : @chomado
  64. 64. © 2018 Microsoft Corporation

×