僕はあなたを監視する(MS Graph Subscriptionのβで公開されたpresencesを使おう！)

僕はあなたを監視する(MS Graph Subscriptionのβで公開されたpresencesを使おう！)

• 1.
  僕はあなたを監視する (MS Graph Subscriptionのβで公開されたpresencesを使おう！) 2020.08Japan 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.
  作ったものについて • 構成 • AzureFunctions • 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 • オリジナルのMicrosoftGraph 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