- The Microsoft Graph Toolkit allows for easy integration of Graph data access and authentication into web applications, SharePoint web parts, and Microsoft Teams tabs. It provides JavaScript libraries and web components to build interfaces as well as providers to handle authentication and data access to Microsoft Graph. The toolkit simplifies Graph development by removing the need to handle authentication, requests, and other complexities independently. It can customize existing components or build new ones and supports common frameworks like Angular. The session demonstrated using the toolkit through examples and reviewing the documentation and codebase.

1. Microsoft Graph Toolkitを使ってGraph開発を体験しよう
2021.06 第3回Japan M365 Dev User Group勉強会
#M365Dev

2. 誰？
Takas(@DevTakas)
Angular / Azure / .NET Core / Azure DevOps / Microsoft Graph
Microsoft MVP Office Development
#M365Dev

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

4. おしながき
1. Microsoft Graph Toolkitとは
2. Microsoft Graph Toolkitを使ってみよう
3. ソースコードを眺めてみよう
4. Build2021で発表された内容
5. まとめ
#M365Dev

5. Microsoft Graph Toolkitとは
- 公式のドキュメントから
Microsoft Graph Toolkitコンポーネントは、Web アプリケーション、SharePoint Web パーツ、または
Microsoft Teams タブに簡単に追加できます。 コンポーネントは Web 標準に基づいており、プレーンな
JavaScript プロジェクトまたは Reach、Angular、Vue.js などの一般的な Web フレームワークの両方で使用
できます。
#M365Dev

6. Microsoft Graph Toolkitとは
- 公式のドキュメントから
• JavaScriptライブラリ
• 大雑把に分けて2つの機能が提供される
• Web Componentで提供されるコントロール群
• データアクセスをサポートしてくれるプロバイダー群
#M365Dev

7. Microsoft Graph Toolkitとは
-Graph開発ってめっちゃ大変
• 認証を行うライブラリの知識
• (使用するのであれば)GraphClientの知識
• それを組み合わせる手段
• HTML/JS/CSS
• Graphで提供される情報について
#M365Dev

8. Microsoft Graph Toolkitとは
-Component
• 提供されるコントロールについて
• Web Componentで提供される
• HTML標準の<div>やらと同じように
mgtが提供するControlをHTMLテンプレート上で記述できる
• 例えば、HTMLで下記の記述を行うだけでログイン機構込で実装可能
• JSはGraphToolKitを読み込むだけで、自前で実装する箇所はない
<mgt-login></mgt-login>
#M365Dev

9. Microsoft Graph Toolkitとは
-プロバイダ
• 認証を簡易に実装するための機能を提供してくれる
• msal
• SharePoint
• Teams
• Electron
• HTMLテンプレートでもプロバイダの設定を行える
#M365Dev

10. Microsoft Graph Toolkitとは
• Graph開発でめっちゃらくできる😀
• といっても知識が不要というわけではない
• もちろん知識は必要だが敷居はとても下がった
#M365Dev

11. Microsoft Graph Toolkitとは
- 使い方の学習はどのリソースを行うのが良いのか
• Microsoft LearnのGraph関連がおすすめ
• Graphの基礎から抑えているので基本からやりたい場合に良い
• ぶっちゃけ今回のセッションの内容はここをなぞっている
• すでに終了しているがSkillChallengeのコレクションが良い感じ
• https://docs.microsoft.com/ja-jp/users/cloudskillschallenge/collections/67pku3g07x08?WT.mc_id=cloudskillschallenge_7ca6c7f7-cc0d-4c31-9b74-5ce5658787e7
#M365Dev

12. Microsoft Graph Toolkitとは
- 使い方やどんなコントロールがあるか眺めてみたい
• Storybookが提供されておりComponentの使い方など確認可能
• https://mgt.dev/
• JSやCSSもいじれるのでちょい試したい時に使うのも良し
• Template使った例もあるのでそれの手本にみるのも有り
#M365Dev

13. Microsoft Graph Toolkitを使ってみよう
- 基本的な使い方
1. Azure ADアプリケーションを作成する
2. HTML(or npm)でToolkitライブラリを読み込む
3. HTMLテンプレート上でがんばる
#M365Dev

14. Microsoft Graph Toolkitを使ってみよう
-レイアウトをいじってみる
• 各Componentで提供されているカスタムプロパティに指定するのが推奨されている
• Componentから提供されているプロパティはDocumentで確認可能
• 既定でライトテーマとダークテーマのCSSセットが提供されている
• mgt-light / mgt-dark
#M365Dev

15. Microsoft Graph Toolkitを使ってみよう
-自分の好きな構成にしてみる
• そもそもデータだけで画面構成は自分で好きに組みたい場合
• テンプレートToolkitを使用
• Componentをベースに描画される要素を上書きする
• HTMLテンプレートで全部実装可能
• {{プロパティ}}でデータバインドできる
• Componentから提供されるプロパティはドキュメントから参照可能
• 実態はGraphのプロパティなのでそっちも抑えておくと尚良
• 困ったら<mgt-get>
• リクエストから指定できるのでComponentが存在しないデータにも
• テンプレートで使える構文などは👇参照
• https://docs.microsoft.com/ja-jp/graph/toolkit/customize-components/templates
#M365Dev

16. ソースコードを眺めてみよう
-GitHubのプロジェクト構成を見てみる
• samples
• 様々な実装サンプルが格納されている
• 一番最初はここをみれば良いと思う
• packages
• 各ライブラリの実装の実態はここ
• 構成など
• プラクティスの集合体なので自分で作る時の参考に
• https://github.com/microsoftgraph/microsoft-graph-toolkit
#M365Dev

17. Build2021で発表された内容
• msal2プロバイダが提供開始された
• これでSPAアプリケーションでAzureADアプリを構成できる
• 👆はPKCE対応されているアプリケーションなので基本
こっちにしたほうが良い
• mgt-file/mgt-file-listが提供開始
• OneDriveの中身を参照するComponentとなっている
• どちらも最新のライブラリで提供済み
• build直後は入ってなかったがいつの間にか合流していた
#M365Dev

18. まとめ
• Microsoft Graph Toolkitを使用することで簡単に
Graphデータを利用したFront開発を行うことができる
• フロントだけでなくTeamsやSharePoint開発でも
• カスタマイズは容易
• CSSによる変更はもちろん構成からまるっと変更可能
• 爆速で開発できるようになるのでどんどん活用していこう
• JS/CSSそこまで弄らなくても良いのでPoCとか初心者の学習にも最適
#M365Dev

19. 参考ページ
• Microsoft Graph Playground
• https://mgt.dev/
• Microsoft Graph Toolkit: Microsoft サービスの UI コンポーネントと認証プロバイダー Graph
• https://docs.microsoft.com/ja-jp/graph/toolkit/overview
• Microsoft Graph ツールキットを使ってアプリを開発
• https://docs.microsoft.com/ja-jp/learn/paths/m365-msgraph-toolkit/
• microsoft-grah-toolkit
• https://github.com/microsoftgraph/microsoft-graph-toolkit
#M365Dev