Microsoft Graph を使用して SharePoint Framework アプリをビルドする

[アーティクル]
Developer (初級)
完了まで 41 分

このチュートリアルでは、Microsoft SharePoint API を使用してユーザーの予定表情報を取得するクライアントGraph Web パーツを作成する方法について説明します。

ヒント

完了したチュートリアルをダウンロードする場合は、リポジトリをダウンロードまたは複製GitHubできます。

前提条件

このチュートリアルを開始する前に、開発マシンに次のツールがインストールされている必要があります。

開発の要件の詳細については、「SharePoint Framework環境のセットアップ」をSharePoint Frameworkしてください。

また、同じ組織のグローバル管理者アカウントにアクセスできる Microsoft の仕事用アカウントまたは学校アカウントを持っている必要があります。 Microsoft アカウントをお持ちでない場合は、Microsoft 365開発者プログラムにサインアップして無料のサブスクリプションMicrosoft 365できます。

このMicrosoft 365開始する前に、アプリカタログSharePoint Frameworkテストサイトを作成して、アプリ開発用にテナントをセットアップする必要があります。

注意

このチュートリアルは、上記のツールの次のバージョンで記述されています。このガイドの手順は、他のバージョンでも動作しますが、テストされていない場合があります。

Node.js 14.15.0
Yeoman 4.1.0
Gulp 4.0.2
Yeoman SharePointジェネレーター 1.12.1

フィードバック

このチュートリアルに関するフィードバックは、リポジトリのGitHubしてください。

SPFX web パーツを作成する

残り 40 分

このチュートリアルでは、Microsoft Graph を使用して現在の週のユーザーの予定表を取得し、ユーザーが予定表にイベントを追加できる SharePoint クライアント側 Web パーツを作成します。

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

プロジェクトを作成する空のディレクトリでコマンドラインインターフェイス (CLI) を開きます。次のコマンドを実行して Yeoman SharePointします。
```
yo @microsoft/sharepoint
```
次のようにプロンプトに応答します。
- ソリューション名は何ですか? graph-tutorial
- どのベースラインパッケージをコンポーネントのターゲットにしたいですか? SharePoint Online only (latest)
- ファイルをどこに保存しますか? Use the current folder
- テナント管理者が、サイトで機能を展開したり、アプリを追加したりせず、すぐにすべてのサイトでソリューションを展開できるようにしたいですか? Yes
- ソリューションのコンポーネントには、テナント内の他のコンポーネントと共有されていない一意の Web API にアクセスするためのアクセス許可が必要ですか? No
- どの種類のクライアント側コンポーネントを作成しますか? WebPart
- Web パーツ名は何ですか? GraphTutorial
- Web パーツで何を行いますか? GraphTutorial description
- どのフレームワークを使用しますか? No JavaScript framework

依存関係のインストール

次に進む前に、後で使用する追加の NPM パッケージをインストールします。

Microsoft Graphの TypeScript 定義を使用して、Microsoft オブジェクトの Intellisense をGraphします。
Microsoft Graph Toolkit Web パーツの UI コンポーネントを提供する必要があります。
日付の操作に役立つ関数の date-fns 。

npm install @microsoft/microsoft-graph-types@1.36.0 --save-dev
npm install @microsoft/mgt@2.1.0 date-fns @2.21.1

アクセス許可を構成する

残り 35 分

このSharePoint Frameworkを使用すると、アクセストークンを取得して Microsoft Azure AD にアクセスするためにアプリケーションを登録するGraph。 Web パーツがユーザートークンを取得できるように、SharePointにログインしているユーザーの認証を処理します。 Web パーツは、必要なアクセス許可Graphを示す必要があります。テナント管理者は、インストール時にそれらのアクセス許可を承認できます。

アクセス許可を構成する

./config/package-solution.json を開きます。

