Microsoft Graph ツールキットを使用して SharePoint Web パーツを構築する

2023-03-21

このトピックでは、SharePoint クライアント側の Web パーツで Microsoft Graph ツールキットコンポーネントを使用する方法について説明します。開始するには、次の手順を実行します。

開発環境をセットアップし、Web パーツを作成します。
Microsoft Graph ツールキット SharePoint Framework パッケージを追加します。
SharePoint プロバイダーを追加します。
コンポーネントを追加します。
アクセス許可を構成します。
Microsoft Graph ツールキット SharePoint Framework パッケージを展開します。
Web パーツを構築して展開します。
Web パーツをテストします。

SharePoint Framework 開発環境をセットアップし、新しい Web パーツを作成する

手順に従って SharePoint Framework 開発環境をセットアップしてから、新しい Web パーツを作成します。

Microsoft Graph ツールキット SharePoint Framework パッケージを追加する

複数の SharePoint Framework コンポーネントが独自の Microsoft Graph ツールキットコンポーネントのセットをページに登録しないようにするには、Microsoft Graph ツールキット SharePoint Framework パッケージをテナントに展開し、ソリューションで使用する Microsoft Graph ツールキットコンポーネントをこのパッケージから参照する必要があります。

Microsoft Graph ツールキット SharePoint Framework パッケージには、Microsoft Graph ツールキットコンポーネントの単一インスタンスを SharePoint に登録する SharePoint Framework ライブラリが含まれています。

次のコマンドを使用して、Microsoft Graph ツールキット SharePoint Framework npm パッケージをインストールします。

npm install @microsoft/mgt-spfx

SharePoint プロバイダーを追加する

Microsoft Graph Toolkit プロバイダーは、コンポーネントの認証と Microsoft Graph へのアクセスを可能にします。詳細については、「プロバイダーを使用する」を参照してください。 SharePoint Web パーツは、Web パーツをホストするページにアクセスするためにユーザーが既にサインインしている必要があるため、常に認証されたコンテキストに存在します。このコンテキストを使用して、SharePoint プロバイダーを初期化します。

まず、プロバイダーを Web パーツに追加します。プロジェクトフォルダーで src\webparts\<your-project>\<your-web-part>.ts ファイルを見つけ、ファイルの先頭、既存の import ステートメントのすぐ下に次の行を追加します。

import { Providers, SharePointProvider } from '@microsoft/mgt-spfx';

次に、Web パーツの onInit() メソッド内の認証されたコンテキストでプロバイダーを初期化する必要があります。同じファイルで、public render(): void { 行の直前に次のコードを追加します。

protected async onInit() {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
}

コンポーネントの追加

これで、Web パーツへのコンポーネントの追加を開始できます。 render() メソッド内の HTML にコンポーネントを追加するだけで、コンポーネントは SharePoint コンテキストを使用して Microsoft Graph にアクセスします。たとえば、Person コンポーネントを追加するには、コードは次のようになります。

public render(): void {
  this.domElement.innerHTML = `
    <mgt-person person-query="me" view="twolines"></mgt-person>
  `;
}

注:

React を使用して Web パーツを構築している場合は、@microsoft/mgt-spfx ドキュメントを参照して @microsoft/mgt-react の使用方法を確認してください。

アクセス許可を構成する

SharePoint Framework アプリケーションから Microsoft Graph を呼び出すには、ソリューションパッケージで必要なアクセス許可を要求する必要があり、Microsoft 365 テナント管理者は要求されたアクセス許可を承認する必要があります。

ソリューションパッケージにアクセス許可を追加するには、config\package-solution.json ファイルを検索して開き、次のように設定します。

"isDomainIsolated": false,

その行のすぐ下に、次を追加します。

"webApiPermissionRequests":[],

使用しているコンポーネントに応じて、必要な Microsoft Graph API のアクセス許可を決定します。各コンポーネントのドキュメントページには、コンポーネントに必要なアクセス許可のリストが記載されています。 webApiPermissionRequests に必要な各アクセス許可を追加する必要があります。たとえば、Person コンポーネントと Agenda コンポーネントを使用している場合、webApiPermissionRequests は次のようになります。

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "User.Read"
  },
  {
    "resource": "Microsoft Graph",
    "scope": "Calendars.Read"
  }
]

