Microsoft Graph ツールキットの使用を開始

  • [アーティクル]

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

ツールキットの使用を開始するには、この短いビデオをご覧ください。

詳細なチュートリアルについては、「 Microsoft Graph Toolkit の概要 」モジュールを参照してください。

教育機関向け Microsoft 365 テナントをセットアップする

Microsoft Graph Toolkit を使用してアプリを開発するには、Microsoft 365 テナントにアクセスする必要があります。 Microsoft 365 テナントをお持ちでない場合は、 Microsoft 365 開発者プログラムを通じてテナントの資格を得る可能性があります。詳細については、 FAQ を参照してください。 または、 1 か月間の無料試用版にサインアップするか、Microsoft 365 プランを購入することもできます。

開発環境をセットアップする

ツールキットを使用して開発するには、次のものが必要です。

  • テキスト エディターまたは IDE。 任意のエディターまたは IDE を使用することも、 Visual Studio Code を無料でインストールして使用することもできます。
  • Microsoft Edge、Google Chrome、Firefox などの最新の Web ブラウザー。
  • Node.js の LTS バージョン。 nodejs.org からインストールできます。

Microsoft Graph Toolkit を使用する

アプリケーションで Microsoft Graph Toolkit を使用するには、パッケージをインストールするか、ローダーを npm (経由で unpkg) 直接参照します。

ES6 モジュールを介してツールキットを使用すると、バンドル プロセスを完全に制御でき、アプリケーションに必要なコードのみをバンドルできます。 ES6 モジュールを使用するには、プロジェクトに @microsoft/mgt-element、 @microsoft/mgt-components、および @microsoft/mgt-msal2-provider パッケージを追加します。

npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider

コンポーネントを HTML のカスタム要素として使用するには、コンポーネントを登録する必要があります。 コードでコンポーネントを使用するには、必要なコンポーネント登録関数をインポートして実行します。 次の例は、議題とログイン コンポーネントに対してこれを行う方法を示しています。

<script type="module">
  import { registerMgtMsal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtLoginComponent, registerMgtAgendaComponent } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  registerMgtMsal2Provider();
  registerMgtLoginComponent();
  registerMgtAgendaComponent();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>

からすべてのコンポーネント @microsoft/mgt-componentsを登録する場合は、ショートカットとして、 ヘルパー メソッドを registerMgtComponents() 使用できます。 プロバイダーを宣言的に使用するには、適切なプロバイダーが異なるパッケージからソース化されているため、適切なプロバイダーを個別に登録する必要があります。

<script type="module">
  import { registerMgtMsal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  registerMgtMsal2Provider();
  registerMgtComponents();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>

重要

Webpack や Rollup などのツリー シェイクサポート バンドルを使用する場合は、個々のコンポーネントをインポートして登録する必要があります。 これにより、未使用のコンポーネントがビルドからツリーシェイクされます。

次の例に示すように、プロバイダーを命令的に構成することもできます。

<script type="module">
  import { Providers } from 'node_modules/@microsoft/mgt-element/dist/es6/index.js';
  import { Msal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  Providers.globalProvider = new Msal2Provider({clientId: '<YOUR_CLIENT_ID>'});
  registerMgtComponents();
</script>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>