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

[アーティクル]
11/19/2024

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

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

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

「SharePoint Framework開発環境を設定する」の手順に従います。

React ベースの Web パーツ
フレームワーク Web パーツなし

Web パーツプロジェクトを作成する

指示に従って新しい Web パーツを作成します。使用するテンプレートを尋ねられたら、[React] を選択します。

重要

yo @microsoft/sharepointを使用する場合は、フレームワークを選択するときにReactを選択する必要があります。

Microsoft Graph Toolkit パッケージを追加する

Microsoft Graph Toolkit は、SharePoint Framework Web パーツを構築するために必要な複数のパッケージを発行します。 @microsoft/mgt-element、@microsoft/mgt-react、@microsoft/mgt-sharepoint-provider、@microsoft/mgt-spfx-utils パッケージをインストールすると、必要な依存関係がインストールされます。

npm install @microsoft/mgt-element @microsoft/mgt-react @microsoft/mgt-sharepoint-provider @microsoft/mgt-spfx-utils

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

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

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

import { Providers } from "@microsoft/mgt-element";
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";

次に、Web パーツの onInit() メソッド内の認証済みコンテキストを使用してプロバイダーを初期化します。同じファイルで、public render(): void { 行の直前に次のコードを追加します。

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

あいまいさの解消を設定する

1 つのページに Microsoft Graph Toolkit を使用する Web パーツソリューションが複数ある場合に Web パーツが機能するようにするには、あいまいさを解消する必要があります。詳細については、あいまいさの解消に関するページを参照してください。

まず、 @microsoft/mgt-element からインポートを更新し、 lazyLoadComponent ヘルパー用にインポートを追加します。

import { Providers, customElementHelper } from "@microsoft/mgt-element";
import { lazyLoadComponent } from "@microsoft/mgt-spfx-utils";

次に、ルート Web パーツの onInit() メソッドを更新して、あいまいさを解消するように設定します。あいまいさを解消するために使用される文字列は、SharePoint Framework ソリューションに一意である必要があります。

protected async onInit(): Promise<void> {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
  customElementHelper.withDisambiguation('contoso-hr-solution');
  return super.onInit();
}

React コンポーネントのインポートとレンダリングを更新する

まず、コンポーネントのインポートを変換して、 React.lazyを使用します。 import <WebPartName> from './components/<WebPartName>;ステートメントを見つけて、次のように更新します。

const MgtComponent = React.lazy(
  () =>
    import(
      /* webpackChunkName: 'mgt-react-component' */ "./components/<WebPartName>"
    )
);

次に、 lazyLoadComponent ヘルパーを使用するように render メソッドを変更します。

  public render(): void {
    const element = lazyLoadComponent<IHelloWorldProps>(MgtComponent, {
      description: this.properties.description,
      isDarkTheme: this._isDarkTheme,
      environmentMessage: this._environmentMessage,
      hasTeamsContext: !!this.context.sdks.microsoftTeams,
      userDisplayName: this.context.pageContext.user.displayName
    });

    ReactDom.render(element, this.domElement);
  }

これで、Web パーツは次のようになります。

import * as React from "react";
import * as ReactDom from "react-dom";
import { Version } from "@microsoft/sp-core-library";
import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField,
} from "@microsoft/sp-property-pane";
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IReadonlyTheme } from "@microsoft/sp-component-base";
import { Providers, customElementHelper } from "@microsoft/mgt-element";
import { lazyLoadComponent } from "@microsoft/mgt-spfx-utils";
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";

import * as strings from "HelloWorldWebPartStrings";
const HelloWorld = React.lazy(
  () =>
    import(
      /* webpackChunkName: 'mgt-react-component' */ "./components/HelloWorld"
    )
);
import { IHelloWorldProps } from "./components/IHelloWorldProps";

export interface IHelloWorldWebPartProps {
  description: string;
}

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  private _isDarkTheme: boolean = false;
  private _environmentMessage: string = "";

  public render(): void {
    const element = lazyLoadComponent<IHelloWorldProps>(HelloWorld, {
      description: this.properties.description,
      isDarkTheme: this._isDarkTheme,
      environmentMessage: this._environmentMessage,
      hasTeamsContext: !!this.context.sdks.microsoftTeams,
      userDisplayName: this.context.pageContext.user.displayName,
    });

    ReactDom.render(element, this.domElement);
  }

  protected async onInit(): Promise<void> {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
    customElementHelper.withDisambiguation("contoso-hr-solution");
    return super.onInit();
  }
  // [...] trimmed for brevity
}

コンポーネントの追加

コンポーネントを React コンポーネントに追加します。 src\webparts\<your-project>\components\<your-component>.tsx ファイルを見つけて開き、使用するコンポーネント (この場合は Person コンポーネント) のインポートを追加し、Person コンポーネントを使用するように render() メソッドを更新します。これで、コンポーネントは次のようになります。

import * as React from "react";
import type { IHelloWorldProps } from "./IHelloWorldProps";
import { Person } from "@microsoft/mgt-react";

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    return <Person personQuery="me" view="twolines" />;
  }
}

または、React機能コンポーネントを使用する場合:

import * as React from "react";
import type { IHelloWorldProps } from "./IHelloWorldProps";
import { Person, ViewType } from "@microsoft/mgt-react";

const HelloWorld = (props: IHelloWorldProps): React.ReactElement => (
  <Person personQuery="me" view={ViewType.twolines} />
);

