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.

PowerApps + QnA Makerではじめるチャットボットアプリ - 吉田の備忘録

2,038 views

Published on

昨今流行っているチャットボットをコーディングレスで作ってみたいと思いませんか?今回はMicrosoft PowerAppsとCognitive Services QnA Makerを使ってチャットボットを作ります

Published in: Technology

PowerApps + QnA Makerではじめるチャットボットアプリ - 吉田の備忘録

  1. 1. Japan Dynamics User Community @TaikiYoshidaJP
  2. 2. ゲスト用 Wi-Fi(MSFTGUEST)
  3. 3. 吉田 大貴 コンサルタント @ EY Advisory & Consulting @TaikiYoshidaJP 今まで携わった主な製品やサービス ※本資料の掲載内容は個人的見解であり、EY、EY Japan及びそのグループであるEYアドバイザリー&コンサルティング株式会社、新日本有限責任監査法人、 EY税理士法人、EY・トランザクション・アドバイザリー株式会社の立場、戦略、意見を代表するものではありません。 Microsoft Dynamics NAV Microsoft Azure Microsoft Dynamics 365 Office 365 VMware vSphere Windows Server Microsoft Flow Power BI The views expressed in this session do not represent EY’s position.
  4. 4. 本日のアジェンダ •突然のチャットボットアプリ開発依頼! •PowerAppsとは? •QnA Makerとは? •実際に作ってみる •おさらい
  5. 5. 「チャットボット作って!」 社長 「え!プログラミング なんてできない!」 社員
  6. 6. 作成するチャットボットの要件 よくわからないけどAIとかを使う 業務効率化が図れる もっているネタは社長のExcelファイルしかない なぜかDynamics 365かOffice 365のライセンスは持ってる 開発に60分以上かけられない
  7. 7. PowerAppsと Cognitive Services で作るぞ!
  8. 8. Japan Dynamics User Community
  9. 9. 既存のシステムや データソースへ接続 Microsoft PowerApps はカスタム業務アプリを作成し、 クロスプラットフォームで利用するためのサービス アプリ、フォーム、 ワークフローを コーディングせずに開発 ウェブとモバイル へ瞬時に発行
  10. 10. 業務アプリを素早く開発 Microsoftの統合されたサービスで、 分析、ユーザー体験、自動化機能を作成 開発者にとって効率的に 開発者によって、パワーユーザーの開発物を拡張し、 Azureの力でリッチなプラットフォームサービスを提供する 業務アプリのプラットフォームに革命を 「パワーユーザー」に力を 業務を理解しているパワーユーザーによって、 コーディングなしでアプリを開発 アプリ間でのデータの共有 共通のデータモデルや、既存のサービスと統合し、 今のデータに更なる付加価値を与える Azure AppServices Azure Service Fabric Azure Functions … Azure Logic Apps Azure API Management BizTalk … Azure Data analytics Azure Internet of Things SQL Server BI …
  11. 11. ウェブとモバイルへ 瞬時に発行する Web・iOS・Androidでも、 必要な時にアプリをチームへ配信 アプリストアは要りません
  12. 12. Japan Dynamics User Community
  13. 13. QnA Makerとは? 使いなれているチャット形式で応対のテストと調整が でき、実際の会話から学習させることができます。 他のCognitive Servicesと連携させることでボットをさ らに強化できます。より人間に近い形で対話できます。 QnA Makerは他のAPIと連携できるスケーラブルなシ ステムなので、ボットサービスの一部として活用する ことも、 単体で利用することもできます。 URLまたは表に記入するだけでボットの応対が設定 でき、 誰でもボット開発に携わることができます。 https://qnamaker.ai
  14. 14. QnA Maker 参考:https://qnamaker.ai/Documenta 質問と応対 を抽出 インデックス化 &ランク学習 チャット サービス レシピ ボット ヘルプデスク ボット 体調管理 ボット 漫才 ボット Microsoft Bot Framework LINE API その他 プラット フォーム ボットプラットフォーム 乗換案内 ボット QnA Makerとは?
  15. 15. 機械学習の部分を理解する必要はない 出典:https://www.slideshare.net/sleepy_yoshi/sigir2011-3-learning-
  16. 16. チャットボットアプリ開発までの3ステップ STEP1 QnA Makerを準備する STEP2 連携部分(API)を作る STEP3 アプリを開発する
  17. 17. 「GET STARTED」をクリック
  18. 18. ログインしましょう
  19. 19. サービスに名前を付ける
  20. 20. 質問表のTSV(またはCSV)を用意しておく
  21. 21. 面倒だな・・・と思っている人はこちら bit.ly/jduc05-tsv
  22. 22. ファイルをアップロード
  23. 23. アップロード内容を確認
  24. 24. 質問の種類を増やす
  25. 25. 質問と回答を学習させる
  26. 26. 世界へ発信!
  27. 27. 接続情報のメモをとる
  28. 28. Swagger定義ファイルをダウンロード bit.ly/jduc05-json
  29. 29. 修正は無料のVisual Studio Codeで! メモ帳 Visual Studio Code
  30. 30. 接続情報をJSONファイルに反映
  31. 31. 初回起動時の画面
  32. 32. 初回起動時の画面
  33. 33. 初回起動時の画面
  34. 34. カスタムコネクタの作成
  35. 35. OpenAPIファイル = さっきのJSON
  36. 36. 「続行」をクリック
  37. 37. 「コネクタの作成」をクリック
  38. 38. 「テスト」タブ > 「新しい接続」をクリック
  39. 39. 緑色の部分をAPIキーの項目に入力
  40. 40. 「カスタムコネクタの管理」を再度クリック
  41. 41. 作成したコネクタをテスト!
  42. 42. 作成したコネクタをテスト! {“question”:”試したい質問”}; と入力
  43. 43. 「OK(200)」が表示されていればFantastic!
  44. 44. +新しいアプリ
  45. 45. Web用のPowerApps Studio
  46. 46. 空のアプリ > 携帯電話レイアウトを選択
  47. 47. アプリが作成される
  48. 48. 画面構成 リボンスクリーン一覧 レイアウト と プロパティ
  49. 49. ビュー > データソース > データソースの追加
  50. 50. STEP2で追加したPowerAppsを選択
  51. 51. 関数バーに以下を記入 ClearCollect(chat,{id:0,name:”PowerBot”,text:”こんにちは。ご質問をお伺いしま す!”}) ClearCollect – リストを初期化する関数 Chat – リストの名前 ID – 0がボット、1がチャット相手
  52. 52. 挿入タブの「ギャラリー」 > 「縦」を選択
  53. 53. Itemsの関数を「chat」に ポイント! ギャラリーがリストと連携する =チャットの内容が表示される
  54. 54. チャットボット用のアイコンを追加 1 2 3
  55. 55. アプリを一度保存 1 4 32
  56. 56. 写真を選択 Imageの関数をIf(id=0,’アップした写真名’,User().Image)と設定します。 ポイント! If id = 0にすることで、チャット ボットの会話に対してだけ表示さ れる
  57. 57. 写真の位置を設定 関数を If(id=0,16,500)と設定 ポイント! X、Y設定が座標を表す If関数でアイコンの表示位置を制御
  58. 58. メッセージの表示位置を設定 テキストをクリックし、関数を If(id=0,Left,Right)と設定 ポイント! Align設定がテキスト系の位置を制御 2 3 1
  59. 59. チャット入力の項目を作る 挿入 > テキスト > テキスト入力
  60. 60. チャット「送信」のボタンを作る ボタン > Text = “送信”に設定
  61. 61. 送信ボタンに送信用の関数を入力 この関数が本セッションで一番むずかしい部分 関数: Collect(chat,{id:1,name:”あなた”,text:TextInput1.Text}); Collect(chat,{id:0,name:”ボット”,text:First(PowerApps.QnAMaker({question:TextInput1.Text}).answers).answer})
  62. 62. アプリを試す! そのまま画面右上の再生ボタンをクリックで試せる
  63. 63. UIをかっこよくする
  64. 64. アプリを「発行」する 発行しないと開発環境以外でアクセスできないので要注意!
  65. 65. アプリを試す!
  66. 66. iOSアプリ
  67. 67. iOSアプリ
  68. 68. ライセンス体系 Dynamics 365 & Office 365 無料 PowerApps Plan 1 760 PowerApps Plan 2 4350 ※正式な価格はMicrosoftの営業担当へお問い合わせください
  69. 69. 主な違い Dynamics 365 & Office 365 Power Apps Plan 1 Power Apps Plan 2 Common Data Service Common Data Service アプリの作成・共有・実行 アプリの作成・共有・実行 アプリの作成・共有・実行 複数の「環境」 組織単位のアクセス制御 *1 https://powerapps.microsoft.com/en-us/tutorials/connections-list/#all-connections プレミアム接続*1
  70. 70. おさらい • プログラミングは不要 • 基本的に無料 • とりあえずExcelからでも • 40分あればアプリは作れる
  71. 71. 今日の資料
  72. 72. 宣伝(すみません…) もしくは bit.ly/tymemo
  73. 73. ご清聴ありがとうございました!

×