Microsoft Graph Toolkit: Microsoft Graph によって提供される Web コンポーネントMicrosoft Graph Toolkit: Web Components powered by Microsoft Graph

Microsoft Graph Toolkit は、Microsoft Graph にアクセスして作業するための、再利用可能なフレームワークにとらわれない web コンポーネントとヘルパーのコレクションです。The Microsoft Graph Toolkit is a collection of reusable, framework-agnostic web components and helpers for accessing and working with Microsoft Graph. コンポーネントは、すぐに使用可能な完全に機能し、Microsoft Graph から認証され、データを取得するプロバイダーが組み込まれています。The components are fully functional right of out of the box, with built in providers that authenticate with and fetch data from Microsoft Graph.

Microsoft Graph ツールキットを使用すると、アプリケーションでの Microsoft Graph の使用が容易になります。The Microsoft Graph Toolkit makes it easy to use Microsoft Graph in your application. 次の例では、 ログイン および 議題 のコンポーネントを使用して、サインインしているユーザーとその予定表イベントが2行のコードで表示されていることを確認してください。In the example below, see how a signed in user and their calendar events are displayed with just two lines of code by using the Login and Agenda components.

この例は、次のようにしてください。Open this example in mgt.dev

Microsoft Graph Toolkit には何がありますか?What's in the Microsoft Graph Toolkit?

コンポーネントComponents

Microsoft Graph ツールキットには、Microsoft Graph Api によって作成された最も一般的なエクスペリエンスのための web コンポーネントのコレクションが含まれています。The Microsoft Graph Toolkit includes a collection of web components for the most commonly built experiences powered by Microsoft Graph APIs.

コンポーネントComponent 説明Description
ログインLogin Microsoft Identity platform を使用してユーザーを認証し、サインイン時にユーザーのプロファイル情報を表示するボタンとフライアウトコントロール。A button and a flyout control to authenticate a user with the Microsoft Identity platform and display the user's profile information on sign in.
人物Person ユーザーまたは連絡先を、写真、名前、電子メールアドレスによって表示します。Displays a person or contact by their photo, name, and/or email address.
ユーザーPeople ユーザーまたは連絡先のグループを写真またはイニシャルで表示します。Displays a group of people or contacts by their photos or initials.
予定一覧Agenda ユーザーまたはグループの予定表のイベントを表示します。Displays events in a user or group's calendar.
タスクTasks Microsoft Planner または Microsoft To Do のタスクを追加、削除、完了、または編集できるようにします。Displays and enables adding, removing, completing, or editing of tasks from Microsoft Planner or Microsoft To-Do.
ユーザー選択ウィンドウPeople picker ユーザーを検索し、結果のリストをレンダリングする機能を提供します。Provides the ability to search for people and renders the list of results.
ユーザーカードPerson card ユーザーに関するその他のプロファイル情報を表示するために、person コンポーネントで使用されるポップアップ。A flyout used on the person component to display more profile information about a user.
GetGet HTML にある Microsoft Graph API に対して、GET クエリを直接実行します。Make a GET query to any Microsoft Graph API directly in your HTML.
チャネルの選択Channel picker Microsoft Teams チャネルを検索して、レンダリングされた結果のリストからチャネルを選択できるようにします。Provides the ability to search for Microsoft Teams channels to select a channel from a rendered list of results.

プロバイダーProviders

コンポーネントは、 プロバイダーで使用する場合に最適に機能します。The components work best when used with a provider. プロバイダーは認証を有効にし、Microsoft Graph Api を呼び出すためのアクセストークンを取得するための実装を提供します。Providers enable authentication and provide the implementation for acquiring the access tokens for calling the Microsoft Graph APIs.

プロバイダーProviders 説明Description
MsalMsal MSAL.js を使用してユーザーにサインインし、トークンを取得して Microsoft Graph で使用します。Uses MSAL.js to sign in users and acquire tokens to use with Microsoft Graph.
SharePointSharePoint SharePoint web パーツ内のコンポーネントへの Microsoft Graph へのアクセスを認証および提供します。Authenticates and provides Microsoft Graph access to components inside of SharePoint web parts.
TeamsTeams Microsoft Teams タブの内部にあるコンポーネントへの Microsoft Graph へのアクセスを認証および提供します。Authenticates and provides Microsoft Graph access to components inside of Microsoft Teams tabs.
プロキシProxy バックエンドを介して Microsoft Graph へのすべての呼び出しをルーティングすることで、バックエンド認証を使用できるようにします。Allows the use of backend authentication by routing all calls to Microsoft Graph through your backend.
ユーザー設定Custom アプリケーションの既存の認証コードで認証と Microsoft Graph へのアクセスを有効にするためのカスタムプロバイダーを作成します。Create a custom provider to enable authentication and access to Microsoft Graph with your application's existing authentication code.

Microsoft Graph ツールキットを使用する理由Why use the Microsoft Graph Toolkit?

Microsoft Graph ツールキットを使用すると、Microsoft Graph を使用した一般的なエクスペリエンスを、すばやく簡単に、独自のアプリケーションに統合することができます。The Microsoft Graph Toolkit makes integrating common experiences powered by Microsoft Graph into your own application quick and easy.

開発時間の短縮Cut Development Time

Microsoft Graph Api に接続してデータを UI にレンダリングする作業は、カスタマイズを必要とすることなく、Microsoft365 の利便性が実現されるようになります。The work to connect to Microsoft Graph APIs and render the data in a UI that looks and feels like a Microsoft365 experience is done for you, with no customization required.

すべての場所で動作Works Everywhere

すべてのコンポーネントは web 標準に基づいており、最新のブラウザーおよび web フレームワーク (反応、角度、Vue など) でシームレスに動作します。All components are based on web standards and work seamlessly with any modern browser and web framework (React, Angular, Vue, etc.).

美しい、柔軟Beautiful but Flexible

コンポーネントは Microsoft365 エクスペリエンスのように設計されていますが、 CSS カスタムプロパティテンプレートを使用してカスタマイズすることもできます。The components are designed to look and feel like Microsoft365 experiences, but are also customizable using CSS custom properties and templating.

誰がそれを使用すべきか。Who should use it?

Microsoft Graph Toolkit は、Microsoft Graph に接続してデータにアクセスする web アプリケーション、Microsoft Teams タブ、または SharePoint web パーツを開発する開発者にとって最適です。The Microsoft Graph Toolkit is great for developers of all experience levels looking to develop a web application, Microsoft Teams tab, or SharePoint web part that connects to and accesses data from Microsoft Graph.

使用できる場所Where can I use it?

Microsoft Graph Toolkit は、以下のブラウザーでサポートされています。The Microsoft Graph Toolkit is supported in the following browsers.

Edge Internet Explorer 11 Firefox Chrome Safari Opera Samsung インターネット
EdgeEdge IE 11IE 11 FirefoxFirefox ChromeChrome SafariSafari OperaOpera SamsungSamsung

次の手順Next steps

  • プレイグラウンドのコンポーネントを試してみてください。Try out the components in the playground.
  • Microsoft Graph ツールキットを使い始めることができます。Get started with the Microsoft Graph Toolkit.
  • GitHubの Microsoft Graph ツールキットをご覧ください。Check out the Microsoft Graph Toolkit on GitHub.