プロパティに次のコードを追加 solution します。

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "Calendars.ReadWrite"
  },
  {
    "resource": "Microsoft Graph",
    "scope": "User.ReadBasic.All"
  },
  {
    "resource": "Microsoft Graph",
    "scope": "Contacts.Read"
  },
  {
    "resource": "Microsoft Graph",
    "scope": "People.Read"
  }
]

このCalendars.ReadWriteアクセス許可を使用すると、Web パーツはユーザーの予定表を取得し、Microsoft のカレンダーを使用してイベントをGraph。その他のアクセス許可は、Microsoft Graph Toolkitのコンポーネントによって使用されます。

オプション: テストトークンの取得

注意

このページの残りの手順は省略可能です。 Microsoft のコードコードをGraphする場合は、[予定表ビューの取得] に進みます。

一時的なコードを Web パーツに追加して、トークンの取得をテストしましょう。

./src/webparts/graphTutorial/GraphTutorialWebPart.ts import を開き、ファイルの上部に次のステートメントを追加します。
```
import { AadTokenProvider } from '@microsoft/sp-http';
```

既存の render 関数を、以下の関数で置き換えます。

public render(): void {
  this.context.aadTokenProviderFactory
    .getTokenProvider()
    .then((provider: AadTokenProvider)=> {
    provider
      .getToken('https://graph.microsoft.com')
      .then((token: string) => {
        this.domElement.innerHTML = `
        <div class="${ styles.graphTutorial }">
          <div class="${ styles.container }">
            <div class="${ styles.row }">
              <div class="${ styles.column }">
                <span class="${ styles.title }">Welcome to SharePoint!</span>
                <p><code style="word-break: break-all;">${ token }</code></p>
              </div>
            </div>
          </div>
        </div>`;
      });
    });
}

Web パーツの展開

