2020年8月の 第 1 回 Japan M365 Dev User Group 勉強会 のLTで発表した資料です。 作成物のソースコードは https://github.com/Takas0522/my-graph-toolkit

1. 僕はあなたを監視する
(MS Graph Subscriptionのβで公開されたpresencesを使おう！)
2020.08 Japan M365 Dev User Group 勉強会

2. 誰？
@DevTakas
Angular / Azure / .NET Core / Azure DevOps / Microsoft Graph
Microsoft MVP Office Development(新入)

3. 誰？
ブログやってます
http://takasdev.hatenablog.com/
「はまったりひらめいたり…とか…」

4. デモ

5. なぜ作ろうと思った？
• Presenceの変更通知がβで公開されたので
• 通話したい人が離席中とかでいちいち確認するのがだるい
• オリジナルのGraph Toolkit を作ってみたかった
• https://docs.microsoft.com/ja-jp/graph/toolkit/overview

6. 作ったものについて
• 構成
• Azure Functions
• Azure SignalR Service
• Wepページ(localhost)
Microsoft Graph
localhost:xxxx

7. Microsoft Graph
-使用したリソースたち
• users：ユーザーのリスト+名前の取得
• presence：ユーザーの状態の取得
これ👉

8. Microsoft Graph
- presenceの変更通知
• 7月にβ公開された
• Presence状態が変わる→指定したWebAPI叩いてくれる
• 変更通知の有効期限は1時間
• 複数ユーザーのpresence取得は$filter={userid},{userid}
• getPresencesByUserIdみたいに別APIじゃないみたい
• presenceのサブスクリプションはリソースレベルで張られる。
• 別の人をPOSTで追加しようとするとConfrictエラーに。
• 今の状態から追加したい場合は変更通知を削除し複数ユーザーで作り
直さないといけない。

9. Web Component
• 独自のHTMLタグを作成するためのWebプラットフォームAPI
• 下記3種の要素からなる
• Custom Elements
• Shadow DOM
• HTML Templates

10. Web Component
• オリジナルのMicrosoft Graph Tool kit作りたいというのが主
• Component志向のWebフレームワークだと作成が楽
• Angular – Angular Elements
• vue.js – vue-custom-element

11. まとめ
• Presenceの使い方を抑えることができた
• データ取得と変更通知
• Web Componentを使って
オリジナルのToolkitもどきを作ることができた
• Graphで取得できるデータ群と
WebComponentによる部品化は相性がいいように思えた
• Graph+フロントエンドはいいぞ

12. 参考文献
• Microsoft Docs – Change Log
• https://docs.microsoft.com/en-us/graph/changelog?view=graph-rest-beta
• Microsoft Docs – Subscription
• https://docs.microsoft.com/en-us/graph/api/resources/subscription?view=graph-rest-beta
• Microsoft Docs – Presence
• https://docs.microsoft.com/en-us/graph/api/resources/presence?view=graph-rest-beta
• MDN – Web Components
• https://developer.mozilla.org/ja/docs/Web/Web_Components
• Can I Use – Web Component
• https://caniuse.com/#search=Web%20Component
• Microsoft Graph Toolkit
• https://docs.microsoft.com/en-us/graph/toolkit/overview
• Angular Elements 概要
• https://angular.jp/guide/elements
• vue-custom-element
• https://github.com/karol-f/vue-custom-element