Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API...

25
Bot × Office 365 Microsoft Bot Framework と Microsoft Graph API を使った 業務システムの新しい UX @CLR/H 勉強会 #14 東京(2016/10/22)

Transcript of Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API...

Page 1: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Bot × Office 365

Microsoft Bot Framework と

Microsoft Graph API を使った

業務システムの新しい UX

@CLR/H 勉強会 #14 東京(2016/10/22)

Page 2: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Copyright ⓒ Seraph Corp. All rights reserved 2

宇留野 彩子(25歳)

http://telask365.jp/minohodo/office_minohodo01.html

Page 3: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Copyright ⓒ Seraph Corp. All rights reserved 3

Happy Halloween!

Page 4: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Copyright ⓒ Seraph Corp. All rights reserved 4

https://www.facebook.com/office365blog/

いいね!をくれないと、いたずらしちゃうぞ♡

Page 5: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

どんなところでお仕事しているの?

株式会社セラフ

http://www.srp.co.jp/solution/sharepoint.html

Page 6: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

どんなところでお仕事しているの?

http://www.srp.co.jp/solution/sharepoint.html

デザインサンプルです

Page 7: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Copyright ⓒ Seraph Corp. All rights reserved 7

りんなは

出てこないの?

Page 8: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Copyright ⓒ Seraph Corp. All rights reserved 8

Office 365 ってなぁに? Office 365 について簡単におさらいしましょう!

Page 9: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Copyright ⓒ Seraph Corp. All rights reserved 9

本日のテーマ

Bot × Office 365

Bot を使って

Office 365 予定表

を便利に活用してみよう!

Page 10: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Copyright ⓒ Seraph Corp. All rights reserved 10

Bot

お仕事の仕方が

変わるかも!?

Office 365

予定表

×

GOAL 業務が便利になるための新しい選択肢になるかも

Page 11: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Copyright ⓒ Seraph Corp. All rights reserved 11

本日はどんな要素が出てくるの? まずは単語を頭に入れておきましょう

Page 12: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Demo の仕組みについてご紹介

全体像

Outlook メール

OneDrive

Groups

Excel Online

予定表のデータ Access Token

詳しくは後で解説します

Page 13: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

1

2

4

アジェンダ

5

3

Bot ってなぁに?

Bot を使うといいことが起きる!?

Demo の仕組みについてご紹介

なんで Office 365 予定表なの?

Demo

Page 14: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Bot ってなぁに?

会話(音声) チャット(IM)

Bot はロボット

概要

Page 15: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

よく

使われている

フロント

Bot ってなぁに?

テキストによるコミュニケーション

コミュニケーションを取ることで裏側で処理してくれる

Page 16: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

事例

KLM

オランダ航空

Bot ってなぁに?

Page 17: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

事例

ドミノ・ピザ

Bot ってなぁに?

Page 18: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Bot を

使うと

いいことが

起きる!?

社内でもいいことが起きるかも!? 業務に結びつけることができるかも!!!

Page 19: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Demo の仕組みについてご紹介

Microsoft Bot Framework 3.0 の基本編

まずは基本的な仕組みについて解説します

まず今回はコンシューマー向けの Skype を使います。私が Skype(Botに対して)に送ったメッセージは、裏側では Microsoft Bot Framework から Bot に渡されています。Bot は私に返信をするためサインインをします。私は Skype を使うためにサインインをしましたが、Bot はアプリなので Azure AD にクライアント ID, クライアントシークレットという ID, PWD を渡してサインインをします。すると、Azure AD からアクセストークンという許可書をもらえます。(これで Bot もサインイン成功です!)あとは Bot → Microsoft Bot Framework を介して、私に返信をしてくれます。

Page 20: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Demo の仕組みについてご紹介

Microsoft Graph API 連携

Outlook メール

OneDrive

Groups

Excel Online

Access Token予定表のデータ③

Microsoft Graph API と連携した場合について

解説します

私は Office 365 予定表を見るため Office 365 にサインインをしていますが、Bot も同じように予定表にアクセスするためサインインする必要があります。その方法として、①クライアント ID, クライアントシークレットをAzure AD に渡します。②アクセストークンという許可書をもらえます。(これで Bot も Office 365 にアクセスできます!)③②でもらったアクセストークンを Microsoft Graph API に渡し、予定表にアクセスします。④予定表で取得したデータを 前スライドの仕組みを介して 私に返信してくれます。

Page 21: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

なんで Office 365 予定表なの?

Web版

予定表

Bot の操作として表示・予約だとみなさまにも

Demoのイメージがしやすいかと思いました

Page 22: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

Demo・あいさつ編

・ビジネス編①

・ビジネス編②

おまけでDemoのキャプチャを載せておきますね♪

Page 23: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

おまけですよ♪Skype メッセージ送信者

本人の今日の予定の表示

Page 24: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

おまけですよ♪会議室の予定の表示

Page 25: Bot × Office 365 〜 Microsoft Bot Framework と Microsoft Graph API を使った業務システムの新しい UX ~

https://www.microsoft.com/ja-jp/download/details.aspx?id=49441

https://docs.com/masaaki-inui/4855/13office365-20160209

Microsoft Graph API についてはコチラ