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

[アーティクル]
02/08/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-react、@microsoft/mgt-sharepoint-providerおよびパッケージを@microsoft/mgt-elementインストールすると、@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";

次に onInit() 、ルート Web パーツのメソッドを更新して、あいまいさを解消するように設定します。あいまいさを解消するために使用される文字列は、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>")
);

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

  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();
}

メソッド内の HTML にコンポーネントを render() 追加し、コンポーネントは 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 構成を変更する

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 ビルドチェーンによって正しく処理されます。

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 構成を変更する

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

Web パーツをテストする

次のステップ

フィードバック

フィードバック

その他のリソース

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

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

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

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

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

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

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

コンポーネントの追加

アクセス許可を構成する

Webpack を構成する

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

Webpack 構成を変更する

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

Web パーツをテストする

次のステップ

フィードバック

フィードバック

その他のリソース

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