export default HelloWorld;

Web パーツプロジェクトを作成する

指示に従って新しい Web パーツを作成します。

Microsoft Graph Toolkit パッケージを追加する

Microsoft Graph Toolkit は、SharePoint Framework Web パーツを構築するために必要な複数のパッケージを発行します。次のコマンドを使用して、Microsoft Graph Toolkit npm パッケージをインストールします。

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

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

import { Providers } from "@microsoft/mgt-element";
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";

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

あいまいさの解消を設定する

1 つのページに Microsoft Graph Toolkit を使用する Web パーツソリューションが複数ある場合に Web パーツが機能するようにするには、あいまいさを解消する必要があります。詳細については、あいまいさの解消に関する記事を参照してください。

まず、からインポートを更新します。 @microsoft/mgt-element

import { Providers, customElementHelper } from "@microsoft/mgt-element";

次に、 onInit() メソッドを更新して、あいまいさを解消するように設定します。あいまいさを解消するために使用される文字列は、SharePoint Framework ソリューションに一意である必要があります。

protected async onInit() {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
  customElementsHelper.withDisambiguation('contoso-hr-solution');
}

コンポーネントの追加

これで、Web パーツへのコンポーネントの追加を開始できます。まず、関連するレジスタ関数をインポートします。

import { registerMgtPersonComponent } from "@microsoft/mgt-components";

注:

登録関数は、 registerMgt{Name}Component()の名前付け規則を使用します。ユーザー選択コントロールの場合、この関数は registerMgtPeoplePickerComponent()されます。

onInit() メソッドであいまいさの解消を構成した後、レジスタ関数を呼び出します。

protected async onInit() {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
  customElementsHelper.withDisambiguation('contoso-hr-solution');
  registerMgtPersonComponent();
}

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

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

アクセス許可を構成する

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"
  }
]

Webpack を構成する

Web パーツを構築するには、追加の Babel 変換を使用して、省略可能なチェーンと nullish 結合を使用して最新の JavaScript を正しく処理するように、SharePoint Framework Webpack 構成を更新する必要があります。

Babel パッケージをインストールする

ES2021 ベースのコードを出力する依存関係を正しく処理するには、babel ローダーと一部の変換を開発の依存関係としてプロジェクトに追加する必要があります。

npm i --save-dev babel-loader@8.3.0 @babel/plugin-transform-optional-chaining @babel/plugin-transform-nullish-coalescing-operator @babel/plugin-transform-logical-assignment-operators

Webpack 構成を変更する

Webpack バージョン <=4

SharePoint Frameworkは、Web パーツのバンドルに使用される Webpack 構成を変更するための機能拡張モデルを提供します。 gulpfile.jsを見つけて開きます。を含む行の上に次のコードを追加します。 build.initialize(require('gulp'));

const path = require("path");
const litFolders = [
  `node_modules${path.sep}lit${path.sep}`,
  `node_modules${path.sep}@lit${path.sep}`,
  `node_modules${path.sep}lit-html${path.sep}`
];
build.configureWebpack.mergeConfig({
  additionalConfiguration: generatedConfiguration => {
    generatedConfiguration.module.rules.push({
      test: /\.js$/,
      // only run on lit packages
      include: resourcePath =>
        litFolders.some(litFolder => resourcePath.includes(litFolder)),
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            '@babel/plugin-transform-optional-chaining',
            '@babel/plugin-transform-nullish-coalescing-operator',
            '@babel/plugin-transform-logical-assignment-operators'
          ]
        }
      }
    });
    return generatedConfiguration;
  }
});

これにより、lit ライブラリのコードが、SharePoint Framework ビルドチェーンによって正しく処理されます。これは、SharePoint プロバイダーのバージョン <=v1.18に必要です。

Webpack バージョン 5 以降

バージョン 5 以降の webpack を使用する場合は、追加の構成は必要ありません。これは、SharePoint プロバイダーバージョンの v1.19+でサポートされています。

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

次に、アプリケーションをビルドし、SharePoint にデプロイします。次のコマンドを実行して、アプリケーションを構築します。

gulp build
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 Toolkit を使用する 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 コマンドが実行されている限り、続けてコードを編集し、ブラウザーを更新して変更を確認できます。

次のステップ

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

次の方法で共有

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

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

Web パーツプロジェクトを作成する

Microsoft Graph Toolkit パッケージを追加する

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

あいまいさの解消を設定する

React コンポーネントのインポートとレンダリングを更新する

コンポーネントの追加

Web パーツプロジェクトを作成する

Microsoft Graph Toolkit パッケージを追加する

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

あいまいさの解消を設定する

コンポーネントの追加

アクセス許可を構成する

Webpack を構成する

Babel パッケージをインストールする

Webpack 構成を変更する

Webpack バージョン <=4

Webpack バージョン 5 以降

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

Web パーツをテストする

次のステップ

フィードバック

その他のリソース

次の方法で共有

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

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

Web パーツ プロジェクトを作成する

Microsoft Graph Toolkit パッケージを追加する

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

あいまいさの解消を設定する

React コンポーネントのインポートとレンダリングを更新する

コンポーネントの追加

アクセス許可を構成する

Webpack を構成する

Babel パッケージをインストールする

Webpack 構成を変更する

Webpack バージョン <=4

Webpack バージョン 5 以降

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

Web パーツをテストする

次のステップ

フィードバック

その他のリソース

Web パーツプロジェクトを作成する