CLI で次の 2 つのコマンドを実行して、Web パーツをビルドしてパッケージ化します。
```
gulp bundle --ship
gulp package-solution --ship
```
ブラウザーを開き、テナントのアプリカタログSharePoint移動します。左側の [アプリSharePoint] メニュー項目を選択します。
アップロード ./sharepoint/solution/graph-tutorial.sppkg ファイルを参照 します。
[信頼する必要があります 。.. プロンプト で、package-solution.json ファイルで設定した 4 つの Microsoft Graphアクセス許可が一覧表示されます。 [ このソリューションを組織内のすべてのサイトで使用できる] を選択し、[展開] を 選択します。
テナント管理者をSharePoint管理センターに移動します。
左側のメニューで、[詳細設定] を選択し、[ API アクセス] を選択します。
graph-tutorial-client-side-solution パッケージから保留中の各要求を選択し、[承認] を選択 します。

Web パーツをテストする

Web パーツをSharePointするサイトに移動します。 Web パーツをテストする新しいページを作成します。
Web パーツピッカーを使用して GraphTutorial Web パーツを検索し、ページに追加します。
アクセストークンは、ようこそページの下 にSharePoint! Web パーツのメッセージ。このトークンをコピーして解析 https://jwt.ms/ して、Web パーツに必要なアクセス許可スコープが含まれているか確認できます。

予定表ビューを取得する

残り 25 分

Microsoft SharePoint Framework呼び出しを行う MSGraphClientを提供するGraph。このクラスは、Microsoft Graph JavaScript クライアントライブラリをラップし、現在ログオンしているユーザーと事前認証します。

既存の JavaScript ライブラリをラップしますので、その使用法は同じであり、Microsoft の TypeScript 定義Graph互換性があります。

ユーザーの予定表を取得する

./src/webparts/graphTutorial/GraphTutorialWebPart.ts を開き、ファイルの上部に次のステートメント import を追加します。

import { MSGraphClient } from '@microsoft/sp-http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
import { startOfWeek, endOfWeek, setDay, set } from 'date-fns';

エラーを表示するには 、GraphTutorialWebPart クラスに次の関数を追加します。

private renderGraphError(error: any): void {
  const viewContainer = this.domElement.querySelector('#calendarView');

  // Basic error display
  viewContainer.innerHTML = `
  <h2 class="${ styles.title }">Error</h2>
  <code style="word-break: break-all;">${JSON.stringify(error, null, 2)}</code>`;
}

次の関数を追加して、ユーザーの予定表のイベントを印刷します。

private renderCalendarView(events: MicrosoftGraph.Event[]) : void {
  const viewContainer = this.domElement.querySelector('#calendarView');
  let html = '';

  // Temporary: print events as a list
  for(const event of events) {
    html += `
      <p class="${ styles.description }">Subject: ${event.subject}</p>
      <p class="${ styles.description }">Organizer: ${event.organizer.emailAddress.name}</p>
      <p class="${ styles.description }">Start: ${event.start.dateTime}</p>
      <p class="${ styles.description }">End: ${event.end.dateTime}</p>
      `;
  }

  viewContainer.innerHTML = html;
}

既存の render 関数を、以下の関数で置き換えます。

public render(): void {
  this.context.msGraphClientFactory
    .getClient()
    .then((graphClient: MSGraphClient)=> {
      // Get current date
      const now = new Date();
      // Get the start and end of the week based on current date
      const weekStart = startOfWeek(now);
      const weekEnd = endOfWeek(now);

      graphClient
        .api(`/me/calendarView?startDateTime=${weekStart.toISOString()}&endDateTime=${weekEnd.toISOString()}`)
        .select('subject,organizer,start,end,location,attendees')
        .orderby('start/dateTime')
        .top(25)
        .get((error: any, events: any) => {
          this.domElement.innerHTML = `
          <div class="${ styles.graphTutorial }">
            <div class="${ styles.container }">
              <div class="${ styles.row }">
                <div class="${ styles.column }">
                  <div id="calendarView" />
                </div>
              </div>
            </div>
          </div>`;

          if (error) {
            this.renderGraphError(error);
          } else {
            this.renderCalendarView(events.value);
          }
        });
    });
}

このコードの動作に注意してください。

認証された this.context.msGraphClientFactory.getClient MSGraphClient オブジェクトを取得するために使用 します。
エンドポイントを呼 /me/calendarView び出し、パラメーターとクエリパラメーターを現在の週の開始と startDateTime endDateTime 終了に設定します。
返される select フィールドを制限するために使用され、アプリが使用するフィールドのみを要求します。
イベントを orderby 開始時刻で並べ替える場合に使用します。
結果を top 25 イベントに制限するために使用します。

Web パーツの展開

CLI で次の 2 つのコマンドを実行して、Web パーツをビルドしてパッケージ化します。
```
gulp bundle --ship
gulp package-solution --ship
```
ブラウザーを開き、テナントのアプリカタログSharePoint移動します。左側の [アプリSharePoint] メニュー項目を選択します。
アップロード ./sharepoint/solution/graph-tutorial.sppkg ファイルを参照 します。
[信頼する必要があります 。..] プロンプトで、プロンプトに[ファイルの設定] で設定した 4 つの Microsoft Graphアクセス許可package-solution.js 確認します。 [ このソリューションを組織内のすべてのサイトで使用できる] を選択し、[展開] を 選択します。
Web パーツのアクセス許可Graphまだ承認していない場合は、ここで行います。
1. テナント管理者を使用SharePoint管理センターに移動します。
2. 左側のメニューで、[詳細設定] を選択 し、[API アクセス ] を選択します。
3. graph-tutorial-client-side-solution パッケージから保留中の各要求を選択し、[承認] を選択 します。

Web パーツをテストする

Web パーツをSharePointするサイトに移動します。 Web パーツをテストする新しいページを作成します。
Web パーツピッカーを使用して GraphTutorial Web パーツを検索し、ページに追加します。
現在の週のイベントの一覧が Web パーツに印刷されます。

Microsoft Graph ツールキットを追加する

残り 15 分

このセクションでは、Microsoft Graph Toolkitを使用して、イベントの単純な一覧をリッチ UI に置き換える予定です。

ツールキットには、イベントの一覧の表示に適したアジェンダコンポーネントが提供されています。

Web パーツの更新

Open ./src/webparts/graphTutorial/GraphTutorialWebPart.module.scss. エントリの属性の値 background-color をに .row 変更します $ms-color-white 。
```
.row {
  @include ms-Grid-row;
  @include ms-fontColor-white;
  background-color: $ms-color-white;
  padding: 20px;
}
```
エントリ内に次のエントリを追加 .graphTutorial します。
```
#addSocialBtn {
  margin-bottom: 1em;
}
```
./src/webparts/graphTutorial/GraphTutorialWebPart.ts を開き、ファイルの上部に次のステートメント import を追加します。
```
import { Providers, SharePointProvider, MgtAgenda } from '@microsoft/mgt';
```

GraphTutorialWebPart クラスに次の関数を追加して、ツールキットを初期化します。

protected async onInit() {
  // Set the toolkit's global auth provider to
  // SharePoint provider, allowing it to use the Graph
  // access token
  Providers.globalProvider =
    new SharePointProvider(this.context);
}

既存の renderCalendarView 関数を、以下の関数で置き換えます。

private renderCalendarView(events: MicrosoftGraph.Event[]) : void {
  const viewContainer = this.domElement.querySelector('#calendarView');

  // Create an agenda component from the toolkit
  let agenda = new MgtAgenda();
  // Set the events
  agenda.events = events;
  // Group events by day
  agenda.groupByDay = true;

  viewContainer.appendChild(agenda);
}

これにより、基本的なリストがツールキットの Agenda コンポーネントに置き換まれます。

Web パーツをビルド、パッケージ化、および再アップロードし、テストするページを更新します。

別の方法

この時点で、次のコードがあります。

MSGraphClient を使用 して、Microsoft から現在の週のユーザーの予定表ビューを取得Graph。
Microsoft サーバーからこれらのイベントを Agenda コンポーネントに追加Graph Toolkit。

この方法では、API 呼び出しGraph完全に制御し、必要なレンダリングの前にイベントの処理を実行できます。ただし、必要ない場合は、アジェンダコンポーネントに作業を行わせて簡単にできます。

すべての Microsoft Graph Toolkitコンポーネントは、関連するすべての API 呼び出しを Microsoft アプリケーションに対して行Graph。たとえば、アジェンダコンポーネントを Web パーツに追加し、プロパティを設定しない場合、Web パーツは既定の設定を使用して現在の日のイベントを取得します。現在の結果と同じ結果 (現在の週のイベント) を達成する方法を見てみることができます。

既存のメソッドを render 次に置き換える。

public render(): void {
  // Get current date
  const now = new Date();
  // Get the start of the week based on current date
  const weekStart = startOfWeek(now);

  this.domElement.innerHTML = `
  <div class="${ styles.graphTutorial }">
    <div class="${ styles.container }">
      <div class="${ styles.row }">
        <div class="${ styles.column }">
          <button class="${ styles.button }" id="${ styles.addSocialBtn }">
            <span class="${ styles.label }">Add team social</span>
          </button>
          <mgt-agenda
            date="${weekStart.toISOString()}"
            days="7"
            group-by-day></mgt-agenda>
        </div>
      </div>
    </div>
  </div>`;

  this.domElement.querySelector(`#${styles.addSocialBtn}`)
    .addEventListener('click', this.addSocialToCalendar.bind(this));
}

ここで、API 呼び出しを行う代わりに、HTML に要素を render mgt-agenda 直接追加します。週の開始に設定し、7 に設定すると、コンポーネントは以前のバージョンが行っていたのと同じ API 呼び date days 出しを render 行います。

GraphTutorialWebPart クラスに次の空の関数を追加 します。
```
private async addSocialToCalendar() {}
```
注意

また、Web パーツに [チームソーシャル の追加] ボタンを追加し、イベントリスナー addSocialToCalendar としてメソッドを追加しました。次のセクションでは、その背後にあるコードを実装します。今のところ、コードをコンパイルする必要があります。
Web パーツをビルド、パッケージ化、および再アップロードし、テストするページを更新します。ビューは、以前のテストと同じになる必要があります。

ツールキットの使用と API 呼び出しの実行

この時点で、ツールキットが機能を実行するときに 、MSGraphClient を使用する際に問題が発生した理由について疑問に思う場合があります。このツールキットは、イベントの一覧など、Microsoft Graphクエリを実行する結果をレンダリングするために設計されています。ただし、API 呼び出しを自分で行う必要があるシナリオがあります。

要求ではない API 呼び出 GET し。たとえば、予定表に新しいイベントを作成したり、ユーザーの電話番号を更新したりします。
API 呼び出しを使用して、"舞台裏" で使用され、直接レンダリングされないデータを取得します。

新しいイベントを作成する

残り 5 分

このセクションでは、Web パーツを更新して、ユーザーがチームの毎週のソーシャルアワーの予定表にイベントを追加できます。このシナリオでは、チームは金曜日の午後 4 時に週 1 回のソーシャル時間を設定します。

./src/webparts/graphTutorial/GraphTutorialWebPart.ts を開き、既存のメソッドを次のように addSocialToCalendar() 置き換える。

private async addSocialToCalendar() {
  const graphClient = await this.context.msGraphClientFactory.getClient();

  // Get current date
  const now = new Date();

  // Set start time to next Friday
  // at 4 PM
  const socialHourStart = set(
    setDay(now, 5),
    {
      hours: 16,
      minutes: 0,
      seconds:0,
      milliseconds: 0
    });

  // Create a new event
  const socialHour: MicrosoftGraph.Event = {
    subject: 'Team Social Hour',
    body: {
      contentType: 'text',
      content: 'Come join the rest of the team for our end-of-week social hour.'
    },
    location: {
      displayName: 'Break room'
    },
    start: {
      dateTime: socialHourStart.toISOString(),
      timeZone: 'UTC'
    },
    end: {
      dateTime: set(socialHourStart, { hours: 17 }).toISOString(),
      timeZone: 'UTC'
    }
  };

  try {
    // POST /me/events
    await graphClient
      .api('/me/events')
      .post(socialHour);

    // Refresh the view
    this.render();
  } catch (error) {
    this.renderGraphError(error);
  }
}

このコードの動作を検討します。

次の金曜日を決定し、その日の午後4 時の日付を作成します。
新しい MicrosoftGraph.Event オブジェクトを作成し、開始日を Date の値に設定し、1 時間後に終了します。
MSGraphClient を使用して、新しいイベントをエンドポイントに POST /me/events します。
Web パーツが再レンダリングされ、ビューが新しいイベントで更新されます。

Web パーツをビルド、パッケージ化、および再アップロードし、テストするページを更新します。
[チームの ソーシャルの追加] ボタンをクリック します。ページが更新された後、金曜日までスクロールダウンして、新しいイベントを見つける。

Microsoft Graph を使用して SharePoint Framework アプリをビルドする

前提条件

フィードバック

SPFX web パーツを作成する

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

依存関係のインストール

アクセス許可を構成する

アクセス許可を構成する

オプション: テスト トークンの取得

Web パーツの展開

Web パーツをテストする

予定表ビューを取得する

ユーザーの予定表を取得する

Web パーツの展開

Web パーツをテストする

Microsoft Graph ツールキットを追加する

Web パーツの更新

別の方法

ツールキットの使用と API 呼び出しの実行

新しいイベントを作成する

おめでとうございます。

フィードバック

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

オプション: テストトークンの取得