Microsoft Graph ツールキット SharePoint Framework パッケージを展開する

SharePoint Framework パッケージをテナントに展開する前に、Microsoft Graph ツールキット SharePoint Framework パッケージをテナントに展開する必要があります。プロジェクトで使用した Microsoft Graph ツールキットのバージョンに対応するパッケージを、GitHub の [リリース] セクションからダウンロードできます。

重要

Microsoft Graph ツールキット用の SharePoint Framework ライブラリのバージョンは 1 つしかテナントにインストールできないため、ソリューションで Microsoft Graph ツールキットを使用する前に、組織またはお客様が SharePoint Framework ライブラリのバージョンを既に展開していて、同じバージョンを使用しているかどうかを確認します。

Microsoft Graph ツールキット SharePoint Framework .sppkg パッケージをダウンロードした後、SharePoint Online アプリカタログにアップロードします。 SharePoint 管理センターの [その他の機能] ページに移動します。 [アプリ] の下の [開く] を選択し、[アプリカタログ] をクリックし、[SharePoint 用のアプリを配布する] をクリックします。 .sppkg ファイルをアップロードし、[展開] をクリックします。

Web パーツを構築して展開する

次に、アプリケーションを構築して SharePoint に展開します。次のコマンドを実行して、アプリケーションを構築します。

gulp bundle
gulp package-solution

sharepoint/solution フォルダー内に新しい .sppkg ファイルがあります。このファイルを SharePoint Online アプリカタログにアップロードする必要があります。 SharePoint 管理センターの [その他の機能] ページに移動します。 [アプリ] の下の [開く] を選択し、[アプリカタログ] をクリックし、[SharePoint 用のアプリを配布する] をクリックします。 .sppkg ファイルをアップロードし、[展開] をクリックします。

次に、管理者としてアクセス許可を承認する必要があります。

SharePoint 管理センターに移動します。左側のナビゲーションで、[詳細]、[API アクセス] の順に選択します。 config\package-solution.json ファイルに追加したアクセス許可ごとに保留中のリクエストが表示されます。各アクセス許可を選択して承認します。

Web パーツをテストする

これで、Web パーツを SharePoint ページに追加してテストする準備が整いました。コンポーネントは Microsoft Graph を呼び出すために認証されたコンテキストを必要とするため、ホストされたワークベンチを使用して、Microsoft Graph ツールキットを使用する Web パーツをテストする必要があります。ホストされているワークベンチは、https://< YOUR_TENANT.sharepoint.com/_layouts/15/workbench.aspx> にあります。

プロジェクトでファイルを config\serve.json 開き、の initialPage 値をホストされているワークベンチの URL に置き換えます。

"initialPage": "https://<YOUR_TENANT>.sharepoint.com/_layouts/15/workbench.aspx",

ファイルを保存してから、コンソールで次のコマンドを実行して、Web パーツを構築およびプレビューします。

gulp serve

ホストされているワークベンチがブラウザーで自動的に開きます。 Web パーツをページに追加すると、Microsoft Graph ツールキットコンポーネントが動作している Web パーツが表示されます。コンソールで Gulp serve コマンドが実行されている限り、続けてコードを編集し、ブラウザーを更新して変更を確認できます。

次のステップ

Microsoft Graph ツールキットを使用する SharePoint Web パーツの構築に関するこのステップバイステップのチュートリアルをご確認ください。
プレイグラウンドでさまざまなコンポーネントを試してみてください。
Stack Overflow で質問をお待ちしています。
バグを報告するか、GitHub に機能リクエストを残してください。